import { CheckCircle2, XCircle, AlertTriangle, Send, Loader2, ShieldCheck } from "lucide-react";

export default function VerifyPanel({ verification, onSend, sending }) {
  if (!verification) return null;

  return (
    <div className={`rounded-xl border p-3.5 ${verification.valid ? "bg-emerald-500/5 border-emerald-500/20" : "bg-red-500/5 border-red-500/20"
      }`}>
      <div className="flex items-center gap-2 mb-3">
        {verification.valid
          ? <ShieldCheck size={14} className="text-emerald-600 dark:text-emerald-400" />
          : <AlertTriangle size={14} className="text-red-500 dark:text-red-400" />}
        <h3 className={`text-xs font-bold uppercase tracking-wider ${verification.valid ? "text-emerald-700 dark:text-emerald-300" : "text-red-600 dark:text-red-400"}`}>
          {verification.valid ? "Ready to Send" : "Issues Found"}
        </h3>
      </div>

      <div className="space-y-2 mb-3">
        <VerifyItem ok={!verification.errors?.some((e) => e.includes("email"))} label="Email address valid" />
        <VerifyItem ok={!verification.errors?.some((e) => e.includes("Subject"))} label="Subject line present" />
        <VerifyItem ok={!verification.errors?.some((e) => e.includes("body"))} label="Email body present" />
        <VerifyItem ok={verification.attachment_count >= 2} label={`${verification.attachment_count} attachment${verification.attachment_count !== 1 ? "s" : ""} (${(verification.attachments || []).join(", ")})`} />
        {verification.already_sent && (
          <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 text-[11px] mt-1">
            <AlertTriangle size={12} />
            <span>Already contacted this recipient</span>
          </div>
        )}
      </div>

      {verification.valid && (
        <button onClick={onSend} disabled={sending}
          className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 disabled:opacity-50 text-white font-semibold text-xs py-3 rounded-xl transition-all shadow-lg shadow-emerald-500/20">
          {sending ? <><Loader2 size={13} className="animate-spin" /> Sending...</> : <><Send size={13} /> Send Email</>}
        </button>
      )}

      {!verification.valid && (
        <div className="bg-red-500/5 rounded-lg p-3 border border-red-500/10">
          <p className="text-[10px] text-red-600 dark:text-red-400 font-semibold mb-1">Resolve before sending:</p>
          {verification.errors.map((err, i) => (
            <p key={i} className="text-[10px] text-red-500/70 dark:text-red-400/70 mt-0.5">&bull; {err}</p>
          ))}
        </div>
      )}
    </div>
  );
}

function VerifyItem({ ok, label }) {
  return (
    <div className="flex items-center gap-2 text-[11px]">
      {ok ? <CheckCircle2 size={12} className="text-emerald-600 dark:text-emerald-400 shrink-0" />
        : <XCircle size={12} className="text-red-500 dark:text-red-400 shrink-0" />}
      <span className={ok ? "text-[var(--c-text-secondary)] font-medium" : "text-red-500 dark:text-red-400 font-medium"}>{label}</span>
    </div>
  );
}