"use client";

import { useState } from "react";
import { Copy, Check, KeyRound, TriangleAlert } from "lucide-react";
import { Button } from "@/components/ui";
import { cn } from "@/lib/utils";

const NOTICE = "Save this recovery code. Spinza does not collect your email address. If you lose your password and recovery code, your account cannot be recovered.";

/** Prominent recovery-code display with copy button and a save-confirmation gate. */
export function RecoveryCodePanel({ code, title = "Your recovery code", notice = NOTICE, continueLabel = "Continue", onContinue, loading, className, hideHeader }: { code: string; title?: string; notice?: string; continueLabel?: string; onContinue: () => void; loading?: boolean; className?: string; hideHeader?: boolean }) {
  const [copied, setCopied] = useState(false);
  const [saved, setSaved] = useState(false);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch {
      // Clipboard unavailable (insecure context): user can still select the code.
    }
  };

  return (
    <div className={cn("space-y-5", className)}>
      {hideHeader ? null : (
        <div className="flex items-center gap-3">
          <span className="grid h-11 w-11 shrink-0 place-items-center rounded-md bg-accent text-bg">
            <KeyRound className="h-5 w-5" />
          </span>
          <div>
            <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
            <p className="text-[13px] text-fg-3">This code is the only way to reset your password.</p>
          </div>
        </div>
      )}

      <div className="metal rounded-lg p-4">
        <div className="eyebrow mb-2">Recovery code</div>
        <div className="flex items-center justify-between gap-3">
          <code className="min-w-0 select-all whitespace-nowrap font-mono text-[17px] font-semibold tracking-[0.03em] text-accent-2 sm:text-2xl sm:tracking-[0.06em]" aria-label={`Recovery code ${code}`}>
            {code}
          </code>
          <Button type="button" variant="secondary" size="icon" onClick={copy} aria-label="Copy recovery code" className="shrink-0">
            {copied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
          </Button>
        </div>
      </div>

      <div className="flex gap-3 rounded-md border border-accent/30 bg-accent-soft p-4 text-[13px] leading-relaxed text-fg-2" role="note">
        <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0 text-accent" />
        <p>{notice}</p>
      </div>

      <label className="flex cursor-pointer items-start gap-3 rounded-md border border-line p-3.5 tap hover:bg-surface">
        <input type="checkbox" checked={saved} onChange={(e) => setSaved(e.target.checked)} className="mt-0.5 h-5 w-5 shrink-0 accent-[#c9a961]" />
        <span className="text-[15px] font-medium">I saved my recovery code</span>
      </label>

      <Button size="lg" variant="accent" className="w-full" disabled={!saved} loading={loading} onClick={onContinue}>
        {continueLabel}
      </Button>
    </div>
  );
}