import { createBan, liftBan } from "@/actions/admin-bans";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

function fromUnix(ts: number): string {
  return new Date(ts * 1000).toISOString().slice(0, 16).replace("T", " ");
}

export default async function AdminBans() {
  const now = Math.floor(Date.now() / 1000);
  let bans: Awaited<ReturnType<typeof prisma.ban.findMany>> = [];
  try {
    bans = await prisma.ban.findMany({
      where: { banExpire: { gt: now } },
      orderBy: { timestamp: "desc" },
      take: 100,
    });
  } catch {
    bans = [];
  }

  // banExpire of 0 means permanent in the emulator schema.
  const permanent = bans.filter((b) => b.banExpire === 0).length;
  const accountBans = bans.filter((b) => b.type === "account").length;

  return (
    <main>
      <h1>Bans</h1>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        Active bans only (expiry in the future) · newest first.
      </p>

      <div className="admin-stats">
        <StatusCard
          label="Active bans"
          value={bans.length}
          state={bans.length > 0 ? "warn" : "ok"}
          icon="🔨"
        />
        <StatusCard
          label="Permanent"
          value={permanent}
          state={permanent > 0 ? "danger" : "neutral"}
          icon="⛔"
        />
        <StatusCard label="Account bans" value={accountBans} icon="👤" />
      </div>

      <form action={createBan} className="card" style={{ marginBottom: "1.5rem" }}>
        <h3 style={{ marginTop: 0 }}>New ban</h3>
        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
          <input name="userId" type="number" min={1} placeholder="User ID" required />
          <select name="type">
            <option value="account">account</option>
            <option value="ip">ip</option>
            <option value="machine">machine</option>
            <option value="super">super</option>
          </select>
          <input name="hours" type="number" min={0} placeholder="Hours (0 = perm)" />
          <input name="reason" placeholder="Reason" style={{ flex: 1, minWidth: 160 }} />
          <button type="submit" className="btn btn-danger">
            Ban
          </button>
        </div>
      </form>

      <section className="admin-section">
        <h2>Active bans ({bans.length})</h2>
        {bans.length === 0 ? (
          <p className="muted">No active bans.</p>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table>
              <thead>
                <tr>
                  <th>User ID</th>
                  <th>Type</th>
                  <th>Reason</th>
                  <th>Expires</th>
                  <th />
                </tr>
              </thead>
              <tbody>
                {bans.map((b) => (
                  <tr key={b.id}>
                    <td>{b.userId}</td>
                    <td>
                      <span className="admin-badge">{b.type}</span>
                    </td>
                    <td>{b.banReason || "—"}</td>
                    <td>
                      {b.banExpire === 0 ? (
                        <span className="admin-badge danger">permanent</span>
                      ) : (
                        <span className="muted" style={{ whiteSpace: "nowrap" }}>
                          {fromUnix(b.banExpire)}
                        </span>
                      )}
                    </td>
                    <td>
                      <form action={liftBan}>
                        <input type="hidden" name="id" value={b.id} />
                        <button type="submit" className="btn btn-outline">
                          Lift
                        </button>
                      </form>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </main>
  );
}