import { requireSuperAdmin } from "@/lib/auth";
import { getS3Config, getSettings } from "@/lib/settings";
import { Card, PageHeader, btn, input, Field, Badge } from "@/components/ui";
import { saveS3Settings, saveSesSettings, testEmailAction, testStorageAction } from "../actions";
import { getSesConfig } from "@/lib/email";
import { db } from "@/lib/db";
import { fmtDateTime } from "@/lib/utils";

export const metadata = { title: "System settings" };

export default async function AdminSettingsPage({
  searchParams,
}: {
  searchParams: Promise<{ saved?: string; test?: string; emailtest?: string }>;
}) {
  await requireSuperAdmin();
  const { saved, test, emailtest } = await searchParams;
  const [s, active, ses, emailLogs, emailStats] = await Promise.all([
    getSettings(["s3.bucket", "s3.region", "s3.accessKeyId", "s3.secretAccessKey", "s3.publicUrl", "ses.fromEmail", "ses.fromName", "ses.region", "ses.accessKeyId", "ses.secretAccessKey", "platform.baseUrl"]),
    getS3Config(),
    getSesConfig(),
    db.emailLog.findMany({ orderBy: { createdAt: "desc" }, take: 12 }),
    db.emailLog.groupBy({ by: ["status"], _count: true }),
  ]);
  const emailCount = Object.fromEntries(emailStats.map((e) => [e.status, e._count]));
  const emailTestResult = emailtest?.startsWith("ok:") ? { ok: true, msg: emailtest.slice(3) } : emailtest?.startsWith("fail:") ? { ok: false, msg: emailtest.slice(5) } : null;
  const sesSecretSet = Boolean(s["ses.secretAccessKey"]);
  const secretSet = Boolean(s["s3.secretAccessKey"]);
  const mode = active ? (active.source === "settings" ? "S3 (admin settings)" : "S3 (environment variables)") : "Local disk (uploads/ via /api/files)";
  const testResult = test?.startsWith("ok:") ? { ok: true, msg: test.slice(3) } : test?.startsWith("fail:") ? { ok: false, msg: test.slice(5) } : null;

  return (
    <div>
      <PageHeader title="System settings" sub="Platform-level configuration — applies to every conference." />
      {saved && <div className="mb-4 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-600">Settings saved.</div>}
      {testResult && (
        <div className={`mb-4 rounded-lg border px-4 py-3 text-sm ${testResult.ok ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600" : "border-red-500/30 bg-red-500/10 text-red-600"}`}>
          {testResult.ok ? <>✓ Test upload succeeded → <a href={testResult.msg} target="_blank" rel="noreferrer" className="underline">{testResult.msg}</a></> : <>✗ Test upload failed: {testResult.msg}</>}
        </div>
      )}
      {emailTestResult && (
        <div className={`mb-4 rounded-lg border px-4 py-3 text-sm ${emailTestResult.ok ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600" : "border-red-500/30 bg-red-500/10 text-red-600"}`}>
          {emailTestResult.ok ? <>✓ Test email sent — {emailTestResult.msg}</> : <>✗ Test email failed: {emailTestResult.msg}</>}
        </div>
      )}

      <div className="grid gap-6 lg:grid-cols-3">
        <Card className="p-5 lg:col-span-2">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-bold text-zinc-100">🪣 AWS S3 — image & file storage</h2>
            <Badge className={active ? "bg-emerald-500/10 text-emerald-600" : "bg-amber-500/10 text-amber-600"}>{mode}</Badge>
          </div>
          <p className="mt-1 text-xs text-zinc-500">
            Speaker photos and other uploads go to this bucket. Leave the bucket blank to fall back to
            environment variables, then to local disk. The secret key is write-only — it is never shown again.
          </p>
          <form action={saveS3Settings} className="mt-5 space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <Field name="bucket" title="Bucket name">
                <input id="bucket" name="bucket" defaultValue={s["s3.bucket"] ?? ""} className={input} placeholder="confexe-uploads" />
              </Field>
              <Field name="region" title="Region">
                <input id="region" name="region" defaultValue={s["s3.region"] ?? ""} className={input} placeholder="ap-south-1" />
              </Field>
              <Field name="accessKeyId" title="Access key ID">
                <input id="accessKeyId" name="accessKeyId" defaultValue={s["s3.accessKeyId"] ?? ""} className={input} placeholder="AKIA…" autoComplete="off" />
              </Field>
              <Field name="secretAccessKey" title={`Secret access key${secretSet ? " (set — blank keeps current)" : ""}`}>
                <input id="secretAccessKey" name="secretAccessKey" type="password" className={input} placeholder={secretSet ? "••••••••••••" : "Secret key"} autoComplete="new-password" />
              </Field>
            </div>
            <Field name="publicUrl" title="Public base URL (optional — CloudFront/CDN)">
              <input id="publicUrl" name="publicUrl" defaultValue={s["s3.publicUrl"] ?? ""} className={input} placeholder="https://cdn.example.com" />
            </Field>
            <p className="text-xs text-zinc-600">
              Leave the key fields empty to use the server's IAM role / environment credentials instead of stored keys.
            </p>
            <div className="flex justify-end"><button className={btn.primary}>Save settings</button></div>
          </form>
        </Card>

        <Card className="h-fit p-5">
          <h2 className="text-sm font-bold text-zinc-100">Storage health check</h2>
          <p className="mt-1 text-xs text-zinc-500">
            Uploads a 1×1 test image through the active storage mode and reports the URL it lands on.
            Run this after changing credentials.
          </p>
          <form action={testStorageAction} className="mt-4">
            <button className={`${btn.secondary} w-full`}>📤 Send test upload</button>
          </form>
          <div className="mt-4 space-y-1.5 border-t border-zinc-800/60 pt-3 text-xs text-zinc-500">
            <div className="flex justify-between"><span>Active mode</span><span className="font-semibold text-zinc-300">{mode}</span></div>
            <div className="flex justify-between"><span>Bucket</span><span className="font-mono text-zinc-300">{active?.bucket ?? "—"}</span></div>
            <div className="flex justify-between"><span>Region</span><span className="font-mono text-zinc-300">{active?.region ?? "—"}</span></div>
            <div className="flex justify-between"><span>Credentials</span><span className="text-zinc-300">{active ? (active.accessKeyId ? "stored keys" : "IAM role / env") : "n/a"}</span></div>
          </div>
        </Card>
      </div>

      {/* ── AWS SES email ── */}
      <div className="mt-6 grid gap-6 lg:grid-cols-3">
        <Card className="p-5 lg:col-span-2">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-bold text-zinc-100">✉️ AWS SES — email triggers</h2>
            <Badge className={ses ? "bg-emerald-500/10 text-emerald-600" : "bg-amber-500/10 text-amber-600"}>
              {ses ? `Enabled (${ses.source === "settings" ? "admin settings" : "env"})` : "Disabled — emails logged as skipped"}
            </Badge>
          </div>
          <p className="mt-1 text-xs text-zinc-500">
            Powers registration confirmations, volunteer welcomes, submission decisions, certificate delivery,
            announcement blasts and reviewer assignments. The From address must be verified in SES; the secret key is write-only.
          </p>
          <form action={saveSesSettings} className="mt-5 space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <Field name="fromEmail" title="From email (SES-verified)">
                <input id="fromEmail" name="fromEmail" defaultValue={s["ses.fromEmail"] ?? ""} className={input} placeholder="noreply@indicops.com" />
              </Field>
              <Field name="fromName" title="From name">
                <input id="fromName" name="fromName" defaultValue={s["ses.fromName"] ?? ""} className={input} placeholder="Confexe" />
              </Field>
              <Field name="sesRegion" title="SES region">
                <input id="sesRegion" name="sesRegion" defaultValue={s["ses.region"] ?? ""} className={input} placeholder="ap-south-1" />
              </Field>
              <Field name="baseUrl" title="Public base URL (links inside emails)">
                <input id="baseUrl" name="baseUrl" defaultValue={s["platform.baseUrl"] ?? ""} className={input} placeholder="https://confexe.indicops.com" />
              </Field>
              <Field name="sesAccessKeyId" title="Access key ID (blank = IAM role)">
                <input id="sesAccessKeyId" name="sesAccessKeyId" defaultValue={s["ses.accessKeyId"] ?? ""} className={input} placeholder="AKIA…" autoComplete="off" />
              </Field>
              <Field name="sesSecretAccessKey" title={`Secret access key${sesSecretSet ? " (set — blank keeps current)" : ""}`}>
                <input id="sesSecretAccessKey" name="sesSecretAccessKey" type="password" className={input} placeholder={sesSecretSet ? "••••••••••••" : "Secret key"} autoComplete="new-password" />
              </Field>
            </div>
            <div className="flex justify-end"><button className={btn.primary}>Save email settings</button></div>
          </form>
        </Card>

        <Card className="h-fit p-5">
          <h2 className="text-sm font-bold text-zinc-100">Email health</h2>
          <form action={testEmailAction} className="mt-3">
            <button className={`${btn.secondary} w-full`}>📨 Send test email to me</button>
          </form>
          <div className="mt-4 grid grid-cols-3 gap-2 text-center">
            {["SENT", "FAILED", "SKIPPED"].map((st) => (
              <div key={st} className="rounded-xl border border-zinc-800/60 px-2 py-2">
                <div className={`text-lg font-bold tabular-nums ${st === "SENT" ? "text-emerald-600" : st === "FAILED" ? "text-red-600" : "text-amber-600"}`}>{emailCount[st] ?? 0}</div>
                <div className="text-[10px] uppercase tracking-wider text-zinc-500">{st.toLowerCase()}</div>
              </div>
            ))}
          </div>
          <h3 className="mt-4 text-xs font-semibold uppercase tracking-wider text-zinc-500">Recent emails</h3>
          <div className="mt-2 space-y-1.5">
            {emailLogs.length === 0 && <p className="text-sm text-zinc-600">No email activity yet.</p>}
            {emailLogs.map((e) => (
              <div key={e.id} className="rounded-lg border border-zinc-800/60 px-2.5 py-1.5 text-[11px]">
                <div className="flex items-center justify-between gap-2">
                  <span className="truncate font-semibold text-zinc-300">{e.to}</span>
                  <Badge className={e.status === "SENT" ? "bg-emerald-500/10 text-emerald-600" : e.status === "FAILED" ? "bg-red-500/10 text-red-600" : "bg-amber-500/10 text-amber-600"}>{e.status}</Badge>
                </div>
                <div className="truncate text-zinc-500">{e.template} · {e.subject}</div>
                {e.error && <div className="truncate text-red-600/80">{e.error}</div>}
                <div className="text-zinc-600">{fmtDateTime(e.createdAt)}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}