"use client";

import Link from "next/link";
import { useCallback, useState, type ReactNode } from "react";

import type { FortuneGender } from "@/lib/fortune";
import { postTuViCompatibility, type TuViCompatibilityResultUi } from "@/lib/tuvi-compatibility-api";

function Field({
  id,
  label,
  children,
}: {
  id: string;
  label: string;
  children: ReactNode;
}) {
  return (
    <div className="space-y-1">
      <label htmlFor={id} className="block text-[12px] font-medium text-stone-400">
        {label}
      </label>
      {children}
    </div>
  );
}

function PersonBlock({
  prefix,
  title,
  name,
  setName,
  birthDate,
  setBirthDate,
  birthTime,
  setBirthTime,
  gender,
  setGender,
}: {
  prefix: string;
  title: string;
  name: string;
  setName: (v: string) => void;
  birthDate: string;
  setBirthDate: (v: string) => void;
  birthTime: string;
  setBirthTime: (v: string) => void;
  gender: FortuneGender;
  setGender: (v: FortuneGender) => void;
}) {
  return (
    <fieldset className="space-y-3 rounded-xl border border-stone-800 bg-stone-950/40 p-4">
      <legend className="px-1 text-sm font-semibold text-amber-100/90">{title}</legend>
      <Field id={`${prefix}-name`} label="Họ tên">
        <input
          id={`${prefix}-name`}
          className="w-full rounded-lg border border-stone-700 bg-stone-900/80 px-3 py-2 text-sm text-stone-100"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </Field>
      <Field id={`${prefix}-birthDate`} label="Ngày sinh (YYYY-MM-DD, dương)">
        <input
          id={`${prefix}-birthDate`}
          className="w-full rounded-lg border border-stone-700 bg-stone-900/80 px-3 py-2 text-sm text-stone-100"
          value={birthDate}
          onChange={(e) => setBirthDate(e.target.value)}
        />
      </Field>
      <Field id={`${prefix}-birthTime`} label="Giờ sinh (HH:mm)">
        <input
          id={`${prefix}-birthTime`}
          className="w-full rounded-lg border border-stone-700 bg-stone-900/80 px-3 py-2 text-sm text-stone-100"
          value={birthTime}
          onChange={(e) => setBirthTime(e.target.value)}
        />
      </Field>
      <Field id={`${prefix}-gender`} label="Giới">
        <select
          id={`${prefix}-gender`}
          className="w-full rounded-lg border border-stone-700 bg-stone-900/80 px-3 py-2 text-sm text-stone-100"
          value={gender}
          onChange={(e) => setGender(e.target.value as FortuneGender)}
        >
          <option value="male">Nam</option>
          <option value="female">Nữ</option>
          <option value="other">Khác</option>
        </select>
      </Field>
    </fieldset>
  );
}

function Section({ title, lines }: { title: string; lines: readonly string[] }) {
  return (
    <section className="mt-6">
      <h2 className="text-sm font-semibold uppercase tracking-wide text-amber-200/80">{title}</h2>
      <ul className="mt-2 list-inside list-disc space-y-1.5 text-[13px] leading-relaxed text-stone-300">
        {lines.map((x) => (
          <li key={x.slice(0, 48) + x.length}>{x}</li>
        ))}
      </ul>
    </section>
  );
}

export default function TuViCompatibilityPage() {
  const [nameA, setNameA] = useState("Nguyễn Minh An");
  const [nameB, setNameB] = useState("Trần Thu Hà");
  const [dateA, setDateA] = useState("1990-05-10");
  const [dateB, setDateB] = useState("1992-11-20");
  const [timeA, setTimeA] = useState("08:30");
  const [timeB, setTimeB] = useState("14:00");
  const [genderA, setGenderA] = useState<FortuneGender>("male");
  const [genderB, setGenderB] = useState<FortuneGender>("female");
  const [year, setYear] = useState(() => new Date().getFullYear());
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [result, setResult] = useState<TuViCompatibilityResultUi | null>(null);

  const onSubmit = useCallback(async () => {
    setErr(null);
    setBusy(true);
    try {
      const r = await postTuViCompatibility({
        personA: {
          name: nameA.trim(),
          calendarMode: "solar",
          birthDate: dateA.trim(),
          birthTime: timeA.trim(),
          gender: genderA,
        },
        personB: {
          name: nameB.trim(),
          calendarMode: "solar",
          birthDate: dateB.trim(),
          birthTime: timeB.trim(),
          gender: genderB,
        },
        viewingYearSolar: year,
      });
      setResult(r);
    } catch (e) {
      setResult(null);
      setErr(e instanceof Error ? e.message : "Không gọi được máy chủ.");
    } finally {
      setBusy(false);
    }
  }, [nameA, nameB, dateA, dateB, timeA, timeB, genderA, genderB, year]);

  return (
    <main className="mx-auto max-w-4xl flex-1 px-4 py-12 sm:px-6 sm:py-16">
      <header className="mb-8 border-b border-stone-800 pb-6">
        <p className="text-[11px] uppercase tracking-[0.2em] text-stone-500">Beta · Phase 34</p>
        <h1 className="font-ctkp-display mt-2 text-2xl font-semibold text-stone-100">Đối chiếu hai lá (tương thích)</h1>
        <p className="mt-2 text-sm leading-relaxed text-stone-500">
          Khung deterministic từ hai mốc sinh — tham khảo cấu trúc, không thay lời tư vấn chuyên môn hay cam kết cá nhân.
        </p>
        <p className="mt-3 text-sm">
          <Link href="/tu-vi" className="ctkp-text-link">
            ← Về mở lá đơn
          </Link>
        </p>
      </header>

      <div className="grid gap-6 sm:grid-cols-2">
        <PersonBlock
          prefix="a"
          title="Người A"
          name={nameA}
          setName={setNameA}
          birthDate={dateA}
          setBirthDate={setDateA}
          birthTime={timeA}
          setBirthTime={setTimeA}
          gender={genderA}
          setGender={setGenderA}
        />
        <PersonBlock
          prefix="b"
          title="Người B"
          name={nameB}
          setName={setNameB}
          birthDate={dateB}
          setBirthDate={setDateB}
          birthTime={timeB}
          setBirthTime={setTimeB}
          gender={genderB}
          setGender={setGenderB}
        />
      </div>

      <div className="mt-6 flex flex-wrap items-end gap-4">
        <Field id="vy" label="Năm quan sát (dương lịch)">
          <input
            id="vy"
            type="number"
            className="w-32 rounded-lg border border-stone-700 bg-stone-900/80 px-3 py-2 text-sm text-stone-100"
            value={year}
            onChange={(e) => setYear(Math.trunc(Number(e.target.value)))}
          />
        </Field>
        <button
          type="button"
          disabled={busy}
          onClick={() => void onSubmit()}
          className="rounded-xl border border-amber-700/50 bg-amber-950/50 px-5 py-2.5 text-sm font-medium text-amber-50/95 disabled:opacity-50"
        >
          {busy ? "Đang tính…" : "Đối chiếu"}
        </button>
      </div>

      {err ? (
        <p className="mt-6 rounded-lg border border-red-900/40 bg-red-950/20 px-3 py-2 text-sm text-red-200/90" role="alert">
          {err}
        </p>
      ) : null}

      {result ? (
        <article className="mt-10 rounded-2xl border border-stone-800 bg-stone-950/35 p-5 sm:p-7">
          <p className="text-[11px] text-stone-500">
            {result.personLabels.a} · {result.personLabels.b} · năm {result.viewingYearSolar} · pair{" "}
            <code className="text-amber-200/80">{result.archetypePairKey}</code>
          </p>
          <p className="mt-4 text-[15px] leading-relaxed text-stone-200">{result.compatibilitySummary}</p>
          <Section title="Điểm neo chung" lines={result.alignmentAreas} />
          <Section title="Ma sát có thể gặp" lines={result.frictionAreas} />
          <Section title="Giao tiếp & nhịp" lines={result.communicationPatterns} />
          <Section title="Phối hợp tài chính / việc" lines={result.financialCoordination} />
          <Section title="Áp lực thời điểm" lines={result.timingPressureAreas} />
          <Section title="Gợi ý chiến lược (mềm)" lines={result.strategicAdvice} />
        </article>
      ) : null}
    </main>
  );
}