import type { Metadata } from 'next';
import { and, desc, eq, gt, isNull } from '@/lib/db';
import { db, loginEvents, sessions, trustedDevices } from '@/lib/db';
import { currentSessionId, requireUser } from '@/lib/auth/session';
import { deviceLabel } from '@/lib/auth/request';
import { revokeDeviceAction, revokeSessionAction, signOutEverywhereAction, toggleAlwaysAskCodeAction } from '@/lib/auth/account-actions';
import { PageHeader, btnDanger, btnSecondary } from '@/components/account/page-header';
import { Card, CardHeader, Badge, Table, th, td } from '@/components/ui/primitives';
import { fmtRelative } from '@/lib/format';
import { ChangePasswordForm, MfaSection } from './forms';

export const metadata: Metadata = { title: 'Security', robots: { index: false } };

export default async function SecurityPage() {
  const u = await requireUser('/account/security');
  const current = await currentSessionId();
  const [sess, devices, logins] = await Promise.all([
    db().select().from(sessions).where(and(eq(sessions.userId, u.id), isNull(sessions.revokedAt), gt(sessions.expiresAt, new Date()))).orderBy(desc(sessions.lastSeenAt)),
    db().select().from(trustedDevices).where(and(eq(trustedDevices.userId, u.id), isNull(trustedDevices.revokedAt), gt(trustedDevices.expiresAt, new Date()))).orderBy(desc(trustedDevices.lastUsedAt)),
    db().select().from(loginEvents).where(eq(loginEvents.userId, u.id)).orderBy(desc(loginEvents.createdAt)).limit(25),
  ]);
  return (
    <>
      <PageHeader title="Security" description="Password, two-step verification, trusted devices and sign-in history." />
      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader title="Two-step verification" subtitle={u.mfaEnabled ? 'Authenticator app enabled' : 'E-mail codes protect new devices; add an authenticator for stronger protection.'} action={<Badge tone={u.mfaEnabled ? 'gain' : 'alert'}>{u.mfaEnabled ? 'Authenticator on' : 'E-mail codes'}</Badge>} />
          <div className="p-4">
            <MfaSection enabled={u.mfaEnabled} />
            <form action={toggleAlwaysAskCodeAction} className="mt-5 border-t border-border pt-4">
              <label className="flex items-start gap-2.5 text-sm">
                <input type="checkbox" name="alwaysAskCode" defaultChecked={u.alwaysAskCode} className="mt-0.5 h-4 w-4" onChange={undefined} />
                <span>
                  <span className="block">Ask for an e-mailed code on every new device</span>
                  <span className="block text-xs text-muted">Applies when the authenticator is off. Trusted devices skip it for 30 days.</span>
                </span>
              </label>
              <button type="submit" className={`${btnSecondary} mt-3 h-8 text-xs`}>
                Save
              </button>
            </form>
          </div>
        </Card>
        <Card>
          <CardHeader title="Password" subtitle={u.passwordChangedAt ? `Last changed ${fmtRelative(u.passwordChangedAt)}` : 'Never changed'} />
          <div className="p-4">
            <ChangePasswordForm />
          </div>
        </Card>
        <Card>
          <CardHeader title="Active sessions" subtitle={`${sess.length} signed-in session${sess.length === 1 ? '' : 's'}`} action={
            <form action={signOutEverywhereAction}>
              <button className={btnDanger}>Sign out everywhere else</button>
            </form>
          } />
          <ul className="divide-y divide-border">
            {sess.map((s) => (
              <li key={s.id} className="flex items-center justify-between gap-3 px-4 py-2.5 text-sm">
                <div className="min-w-0">
                  <p className="truncate">
                    {deviceLabel(s.userAgent)} {s.id === current ? <Badge tone="index" className="ml-1">This device</Badge> : null}
                  </p>
                  <p className="text-xs text-subtle">
                    {s.ip ?? 'unknown IP'} · active {fmtRelative(s.lastSeenAt ?? s.createdAt)} · expires {fmtRelative(s.expiresAt)}
                  </p>
                </div>
                {s.id !== current ? (
                  <form action={revokeSessionAction}>
                    <input type="hidden" name="sessionId" value={s.id} />
                    <button className={btnDanger}>Revoke</button>
                  </form>
                ) : null}
              </li>
            ))}
          </ul>
        </Card>
        <Card>
          <CardHeader title="Trusted devices" subtitle="Devices that skip the second step for 30 days." />
          {devices.length === 0 ? (
            <p className="px-4 py-6 text-center text-xs text-muted">No trusted devices.</p>
          ) : (
            <ul className="divide-y divide-border">
              {devices.map((d) => (
                <li key={d.id} className="flex items-center justify-between gap-3 px-4 py-2.5 text-sm">
                  <div className="min-w-0">
                    <p className="truncate">{d.label ?? deviceLabel(d.userAgent)}</p>
                    <p className="text-xs text-subtle">
                      {d.ip ?? 'unknown IP'} · last used {fmtRelative(d.lastUsedAt ?? d.createdAt)} · until {d.expiresAt.toISOString().slice(0, 10)}
                    </p>
                  </div>
                  <form action={revokeDeviceAction}>
                    <input type="hidden" name="deviceId" value={d.id} />
                    <button className={btnDanger}>Forget</button>
                  </form>
                </li>
              ))}
            </ul>
          )}
        </Card>
      </div>
      <Card className="mt-4">
        <CardHeader title="Sign-in history" subtitle="Last 25 events." />
        <Table>
          <thead>
            <tr>
              <th className={th}>When</th>
              <th className={th}>Outcome</th>
              <th className={th}>Method</th>
              <th className={th}>Device</th>
              <th className={th}>IP</th>
            </tr>
          </thead>
          <tbody>
            {logins.map((l) => (
              <tr key={l.id}>
                <td className={td}>{fmtRelative(l.createdAt)}</td>
                <td className={td}>
                  <Badge tone={l.outcome === 'success' ? 'gain' : l.outcome === 'mfa_required' ? 'neutral' : 'loss'}>{l.outcome.replace(/_/g, ' ')}</Badge>
                </td>
                <td className={td}>{l.method ?? '—'}</td>
                <td className={td}>{deviceLabel(l.userAgent)}</td>
                <td className={`${td} mono-num text-xs`}>{l.ip ?? '—'}</td>
              </tr>
            ))}
            {logins.length === 0 ? (
              <tr>
                <td className={td} colSpan={5}>
                  <span className="text-muted">No sign-in events yet.</span>
                </td>
              </tr>
            ) : null}
          </tbody>
        </Table>
      </Card>
    </>
  );
}