import {
  addBlacklist,
  addWhitelist,
  deleteBlacklist,
  deleteWhitelist,
} from "@/actions/admin-ip";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

type IpRow = {
  id: bigint;
  ipAddress: string;
  asn: string | null;
  createdAt: Date | null;
};

function formatDate(d: Date | null): string {
  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
}

export default async function AdminIp() {
  let whitelist: IpRow[] = [];
  let blacklist: IpRow[] = [];

  try {
    whitelist = await prisma.websiteIpWhitelist.findMany({
      orderBy: { id: "desc" },
      take: 200,
    });
  } catch {
    whitelist = [];
  }

  try {
    blacklist = await prisma.websiteIpBlacklist.findMany({
      orderBy: { id: "desc" },
      take: 200,
    });
  } catch {
    blacklist = [];
  }

  return (
    <main>
      <h1>IP Management</h1>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        Allow or block IP addresses (and ASNs) at the website edge.
      </p>

      <div className="admin-stats">
        <StatusCard
          label="Whitelisted"
          value={whitelist.length}
          state={whitelist.length > 0 ? "ok" : "neutral"}
          icon="✅"
        />
        <StatusCard
          label="Blacklisted"
          value={blacklist.length}
          state={blacklist.length > 0 ? "danger" : "neutral"}
          icon="🚫"
        />
      </div>

      <div className="grid cols-2">
        {/* ── Whitelist ──────────────────── */}
        <section className="admin-section">
          <h2>Whitelist</h2>

          <form action={addWhitelist} className="card" style={{ marginBottom: "1rem" }}>
            <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
              <input
                name="ipAddress"
                placeholder="IP address"
                required
                style={{ flex: 1, minWidth: 140 }}
              />
              <input name="asn" placeholder="ASN (optional)" style={{ width: 140 }} />
              <button type="submit" className="btn btn-secondary">
                Add
              </button>
            </div>
          </form>

          {whitelist.length === 0 ? (
            <p className="muted">No whitelisted IPs.</p>
          ) : (
            <div style={{ overflowX: "auto" }}>
              <table>
                <thead>
                  <tr>
                    <th>IP</th>
                    <th>ASN</th>
                    <th>Added</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  {whitelist.map((w) => (
                    <tr key={String(w.id)}>
                      <td>{w.ipAddress}</td>
                      <td className="muted">{w.asn ?? "—"}</td>
                      <td className="muted">{formatDate(w.createdAt)}</td>
                      <td>
                        <form action={deleteWhitelist}>
                          <input type="hidden" name="id" value={String(w.id)} />
                          <button type="submit" className="btn btn-danger">
                            Remove
                          </button>
                        </form>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>

        {/* ── Blacklist ──────────────────── */}
        <section className="admin-section">
          <h2>Blacklist</h2>

          <form action={addBlacklist} className="card" style={{ marginBottom: "1rem" }}>
            <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
              <input
                name="ipAddress"
                placeholder="IP address"
                required
                style={{ flex: 1, minWidth: 140 }}
              />
              <input name="asn" placeholder="ASN (optional)" style={{ width: 140 }} />
              <button type="submit" className="btn btn-danger">
                Add
              </button>
            </div>
          </form>

          {blacklist.length === 0 ? (
            <p className="muted">No blacklisted IPs.</p>
          ) : (
            <div style={{ overflowX: "auto" }}>
              <table>
                <thead>
                  <tr>
                    <th>IP</th>
                    <th>ASN</th>
                    <th>Added</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  {blacklist.map((b) => (
                    <tr key={String(b.id)}>
                      <td>{b.ipAddress}</td>
                      <td className="muted">{b.asn ?? "—"}</td>
                      <td className="muted">{formatDate(b.createdAt)}</td>
                      <td>
                        <form action={deleteBlacklist}>
                          <input type="hidden" name="id" value={String(b.id)} />
                          <button type="submit" className="btn btn-danger">
                            Remove
                          </button>
                        </form>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </div>
    </main>
  );
}