"use client";

import { useRef, useState } from "react";
import type { LookupResponse } from "@/lib/types";
import { TRADES } from "@/lib/constants";
import ResultCard from "./ResultCard";

type FormState = {
  regNo: string;
  dob: string;
  trade: string;
};

const EMPTY: FormState = { regNo: "", dob: "", trade: "" };

function maskDob(value: string): string {
  const digits = value.replace(/\D/g, "").slice(0, 8);
  if (digits.length <= 2) return digits;
  if (digits.length <= 4) return `${digits.slice(0, 2)}-${digits.slice(2)}`;
  return `${digits.slice(0, 2)}-${digits.slice(2, 4)}-${digits.slice(4)}`;
}

export default function ResultSearch() {
  const [form, setForm] = useState<FormState>(EMPTY);
  const [error, setError] = useState<string | null>(null);
  const [tamilError, setTamilError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<Extract<LookupResponse, { ok: true }> | null>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const update = (patch: Partial<FormState>) => {
    setForm((f) => ({ ...f, ...patch }));
    setError(null);
    setTamilError(null);
  };

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setTamilError(null);
    setLoading(true);
    try {
      const res = await fetch("/api/results", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          regNo: form.regNo,
          dob: form.dob,
          trade: form.trade || undefined,
        }),
      });
      const json = (await res.json()) as LookupResponse;
      if (!json.ok) {
        setResult(null);
        setError(json.error);
        setTamilError(json.tamil ?? null);
        return;
      }
      setResult(json);
      requestAnimationFrame(() => {
        resultRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
      });
    } catch {
      setResult(null);
      setError("Network error. Please check your internet connection and try again.");
      setTamilError("இணைப்பு துண்டிக்கப்பட்டது. மீண்டும் முயலவும்.");
    } finally {
      setLoading(false);
    }
  }

  function handlePrint() {
    document.body.classList.add("printing");
    const done = () => {
      document.body.classList.remove("printing");
      window.removeEventListener("afterprint", done);
    };
    window.addEventListener("afterprint", done);
    window.print();
  }

  function handleClear() {
    setForm(EMPTY);
    setError(null);
    setTamilError(null);
  }

  function handleAnother() {
    setResult(null);
    setForm(EMPTY);
    setError(null);
    setTamilError(null);
    document.getElementById("check-result")?.scrollIntoView({ behavior: "smooth" });
  }

  return (
    <div>
      {/* Search Form Card */}
      <div id="check-result" className="no-print scroll-mt-24">
        <div className="mx-auto max-w-3xl">
          <div className="card-shadow relative rounded-md border-2 border-maroon-900 bg-cream p-1">
            {/* Corner Tag */}
            <div className="absolute -top-3.5 left-6 rounded-xs bg-gold-500 px-4 py-1 text-[10px] font-bold uppercase tracking-[0.25em] text-maroon-950 shadow-xs">
              Official Result Portal · ஜூலை 2026
            </div>

            <div className="rounded-sm border border-gold-600/60 bg-cream/90 p-6 md:p-9">
              <div className="flex items-center gap-4">
                <span className="hidden h-9 w-9 rotate-45 border border-gold-600 md:block" />
                <div>
                  <p className="text-[10px] font-bold uppercase tracking-[0.38em] text-maroon-800">
                    Department of Employment and Training
                  </p>
                  <h2 className="font-display text-2xl font-bold text-maroon-950 md:text-3xl">
                    Industrial School Result Enquiry
                  </h2>
                  <p className="font-tamil text-xs text-ink/60">
                    தேர்வு முடிவுகள் அறிய உங்கள் விவரங்களை உள்ளிடவும்
                  </p>
                </div>
                <span className="hidden h-9 w-9 rotate-45 border border-gold-600 md:block" />
              </div>

              <form onSubmit={handleSubmit} className="mt-7 grid gap-5">
                {/* 1. Registration Number */}
                <div>
                  <label htmlFor="regNo" className="flex items-baseline gap-2.5">
                    <span className="font-display text-xs font-bold text-gold-700">01.</span>
                    <span className="text-[11px] font-bold uppercase tracking-[0.2em] text-ink/80">
                      Registration Number
                    </span>
                    <span className="font-tamil text-xs text-ink/50">பதிவு எண்</span>
                  </label>
                  <input
                    id="regNo"
                    value={form.regNo}
                    onChange={(e) => update({ regNo: e.target.value.toUpperCase() })}
                    placeholder="e.g. SMT/2026/CT/0101 or SMT/2026/TTC/0101"
                    autoComplete="off"
                    required
                    className="mt-1.5 w-full rounded-sm border border-ink/25 bg-white px-4 py-3 font-mono text-sm tracking-wider text-ink outline-none transition-all placeholder:font-sans placeholder:text-xs placeholder:tracking-normal placeholder:text-ink/35 focus:border-maroon-800 focus:ring-2 focus:ring-maroon-800/20"
                  />
                </div>

                {/* 2. Date of Birth */}
                <div>
                  <label htmlFor="dob" className="flex items-baseline gap-2.5">
                    <span className="font-display text-xs font-bold text-gold-700">02.</span>
                    <span className="text-[11px] font-bold uppercase tracking-[0.2em] text-ink/80">
                      Date of Birth (DD-MM-YYYY)
                    </span>
                    <span className="font-tamil text-xs text-ink/50">பிறந்த தேதி</span>
                  </label>
                  <input
                    id="dob"
                    value={form.dob}
                    onChange={(e) => update({ dob: maskDob(e.target.value) })}
                    placeholder="DD-MM-YYYY (e.g. 15-05-2004)"
                    inputMode="numeric"
                    autoComplete="off"
                    required
                    className="mt-1.5 w-full rounded-sm border border-ink/25 bg-white px-4 py-3 font-mono text-sm tracking-widest text-ink outline-none transition-all placeholder:font-sans placeholder:text-xs placeholder:tracking-normal placeholder:text-ink/35 focus:border-maroon-800 focus:ring-2 focus:ring-maroon-800/20"
                  />
                </div>

                {/* 3. Trade / Course */}
                <div>
                  <label htmlFor="trade" className="flex items-baseline gap-2.5">
                    <span className="font-display text-xs font-bold text-gold-700">03.</span>
                    <span className="text-[11px] font-bold uppercase tracking-[0.2em] text-ink/80">
                      Select Trade / Course <span className="font-normal normal-case text-ink/45">(optional)</span>
                    </span>
                    <span className="font-tamil text-xs text-ink/50">தொழிற்பிரிவு</span>
                  </label>
                  <div className="relative mt-1.5">
                    <select
                      id="trade"
                      value={form.trade}
                      onChange={(e) => update({ trade: e.target.value })}
                      className="w-full appearance-none rounded-sm border border-ink/25 bg-white px-4 py-3 text-sm text-ink outline-none transition-all focus:border-maroon-800 focus:ring-2 focus:ring-maroon-800/20"
                    >
                      <option value="">— All Trades / அனைத்து தொழிற்பிரிவுகளும் —</option>
                      {TRADES.map((t) => (
                        <option key={t.code} value={t.code}>
                          {t.name} ({t.code}) — {t.tamil}
                        </option>
                      ))}
                    </select>
                    <svg
                      viewBox="0 0 24 24"
                      className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-maroon-900"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                    >
                      <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                </div>

                {/* Error Banner */}
                {error && (
                  <div className="animate-pop-in flex items-start gap-3 rounded-sm border border-maroon-800/50 bg-maroon-50 px-4 py-3">
                    <svg
                      viewBox="0 0 24 24"
                      className="mt-0.5 h-5 w-5 shrink-0 text-maroon-800"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                    >
                      <circle cx="12" cy="12" r="9" />
                      <path d="M12 8v5M12 16.5v.01" strokeLinecap="round" />
                    </svg>
                    <div>
                      <p className="text-sm font-bold text-maroon-950">{error}</p>
                      {tamilError && (
                        <p className="font-tamil mt-1 text-xs text-maroon-900/80">{tamilError}</p>
                      )}
                    </div>
                  </div>
                )}

                {/* Actions */}
                <div className="flex flex-wrap items-center gap-3 pt-2">
                  <button
                    type="submit"
                    disabled={loading}
                    className="group relative overflow-hidden rounded-md bg-maroon-900 px-9 py-3.5 text-sm font-bold uppercase tracking-[0.2em] text-cream shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:bg-maroon-800 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60"
                  >
                    <span className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-gold-300/40 to-transparent transition-transform duration-700 group-hover:translate-x-full" />
                    {loading ? (
                      <span className="flex items-center gap-2.5">
                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-cream/40 border-t-cream" />
                        Fetching Result…
                      </span>
                    ) : (
                      "View Result"
                    )}
                  </button>

                  <button
                    type="button"
                    onClick={handleClear}
                    className="rounded-md border border-ink/25 px-6 py-3.5 text-sm font-semibold uppercase tracking-[0.18em] text-ink/70 transition-colors hover:border-ink/50 hover:text-ink"
                  >
                    Clear
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      {/* Result Display Area */}
      {result && result.ok && (
        <div ref={resultRef} className="print-area mx-auto mt-12 max-w-4xl scroll-mt-24">
          <ResultCard
            data={result.data}
            onPrint={handlePrint}
            onSubmitAnother={handleAnother}
          />
        </div>
      )}
    </div>
  );
}