"use client";

import { useState, useTransition, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { ArrowRight, Compass } from "lucide-react";
import { cn } from "@/lib/utils";

const CURRENT_YEAR = new Date().getFullYear();

type Form = {
  year: string;
  gender: "Nam" | "Nữ";
};

const initialForm: Form = {
  year: "1990",
  gender: "Nam",
};

export function PhongThuyForm() {
  const router = useRouter();
  const [form, setForm] = useState<Form>(initialForm);
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);

    const year = parseInt(form.year, 10);
    if (Number.isNaN(year) || year < 1900 || year > CURRENT_YEAR + 1) {
      setError("Năm sinh không hợp lệ (1900 — hiện tại).");
      return;
    }

    const params = new URLSearchParams({
      y: String(year),
      g: form.gender,
    });

    startTransition(() => {
      router.push(`/phong-thuy-nha?${params.toString()}`);
    });
  }

  return (
    <form
      onSubmit={handleSubmit}
      className="border-gold-glow bg-bg-elevated/60 mx-auto max-w-md rounded-2xl p-6 backdrop-blur-sm lg:p-8"
      noValidate
    >
      <div className="mb-6 flex items-center justify-between">
        <h2 className="font-display text-xl font-semibold">Năm sinh & giới tính</h2>
        <span className="text-ink-muted hidden text-xs sm:block">~ 5 giây</span>
      </div>

      <div className="space-y-5">
        <div>
          <label htmlFor="year" className="text-ink-secondary mb-1.5 block text-sm">
            Năm sinh (dương lịch)
          </label>
          <input
            id="year"
            inputMode="numeric"
            maxLength={4}
            value={form.year}
            onChange={(e) => setForm((f) => ({ ...f, year: e.target.value.replace(/\D/g, "") }))}
            placeholder="YYYY"
            className="bg-bg-inset border-stroke-default text-ink-primary placeholder:text-ink-muted/60 focus:border-brand-gold focus:ring-brand-gold/20 w-full rounded-md border px-4 py-2.5 text-center text-lg focus:ring-2 focus:outline-none"
          />
        </div>

        <fieldset>
          <legend className="text-ink-secondary mb-1.5 text-sm">Giới tính</legend>
          <div className="grid grid-cols-2 gap-2">
            <button
              type="button"
              onClick={() => setForm((f) => ({ ...f, gender: "Nam" }))}
              className={cn(
                "rounded-md border px-3 py-2.5 text-sm font-medium transition",
                form.gender === "Nam"
                  ? "border-brand-gold bg-brand-gold/10 text-brand-gold"
                  : "border-stroke-default bg-bg-inset text-ink-secondary hover:border-brand-gold/40"
              )}
            >
              Nam
            </button>
            <button
              type="button"
              onClick={() => setForm((f) => ({ ...f, gender: "Nữ" }))}
              className={cn(
                "rounded-md border px-3 py-2.5 text-sm font-medium transition",
                form.gender === "Nữ"
                  ? "border-brand-gold bg-brand-gold/10 text-brand-gold"
                  : "border-stroke-default bg-bg-inset text-ink-secondary hover:border-brand-gold/40"
              )}
            >
              Nữ
            </button>
          </div>
        </fieldset>

        {error ? (
          <div className="border-brand-red/40 bg-brand-red/10 text-brand-red-light rounded-md border px-4 py-3 text-sm">
            {error}
          </div>
        ) : null}

        <button
          type="submit"
          disabled={isPending}
          className="from-brand-gold via-brand-gold-soft to-brand-gold text-bg-base mt-2 flex w-full items-center justify-center gap-2 rounded-md bg-gradient-to-r py-3.5 font-semibold transition hover:brightness-105 active:translate-y-px disabled:opacity-60"
        >
          <Compass className="h-4 w-4" aria-hidden="true" />
          {isPending ? "Đang tính..." : "Xem cung mệnh & hướng"}
          <ArrowRight className="h-4 w-4" aria-hidden="true" />
        </button>
      </div>
    </form>
  );
}