import { KeyRound, LogIn, ShieldAlert } from "lucide-react";
import { getWorkspace } from "@/lib/session";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { ChangePasswordForm } from "@/components/dashboard/settings/change-password-form";
import { ActiveSessions } from "@/components/dashboard/settings/active-sessions";

export const dynamic = "force-dynamic";

export default async function SecurityPage() {
  await getWorkspace();
  return (
    <div className="grid gap-6">
      <Card>
        <CardHeader>
          <CardTitle>Change password</CardTitle>
          <CardDescription>Use at least 10 characters with mixed case and a number or symbol. Changing it is recorded in your audit log.</CardDescription>
        </CardHeader>
        <CardContent>
          <ChangePasswordForm />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Active sessions</CardTitle>
          <CardDescription>Everywhere you are signed in. Revoke anything you do not recognise — API keys are separate and unaffected.</CardDescription>
        </CardHeader>
        <CardContent>
          <ActiveSessions />
        </CardContent>
      </Card>

      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between gap-3">
              <CardTitle>Two-factor authentication</CardTitle>
              <Badge variant="outline">Coming soon</Badge>
            </div>
            <CardDescription>Authenticator app (TOTP) codes are planned first; passkeys will follow. Not available during the public preview.</CardDescription>
          </CardHeader>
          <CardContent>
            <label className="flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2.5 text-[13px] opacity-70">
              <span className="flex items-center gap-2">
                <KeyRound className="size-4 text-fg-subtle" aria-hidden /> Require a second factor at sign-in
              </span>
              <Switch disabled aria-label="Two-factor authentication (coming soon)" />
            </label>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Security notifications</CardTitle>
            <CardDescription>Emails we always send to your verified address. They cannot be turned off.</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="grid gap-2.5 text-[13px]">
              <li className="flex gap-2.5">
                <KeyRound className="mt-0.5 size-4 shrink-0 text-fg-subtle" aria-hidden />
                <span>
                  <span className="font-medium">API key created or revoked</span>
                  <span className="block text-fg-muted">Includes the key name and prefix, never the secret.</span>
                </span>
              </li>
              <li className="flex gap-2.5">
                <LogIn className="mt-0.5 size-4 shrink-0 text-fg-subtle" aria-hidden />
                <span>
                  <span className="font-medium">Password, email or account changes</span>
                  <span className="block text-fg-muted">Password resets, email change approvals and account deletion confirmations.</span>
                </span>
              </li>
              <li className="flex gap-2.5">
                <ShieldAlert className="mt-0.5 size-4 shrink-0 text-fg-subtle" aria-hidden />
                <span>
                  <span className="font-medium">Spending limits</span>
                  <span className="block text-fg-muted">When a soft limit is crossed or a hard limit stops requests.</span>
                </span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}