"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { CheckCircle, Copy, Shield } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function MFASetupPage() {
  const router = useRouter();
  const [qrCode, setQrCode] = useState<string | null>(null);
  const [secret, setSecret] = useState<string | null>(null);
  const [token, setToken] = useState("");
  const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    fetch("/api/mfa/setup", { method: "POST" })
      .then((r) => r.json())
      .then((d) => { setQrCode(d.qrCodeDataUrl); setSecret(d.secret); });
  }, []);

  async function handleEnable() {
    setError(null);
    setLoading(true);
    const res = await fetch("/api/mfa/verify", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token }),
    });
    setLoading(false);

    if (!res.ok) { setError("Invalid code. Please try again."); return; }
    const data = await res.json();
    setBackupCodes(data.backupCodes);
  }

  function copySecret() {
    if (secret) { navigator.clipboard.writeText(secret); setCopied(true); setTimeout(() => setCopied(false), 2000); }
  }

  if (backupCodes) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4">
        <Card className="w-full max-w-md border-slate-700 bg-slate-800/50 backdrop-blur">
          <CardHeader className="text-center">
            <div className="flex justify-center mb-2">
              <CheckCircle className="h-10 w-10 text-emerald-400" />
            </div>
            <CardTitle className="text-white">MFA enabled!</CardTitle>
            <CardDescription className="text-slate-400">
              Save these backup codes somewhere safe. Each can only be used once.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-2">
              {backupCodes.map((code) => (
                <code key={code} className="bg-slate-700 rounded px-3 py-2 text-sm text-emerald-300 font-mono text-center">
                  {code}
                </code>
              ))}
            </div>
            <Button className="w-full bg-emerald-600 hover:bg-emerald-500" onClick={() => router.push("/dashboard")}>
              Go to dashboard
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4">
      <Card className="w-full max-w-md border-slate-700 bg-slate-800/50 backdrop-blur">
        <CardHeader>
          <div className="flex items-center gap-2">
            <Shield className="h-5 w-5 text-emerald-400" />
            <CardTitle className="text-white">Set up two-factor authentication</CardTitle>
          </div>
          <CardDescription className="text-slate-400">
            Scan the QR code with your authenticator app (Google Authenticator, Authy, etc.)
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {qrCode ? (
            <div className="flex justify-center">
              <div className="rounded-xl bg-white p-3">
                <Image src={qrCode} alt="MFA QR Code" width={180} height={180} />
              </div>
            </div>
          ) : (
            <div className="flex justify-center items-center h-48 bg-slate-700/50 rounded-xl">
              <p className="text-slate-400 text-sm">Generating QR code…</p>
            </div>
          )}

          {secret && (
            <div className="space-y-1">
              <Label className="text-slate-400 text-xs">Or enter this key manually</Label>
              <div className="flex items-center gap-2">
                <code className="flex-1 bg-slate-700 rounded px-3 py-2 text-xs text-emerald-300 font-mono break-all">
                  {secret}
                </code>
                <Button size="icon" variant="outline" onClick={copySecret} className="border-slate-600 text-slate-300 shrink-0">
                  {copied ? <CheckCircle className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
                </Button>
              </div>
            </div>
          )}

          {error && (
            <div className="rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3 text-sm text-red-400">
              {error}
            </div>
          )}

          <div className="space-y-2">
            <Label htmlFor="token" className="text-slate-300">Enter 6-digit code to confirm</Label>
            <Input
              id="token"
              value={token}
              onChange={(e) => setToken(e.target.value.replace(/\D/g, "").slice(0, 6))}
              placeholder="000000"
              className="bg-slate-700/50 border-slate-600 text-white text-center text-lg tracking-widest"
              maxLength={6}
            />
          </div>

          <Button
            onClick={handleEnable}
            className="w-full bg-emerald-600 hover:bg-emerald-500"
            disabled={token.length !== 6 || loading}
          >
            {loading ? "Enabling…" : "Enable MFA"}
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}