import Link from "next/link";
import { ArrowRight, CalendarCheck2, Sparkles } from "lucide-react";

const PALACES_TOP = ["Tỵ", "Ngọ", "Mùi", "Thân"] as const;
const PALACES_BOT = ["Dần", "Sửu", "Tý", "Hợi"] as const;
const PALACE_LABELS: Record<string, string> = {
  Tỵ: "Phụ Mẫu",
  Ngọ: "Phúc Đức",
  Mùi: "Điền Trạch",
  Thân: "Quan Lộc",
  Thìn: "Mệnh",
  Dậu: "Nô Bộc",
  Mão: "Huynh Đệ",
  Tuất: "Thiên Di",
  Dần: "Phu Thê",
  Sửu: "Tử Tức",
  Tý: "Tài Bạch",
  Hợi: "Tật Ách",
};

function PalaceCell({ chi, label }: { chi: string; label: string }) {
  return (
    <div className="palace-cell flex flex-col rounded p-2 text-[9px]">
      <span className="text-brand-gold">{chi}</span>
      <span className="text-ink-muted mt-auto text-[8px]">{label}</span>
    </div>
  );
}

function HeroChartPreview() {
  return (
    <div className="relative hidden lg:block">
      <div className="relative mx-auto aspect-square max-w-[500px]">
        <div className="border-brand-gold/20 animate-float-slow absolute inset-0 rounded-full border" />
        <div className="border-brand-gold/15 absolute inset-8 rounded-full border" />

        <div className="bg-bg-elevated/40 border-stroke-subtle absolute inset-16 grid grid-cols-4 grid-rows-4 gap-1 rounded-lg border p-2 backdrop-blur-sm">
          {PALACES_TOP.map((c) => (
            <PalaceCell key={c} chi={c} label={PALACE_LABELS[c]} />
          ))}

          <div className="palace-cell flex flex-col rounded p-2 text-[9px]">
            <span className="text-brand-gold">Thìn</span>
            <span className="text-ink-muted mt-auto text-[8px]">Mệnh</span>
            <span className="text-brand-cream text-[8px]">Tử Vi · Thiên Phủ</span>
          </div>
          <div className="palace-cell bg-bg-overlay/80 border-brand-gold/30 col-span-2 row-span-2 flex flex-col items-center justify-center rounded p-3 text-center">
            <div className="text-ink-muted text-[9px] tracking-[0.15em] uppercase">Mệnh Chủ</div>
            <div className="font-display text-brand-gold mt-1 text-2xl">Canh Thân</div>
            <div className="text-ink-secondary mt-1 text-xs">Thạch Lựu Mộc</div>
            <div className="font-numeral text-ink-primary mt-2 text-3xl">15·03·1990</div>
            <div className="text-ink-muted mt-1 text-[10px]">Giờ Tý · Âm lịch</div>
          </div>
          <PalaceCell chi="Dậu" label={PALACE_LABELS["Dậu"]} />

          <PalaceCell chi="Mão" label={PALACE_LABELS["Mão"]} />
          <PalaceCell chi="Tuất" label={PALACE_LABELS["Tuất"]} />

          {PALACES_BOT.map((c) => (
            <PalaceCell key={c} chi={c} label={PALACE_LABELS[c]} />
          ))}
        </div>

        <div className="bg-brand-gold animate-pulse-soft absolute top-4 left-4 h-2 w-2 rounded-full" />
        <div className="bg-brand-red absolute top-12 right-8 h-1.5 w-1.5 rounded-full" />
        <div className="bg-brand-gold-soft absolute bottom-16 left-12 h-1 w-1 rounded-full" />
        <div className="bg-brand-gold animate-pulse-soft absolute right-16 bottom-8 h-2 w-2 rounded-full" />
      </div>
    </div>
  );
}

/**
 * Static GET form on the home page. Action redirects to /tu-vi-tron-doi
 * which renders the result. We use native form submission (no client JS)
 * so the home page stays a server component.
 */
function HeroForm() {
  return (
    <div className="border-gold-glow bg-bg-elevated/60 rounded-2xl p-5 backdrop-blur-sm lg:p-7">
      <div className="mb-5 flex items-center justify-between">
        <h2 className="font-display text-lg font-semibold lg:text-xl">
          Nhập thông tin để xem lá số
        </h2>
        <span className="text-ink-muted hidden text-xs sm:block">~ 30 giây</span>
      </div>

      <form action="/tu-vi-tron-doi" method="GET" className="space-y-4">
        <div>
          <label htmlFor="hero-name" className="text-ink-secondary mb-1.5 block text-sm">
            Họ và tên (không bắt buộc)
          </label>
          <input
            id="hero-name"
            name="n"
            type="text"
            placeholder="Nguyễn Văn A"
            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 focus:ring-2 focus:outline-none"
          />
        </div>

        <div>
          <label htmlFor="hero-date" className="text-ink-secondary mb-1.5 block text-sm">
            Ngày sinh
          </label>
          <input
            id="hero-date"
            name="d"
            type="text"
            placeholder="1990-3-15"
            defaultValue=""
            pattern="\d{4}-\d{1,2}-\d{1,2}"
            required
            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 focus:ring-2 focus:outline-none"
          />
          <p className="text-ink-muted mt-1 text-xs">Định dạng YYYY-M-D (ví dụ 1990-3-15)</p>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label htmlFor="hero-gender" className="text-ink-secondary mb-1.5 block text-sm">
              Giới tính
            </label>
            <select
              id="hero-gender"
              name="g"
              defaultValue="Nam"
              className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold w-full rounded-md border px-3 py-2.5 text-sm focus:outline-none"
            >
              <option value="Nam">Nam</option>
              <option value="Nữ">Nữ</option>
            </select>
          </div>
          <div>
            <label htmlFor="hero-cal" className="text-ink-secondary mb-1.5 block text-sm">
              Loại lịch
            </label>
            <select
              id="hero-cal"
              name="c"
              defaultValue="solar"
              className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold w-full rounded-md border px-3 py-2.5 text-sm focus:outline-none"
            >
              <option value="solar">Dương lịch</option>
              <option value="lunar">Âm lịch</option>
            </select>
          </div>
        </div>

        <div>
          <label htmlFor="hero-time" className="text-ink-secondary mb-1.5 block text-sm">
            Giờ sinh
          </label>
          <select
            id="hero-time"
            name="t"
            defaultValue="0"
            className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold w-full rounded-md border px-3 py-2.5 text-sm focus:outline-none"
          >
            <option value="0">Tý sớm (23:00–00:59)</option>
            <option value="1">Sửu (01:00–02:59)</option>
            <option value="2">Dần (03:00–04:59)</option>
            <option value="3">Mão (05:00–06:59)</option>
            <option value="4">Thìn (07:00–08:59)</option>
            <option value="5">Tỵ (09:00–10:59)</option>
            <option value="6">Ngọ (11:00–12:59)</option>
            <option value="7">Mùi (13:00–14:59)</option>
            <option value="8">Thân (15:00–16:59)</option>
            <option value="9">Dậu (17:00–18:59)</option>
            <option value="10">Tuất (19:00–20:59)</option>
            <option value="11">Hợi (21:00–22:59)</option>
            <option value="12">Tý muộn (23:00–23:59)</option>
          </select>
        </div>

        <button
          type="submit"
          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 hover:brightness-105 active:translate-y-px"
        >
          Xem lá số tử vi
          <ArrowRight className="h-4 w-4" aria-hidden="true" />
        </button>
      </form>
    </div>
  );
}

export function HeroSection() {
  return (
    <section className="bagua-decor relative overflow-hidden">
      <div className="pointer-events-none absolute top-[-100px] right-[-200px] hidden h-[600px] w-[600px] opacity-[0.06] lg:block">
        <svg viewBox="0 0 200 200" fill="none" stroke="#D4AF37" strokeWidth={0.5}>
          <circle cx="100" cy="100" r="95" />
          <circle cx="100" cy="100" r="70" />
          <circle cx="100" cy="100" r="45" />
          <g strokeWidth={0.3}>
            <line x1="100" y1="5" x2="100" y2="195" />
            <line x1="5" y1="100" x2="195" y2="100" />
            <line x1="32" y1="32" x2="168" y2="168" />
            <line x1="168" y1="32" x2="32" y2="168" />
          </g>
          <g fontFamily="serif" fontSize={6} fill="#D4AF37">
            <text x="98" y="22">
              ☰
            </text>
            <text x="98" y="186">
              ☷
            </text>
            <text x="14" y="103">
              ☵
            </text>
            <text x="180" y="103">
              ☲
            </text>
          </g>
        </svg>
      </div>

      <div className="max-w-container relative mx-auto px-4 pt-12 pb-16 lg:px-6 lg:pt-20 lg:pb-24">
        <div className="grid items-center gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:gap-16">
          <div>
            <div className="border-brand-gold/30 bg-brand-gold/[0.04] mb-6 inline-flex items-center gap-2 rounded-full border px-3 py-1">
              <span className="bg-brand-gold animate-pulse-soft h-1.5 w-1.5 rounded-full" />
              <span className="text-brand-gold-soft text-xs tracking-[0.18em] uppercase">
                Cổ Học · Miễn Phí
              </span>
            </div>

            <h1 className="font-display text-ink-primary mb-5 text-[40px] leading-[1.05] font-semibold sm:text-5xl lg:text-[64px] lg:leading-[1.04]">
              Khám phá <span className="text-gold-sheen inline-block pb-1 italic">vận mệnh</span>
              <br />
              của bạn
            </h1>

            <p className="text-ink-secondary mb-8 max-w-[52ch] text-base leading-relaxed lg:text-lg">
              Lá số tử vi 12 cung, vận mệnh &ldquo;Thầy&rdquo; luận giải, ngày tốt và phong thủy —
              dựa trên Tử vi Đẩu số cổ học và Đông phương mệnh lý.
            </p>

            <HeroForm />

            <div className="mt-4 grid grid-cols-2 gap-3">
              <Link
                href="/van-menh"
                className="border-stroke-default text-ink-secondary hover:border-brand-gold/40 hover:text-brand-gold flex items-center justify-center gap-2 rounded-md border px-4 py-3 text-sm"
              >
                <Sparkles className="h-4 w-4" aria-hidden="true" />
                Hỏi &ldquo;Thầy&rdquo; luận giải
              </Link>
              <Link
                href="/xem-ngay-tot"
                className="border-stroke-default text-ink-secondary hover:border-brand-gold/40 hover:text-brand-gold flex items-center justify-center gap-2 rounded-md border px-4 py-3 text-sm"
              >
                <CalendarCheck2 className="h-4 w-4" aria-hidden="true" />
                Xem ngày tốt
              </Link>
            </div>
          </div>

          <HeroChartPreview />
        </div>
      </div>
    </section>
  );
}