import Container from "@/components/ui/Container";
import Reveal from "@/components/ui/Reveal";
import {
  CheckCircle2,
  FileText,
  Plane,
  Receipt,
  AlertTriangle,
  GraduationCap,
  FileCheck2,
} from "lucide-react";

type Tone = "ready" | "gather" | "attorney";

const ITEMS: {
  icon: React.ReactNode;
  label: string;
  detail: string;
  status: string;
  tone: Tone;
}[] = [
  {
    icon: <CheckCircle2 className="h-5 w-5" />,
    label: "Eligibility window",
    detail: "Based on your green card date and path",
    status: "On track",
    tone: "ready",
  },
  {
    icon: <FileText className="h-5 w-5" />,
    label: "Documents to organize",
    detail: "Green card copy, marriage certificate, tax records",
    status: "3 to gather",
    tone: "gather",
  },
  {
    icon: <Plane className="h-5 w-5" />,
    label: "Travel days outside U.S.",
    detail: "We counted your trips — one long trip to review",
    status: "Review long trips",
    tone: "gather",
  },
  {
    icon: <Receipt className="h-5 w-5" />,
    label: "Tax records",
    detail: "Gather transcripts for each required year",
    status: "Gather documents",
    tone: "gather",
  },
  {
    icon: <AlertTriangle className="h-5 w-5" />,
    label: "Background topics",
    detail: "You mentioned a past citation",
    status: "Talk to an attorney",
    tone: "attorney",
  },
  {
    icon: <GraduationCap className="h-5 w-5" />,
    label: "Civics & interview prep",
    detail: "12 of 100 questions practiced so far",
    status: "Beginner",
    tone: "gather",
  },
];

const pillClass: Record<Tone, string> = {
  ready: "pill-ready",
  gather: "pill-gather",
  attorney: "pill-attorney",
};

const dotClass: Record<Tone, string> = {
  ready: "bg-emerald",
  gather: "bg-gold",
  attorney: "bg-danger",
};

export default function ReadinessReport() {
  return (
    <section className="bg-mist py-20 md:py-28">
      <Container>
        <div className="grid items-start gap-12 lg:grid-cols-[0.85fr_1.15fr] lg:gap-14">
          {/* Intro */}
          <Reveal className="lg:sticky lg:top-28">
            <span className="eyebrow">
              <FileCheck2 className="h-3.5 w-3.5" />
              Your readiness report
            </span>
            <h2 className="mt-5 text-balance text-3xl font-600 text-navy sm:text-4xl">
              Know exactly where you stand — before you spend a dollar on
              filing.
            </h2>
            <p className="mt-4 text-lg leading-relaxed text-navy/60">
              Your snapshot turns a pile of questions into a simple, color-coded
              summary. Green means on track. Gold means gather something. Red
              means talk to a licensed attorney first.
            </p>

            {/* legend */}
            <div className="mt-7 space-y-3">
              {(
                [
                  ["ready", "On track (general)", "Looks good based on your answers"],
                  ["gather", "Gather documents", "Something to collect or finish"],
                  ["attorney", "Talk to an attorney", "A topic that needs legal review"],
                ] as [Tone, string, string][]
              ).map(([tone, title, desc]) => (
                <div key={tone} className="flex items-center gap-3">
                  <span className={`h-2.5 w-2.5 rounded-full ${dotClass[tone]}`} />
                  <span className="text-sm font-semibold text-navy">{title}</span>
                  <span className="text-sm text-navy/50">— {desc}</span>
                </div>
              ))}
            </div>
          </Reveal>

          {/* Report card */}
          <Reveal delay={120}>
            <div className="card overflow-hidden">
              <div className="flex items-center justify-between border-b border-navy/5 bg-white px-6 py-5">
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-wider text-navy/45">
                    Citizenship readiness snapshot
                  </p>
                  <p className="mt-0.5 font-display text-lg font-600 text-navy">
                    Sample report
                  </p>
                </div>
                <div className="flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1.5">
                  <span className="font-display text-base font-700 text-emerald-700">
                    78%
                  </span>
                  <span className="text-xs font-semibold text-emerald-700">
                    ready
                  </span>
                </div>
              </div>

              <ul className="divide-y divide-navy/5">
                {ITEMS.map((it) => (
                  <li
                    key={it.label}
                    className="flex items-center justify-between gap-4 px-6 py-4 transition-colors hover:bg-mist/40"
                  >
                    <div className="flex items-center gap-3.5">
                      <span
                        className={`grid h-10 w-10 shrink-0 place-items-center rounded-xl ${
                          it.tone === "ready"
                            ? "bg-emerald-50 text-emerald-700"
                            : it.tone === "gather"
                            ? "bg-gold-50 text-gold-700"
                            : "bg-danger-50 text-danger-700"
                        }`}
                      >
                        {it.icon}
                      </span>
                      <div>
                        <p className="font-600 text-navy">{it.label}</p>
                        <p className="text-sm text-navy/50">{it.detail}</p>
                      </div>
                    </div>
                    <span className={`pill shrink-0 ${pillClass[it.tone]}`}>
                      {it.status}
                    </span>
                  </li>
                ))}
              </ul>

              <div className="border-t border-navy/5 bg-mist/50 px-6 py-4">
                <p className="text-xs leading-relaxed text-navy/50">
                  This snapshot is a general self-help summary based on your own
                  answers. It is not legal advice and not a decision about your
                  case. USCIS makes all final decisions.
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}