/**
 * Shared UI for the 3 hợp-tuổi tools (kết hôn, làm ăn, duyên phận).
 * Each page is a thin wrapper around <CompatTool mode={...} />.
 */
import type { Mode } from "@/lib/compat";
import { compatReport, canChiOfYear } from "@/lib/compat";

export function CompatTool({
  searchParams,
  mode,
  title,
  hint,
}: {
  searchParams: { y1?: string; g1?: string; y2?: string; g2?: string };
  mode: Mode;
  title: string;
  hint: string;
}) {
  const y1 = parseInt(searchParams.y1 ?? "", 10);
  const y2 = parseInt(searchParams.y2 ?? "", 10);
  const g1 = (searchParams.g1 === "nu" ? "nu" : "nam") as "nam" | "nu";
  const g2 = (searchParams.g2 === "nu" ? "nu" : "nam") as "nam" | "nu";

  const valid = y1 >= 1900 && y1 <= 2100 && y2 >= 1900 && y2 <= 2100;
  const report = valid
    ? compatReport({ year: y1, gender: g1 }, { year: y2, gender: g2 }, mode)
    : null;

  const cc1 = valid ? canChiOfYear(y1) : null;
  const cc2 = valid ? canChiOfYear(y2) : null;

  return (
    <div className="bg-bg-base min-h-screen">
      <div className="mx-auto max-w-3xl px-4 py-8 lg:py-12">
        <div className="mb-8 text-center">
          <h1 className="font-display text-ink-primary text-3xl font-semibold lg:text-4xl">
            {title}
          </h1>
          <p className="text-ink-secondary mt-2 text-sm">{hint}</p>
        </div>

        <form
          method="GET"
          className="border-stroke-subtle bg-bg-elevated/40 mb-8 grid gap-4 rounded-xl border p-5 lg:grid-cols-2"
        >
          {/* Person 1 */}
          <fieldset className="border-stroke-subtle/60 rounded-lg border p-3">
            <legend className="text-brand-gold px-2 text-xs tracking-wider uppercase">
              Người thứ nhất
            </legend>
            <div className="space-y-2">
              <div>
                <label className="text-ink-muted block text-xs">Năm sinh</label>
                <input
                  type="number"
                  name="y1"
                  defaultValue={searchParams.y1 ?? ""}
                  placeholder="vd: 1992"
                  min={1900}
                  max={2100}
                  required
                  className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-1 w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
                />
              </div>
              <div>
                <label className="text-ink-muted block text-xs">Giới tính</label>
                <select
                  name="g1"
                  defaultValue={searchParams.g1 ?? "nam"}
                  className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-1 w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
                >
                  <option value="nam">Nam</option>
                  <option value="nu">Nữ</option>
                </select>
              </div>
            </div>
          </fieldset>

          {/* Person 2 */}
          <fieldset className="border-stroke-subtle/60 rounded-lg border p-3">
            <legend className="text-brand-gold px-2 text-xs tracking-wider uppercase">
              Người thứ hai
            </legend>
            <div className="space-y-2">
              <div>
                <label className="text-ink-muted block text-xs">Năm sinh</label>
                <input
                  type="number"
                  name="y2"
                  defaultValue={searchParams.y2 ?? ""}
                  placeholder="vd: 1990"
                  min={1900}
                  max={2100}
                  required
                  className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-1 w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
                />
              </div>
              <div>
                <label className="text-ink-muted block text-xs">Giới tính</label>
                <select
                  name="g2"
                  defaultValue={searchParams.g2 ?? "nu"}
                  className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-1 w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
                >
                  <option value="nam">Nam</option>
                  <option value="nu">Nữ</option>
                </select>
              </div>
            </div>
          </fieldset>

          <button
            type="submit"
            className="bg-brand-gold text-bg-base rounded-md px-4 py-2.5 text-sm font-semibold lg:col-span-2"
          >
            Phân tích hợp tuổi
          </button>
        </form>

        {report ? (
          <article className="border-stroke-subtle bg-bg-elevated/40 rounded-2xl border p-6 lg:p-8">
            <header className="border-stroke-subtle border-b pb-4">
              <div className="flex items-baseline justify-between">
                <div>
                  <div className="text-brand-gold text-xs tracking-[0.2em] uppercase">
                    Kết quả tổng hợp
                  </div>
                  <h2 className="font-display text-ink-primary mt-1 text-3xl font-semibold lg:text-4xl">
                    {report.rating}
                  </h2>
                </div>
                <div className="font-display text-brand-gold text-5xl font-bold lg:text-6xl">
                  {report.total}
                  <span className="text-ink-muted text-lg">/100</span>
                </div>
              </div>
              <div className="text-ink-muted mt-3 text-xs">
                {cc1?.stem} {cc1?.branch} ({y1}, {g1 === "nam" ? "Nam" : "Nữ"}) × {cc2?.stem}{" "}
                {cc2?.branch} ({y2}, {g2 === "nam" ? "Nam" : "Nữ"})
              </div>
            </header>

            <p className="text-ink-secondary mt-4 text-base leading-relaxed">{report.hint}</p>

            <div className="mt-6 space-y-3">
              {report.factors.map((f) => (
                <div
                  key={f.label}
                  className="border-stroke-subtle/60 bg-bg-inset rounded-lg border p-4"
                >
                  <div className="flex items-center justify-between">
                    <h3 className="text-ink-primary text-sm font-medium">{f.label}</h3>
                    <span className="text-brand-gold font-mono text-sm">
                      {f.score}/{f.max}
                    </span>
                  </div>
                  <div className="bg-bg-overlay/50 mt-2 h-1.5 w-full overflow-hidden rounded-full">
                    <div
                      className="bg-brand-gold h-full"
                      style={{ width: `${(f.score / f.max) * 100}%` }}
                    />
                  </div>
                  <p className="text-ink-secondary mt-2 text-xs leading-relaxed">{f.reason}</p>
                </div>
              ))}
            </div>
          </article>
        ) : null}
      </div>
    </div>
  );
}