"use client";

import type { FormEvent } from "react";
import Link from "next/link";
import { useMemo, useState } from "react";

import { buildIchingSession, parseNumberPair } from "@/features/iching/engine";
import { IchingHexCard } from "@/features/iching/IchingHexCard";
import type { IchingSessionPayload, QuestionCategory } from "@/features/iching/types";
import { isBetaPublicSurfaceEnabled } from "@/lib/betaVisibility";

function toDatetimeLocalValue(d: Date): string {
  const pad = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

function parseDatetimeLocal(s: string): string | null {
  const t = Date.parse(s);
  if (!Number.isFinite(t)) return null;
  return new Date(t).toISOString();
}

const CATEGORY_OPTIONS: { value: QuestionCategory; label: string }[] = [
  { value: "career", label: "Công việc" },
  { value: "finance", label: "Tiền bạc" },
  { value: "relationship", label: "Tình cảm" },
  { value: "health", label: "Sức khỏe" },
  { value: "travel", label: "Đi xa / gặp gỡ" },
  { value: "decision", label: "Quyết định nên hay không" },
  { value: "other", label: "Khác" },
];

const prose = "font-ctkp-serif text-[1.02rem] sm:text-[1.0625rem] leading-[1.82] text-[color:var(--tuvi-chart-ink)]/92 tracking-[0.01em]";

const inset =
  "rounded-sm border border-[color:var(--tuvi-chart-border-soft)] bg-[color:var(--tuvi-chart-paper-raised)]/55 px-5 py-6 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.28)] sm:px-7 sm:py-7";

const insetLabel = "font-ctkp-display text-[0.65rem] font-normal uppercase tracking-[0.16em] text-[color:var(--tuvi-chart-ink-muted)] sm:text-[11px]";

export function GieoQueXyClient() {
  const betaPublicSurface = isBetaPublicSurfaceEnabled();
  const [question, setQuestion] = useState("");
  const [pairInput, setPairInput] = useState("");
  const [category, setCategory] = useState<QuestionCategory>("other");
  const [momentLocal, setMomentLocal] = useState(() => toDatetimeLocalValue(new Date()));
  const [error, setError] = useState<string | null>(null);
  const [session, setSession] = useState<IchingSessionPayload | null>(null);

  const momentIso = useMemo(() => parseDatetimeLocal(momentLocal), [momentLocal]);

  function resetAll() {
    setSession(null);
    setError(null);
    setQuestion("");
    setPairInput("");
    setCategory("other");
    setMomentLocal(toDatetimeLocalValue(new Date()));
  }

  function onSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    const q = question.trim();
    if (!q) {
      setError("Xin ghi câu hỏi / việc muốn hỏi trước khi gieo.");
      return;
    }
    const parsed = parseNumberPair(pairInput);
    if (!parsed.ok) {
      setError(parsed.error);
      return;
    }
    const iso = momentIso;
    if (!iso) {
      setError("Thời điểm chưa đúng định dạng; hãy chọn lại.");
      return;
    }
    setSession(
      buildIchingSession({
        question: q,
        category,
        pairRaw: pairInput.trim(),
        x: parsed.x,
        y: parsed.y,
        momentIso: iso,
      }),
    );
  }

  return (
    <div className="min-h-[100dvh] bg-[color:var(--tuvi-chart-paper)] text-[color:var(--tuvi-chart-ink)]">
      <div className="pointer-events-none fixed inset-0 opacity-[0.07] mix-blend-multiply [background-image:radial-gradient(circle_at_20%_0%,rgba(59,45,27,0.35),transparent_55%),radial-gradient(circle_at_80%_20%,rgba(166,31,31,0.12),transparent_45%)]" />

      <div className="relative mx-auto max-w-[1100px] px-4 py-12 sm:px-8 sm:py-16">
        <header className="max-w-3xl">
          <p className="font-ctkp-serif text-[11px] uppercase tracking-[0.14em] text-[color:var(--tuvi-chart-ink-muted)]">
            Kinh Dịch · lập quẻ X:Y
          </p>
          <h1 className="font-ctkp-display mt-3 text-pretty text-[clamp(1.6rem,4.2vw,2.15rem)] font-semibold tracking-tight text-[color:var(--tuvi-chart-ink)]">
            Gieo quẻ theo cặp số
          </h1>
          <p className={`${prose} mt-4 text-[color:var(--tuvi-chart-ink-muted)]`}>
            Nhập một cặp số nguyên dương <span className="text-[color:var(--tuvi-chart-ink)]">X:Y</span> làm gốc — hạ quái
            theo X (mod 8), thượng quái theo Y (mod 8), hào động theo (X+Y) (mod 6). Đây là công cụ cổ học ứng dụng:
            có tượng, có lý, có lời khuyên — không thay cho quyết định của bạn, cũng không phán tuyệt đối.
          </p>
          {!betaPublicSurface ?
            <p className="mt-3 font-ctkp-serif text-sm text-[color:var(--tuvi-chart-ink-muted)]">
              Muốn thử phương pháp ba tiền trên máy chủ?{" "}
              <Link
                href="/fortune"
                className="underline decoration-[color:var(--tuvi-chart-border)] underline-offset-4 hover:text-[color:var(--tuvi-chart-ink)]"
              >
                Sang trang gieo ba tiền
              </Link>
              .
            </p>
          : null}
        </header>

        <form
          onSubmit={onSubmit}
          className="mt-10 max-w-3xl space-y-7 rounded-sm border border-[color:var(--tuvi-chart-border-soft)] bg-[color:var(--tuvi-chart-paper-raised)]/65 p-6 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.35)] sm:p-8"
        >
          <div className="space-y-2">
            <label htmlFor="iching-q" className="font-ctkp-display text-sm text-[color:var(--tuvi-chart-ink)]">
              Câu hỏi / việc muốn hỏi
            </label>
            <textarea
              id="iching-q"
              name="question"
              rows={3}
              value={question}
              onChange={(e) => setQuestion(e.target.value)}
              placeholder="Viết ngắn gọn, trung thực — quẻ chỉ là gương chiêm."
              className="w-full resize-y rounded-sm border border-[color:var(--tuvi-chart-border-soft)] bg-white/55 px-4 py-3 text-sm text-[color:var(--tuvi-chart-ink)] outline-none placeholder:text-[color:var(--tuvi-chart-ink-muted)] focus:border-[color:var(--tuvi-chart-border)] focus:ring-2 focus:ring-[color:var(--tuvi-chart-border-soft)]"
            />
          </div>

          <div className="grid gap-6 sm:grid-cols-2">
            <div className="space-y-2">
              <label htmlFor="iching-pair" className="font-ctkp-display text-sm text-[color:var(--tuvi-chart-ink)]">
                Cặp số X:Y
              </label>
              <input
                id="iching-pair"
                name="pair"
                type="text"
                inputMode="text"
                autoComplete="off"
                value={pairInput}
                onChange={(e) => setPairInput(e.target.value)}
                placeholder="Ví dụ: 7:12"
                className="w-full rounded-sm border border-[color:var(--tuvi-chart-border-soft)] bg-white/55 px-4 py-3 font-ctkp-display tabular-nums text-[color:var(--tuvi-chart-ink)] outline-none placeholder:text-[color:var(--tuvi-chart-ink-muted)] focus:border-[color:var(--tuvi-chart-border)] focus:ring-2 focus:ring-[color:var(--tuvi-chart-border-soft)]"
              />
              <p className="font-ctkp-serif text-xs text-[color:var(--tuvi-chart-ink-muted)]">X và Y là số nguyên dương; dạng nhập đúng mẫu X:Y.</p>
            </div>
            <div className="space-y-2">
              <label htmlFor="iching-moment" className="font-ctkp-display text-sm text-[color:var(--tuvi-chart-ink)]">
                Thời điểm động tâm
              </label>
              <input
                id="iching-moment"
                name="moment"
                type="datetime-local"
                value={momentLocal}
                onChange={(e) => setMomentLocal(e.target.value)}
                className="w-full rounded-sm border border-[color:var(--tuvi-chart-border-soft)] bg-white/55 px-4 py-3 text-sm text-[color:var(--tuvi-chart-ink)] outline-none focus:border-[color:var(--tuvi-chart-border)] focus:ring-2 focus:ring-[color:var(--tuvi-chart-border-soft)]"
              />
              <p className="font-ctkp-serif text-xs text-[color:var(--tuvi-chart-ink-muted)]">Mặc định là hiện tại; có thể chỉnh để ghi nhật ký tâm trí.</p>
            </div>
          </div>

          <div className="space-y-2">
            <label htmlFor="iching-cat" className="font-ctkp-display text-sm text-[color:var(--tuvi-chart-ink)]">
              Nhóm câu hỏi
            </label>
            <select
              id="iching-cat"
              name="category"
              value={category}
              onChange={(e) => setCategory(e.target.value as QuestionCategory)}
              className="w-full rounded-sm border border-[color:var(--tuvi-chart-border-soft)] bg-white/55 px-4 py-3 text-sm text-[color:var(--tuvi-chart-ink)] outline-none focus:border-[color:var(--tuvi-chart-border)] focus:ring-2 focus:ring-[color:var(--tuvi-chart-border-soft)]"
            >
              {CATEGORY_OPTIONS.map((o) => (
                <option key={o.value} value={o.value}>
                  {o.label}
                </option>
              ))}
            </select>
          </div>

          {error ? (
            <p className="rounded-sm border border-[color:var(--tuvi-chart-vermilion)]/35 bg-[color:var(--tuvi-chart-vermilion)]/10 px-4 py-3 text-sm text-[color:var(--tuvi-chart-ink)]" role="alert">
              {error}
            </p>
          ) : null}

          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <button
              type="submit"
              className="ctkp-btn-primary border border-[color:var(--tuvi-chart-border)] bg-[color:var(--tuvi-chart-ink)] px-6 py-3 text-[color:var(--tuvi-chart-paper)] shadow-sm hover:opacity-95 sm:w-auto"
            >
              Gieo quẻ
            </button>
            <button
              type="button"
              onClick={resetAll}
              className="rounded-sm border border-[color:var(--tuvi-chart-border-soft)] bg-white/45 px-6 py-3 text-sm text-[color:var(--tuvi-chart-ink)] hover:bg-white/70"
            >
              Gieo lại
            </button>
            <button
              type="button"
              disabled
              title="Lưu kết quả vào nhật ký sẽ có trong bản sau (cần đăng nhập)."
              className="rounded-sm border border-dashed border-[color:var(--tuvi-chart-border-soft)] px-6 py-3 text-sm text-[color:var(--tuvi-chart-ink-muted)] opacity-60"
            >
              Lưu kết quả
            </button>
          </div>
        </form>

        {session ? (
          <div className="mt-14 space-y-12 sm:mt-16">
            <section className={`${inset}`} aria-label="Tóm tắt gieo">
              <div className="grid gap-8 lg:grid-cols-2">
                <div>
                  <p className={insetLabel}>Câu hỏi</p>
                  <p className={`${prose} mt-3`}>{session.question}</p>
                  <p className={`${prose} mt-6 text-[color:var(--tuvi-chart-ink-muted)]`}>
                    <span className="font-ctkp-display text-xs tracking-wide text-[color:var(--tuvi-chart-ink)]">Thời điểm ghi nhận.</span>{" "}
                    {new Date(session.momentIso).toLocaleString("vi-VN", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                  </p>
                </div>
                <div>
                  <p className={insetLabel}>Cặp số &amp; quái</p>
                  <dl className="mt-4 space-y-3 font-ctkp-serif text-sm text-[color:var(--tuvi-chart-ink)]">
                    <div className="flex justify-between gap-4 border-b border-[color:var(--tuvi-chart-border-soft)] pb-3">
                      <dt className="text-[color:var(--tuvi-chart-ink-muted)]">Cặp số</dt>
                      <dd className="font-ctkp-display tabular-nums">{session.pairRaw}</dd>
                    </div>
                    <div className="flex justify-between gap-4 border-b border-[color:var(--tuvi-chart-border-soft)] pb-3">
                      <dt className="text-[color:var(--tuvi-chart-ink-muted)]">Hạ quái (theo X)</dt>
                      <dd>
                        {session.lowerTrigram.symbol} {session.lowerTrigram.nameHan} · {session.lowerTrigram.nameVi}
                      </dd>
                    </div>
                    <div className="flex justify-between gap-4 border-b border-[color:var(--tuvi-chart-border-soft)] pb-3">
                      <dt className="text-[color:var(--tuvi-chart-ink-muted)]">Thượng quái (theo Y)</dt>
                      <dd>
                        {session.upperTrigram.symbol} {session.upperTrigram.nameHan} · {session.upperTrigram.nameVi}
                      </dd>
                    </div>
                    <div className="flex justify-between gap-4">
                      <dt className="text-[color:var(--tuvi-chart-ink-muted)]">Hào động</dt>
                      <dd className="font-ctkp-display text-[color:var(--tuvi-chart-vermilion)]">Hào {session.movingLine}</dd>
                    </div>
                  </dl>
                </div>
              </div>
            </section>

            <section aria-labelledby="iching-three-hex">
              <h2 id="iching-three-hex" className="font-ctkp-display text-lg text-[color:var(--tuvi-chart-ink)]">
                Ba hình — chính · hỗ · biến
              </h2>
              <p className={`${prose} mt-3 max-w-3xl text-[color:var(--tuvi-chart-ink-muted)]`}>
                Thứ tự luận: quẻ chính trước, hỗ quái (lớp giữa), rồi biến quái (xu hướng sau khi đảo đúng một hào động).
              </p>
              <div className="mt-8 grid gap-6 lg:grid-cols-3 lg:items-stretch">
                <IchingHexCard label="Quẻ chính" view={session.primary} variant="primary" />
                <IchingHexCard label="Hỗ quái" view={session.mutual} variant="mutual" />
                <IchingHexCard label="Biến quái" view={session.changed} variant="changed" />
              </div>
            </section>

            <section aria-labelledby="iching-reading">
              <h2 id="iching-reading" className="font-ctkp-display text-lg text-[color:var(--tuvi-chart-ink)]">
                Luận giải (khung học thuật)
              </h2>
              <p className={`${prose} mt-3 max-w-3xl text-[color:var(--tuvi-chart-ink-muted)]`}>
                Các đoạn ghép từ thoán–tượng–hào có trong kho CTKP, kèm lớp ứng dụng cho một số quẻ thường gặp. Không dùng mô
                hình ngôn ngữ; không chắc chắn tuyệt đối.
              </p>

              <div className="mt-8 space-y-10">
                <div className={inset}>
                  <h3 className={insetLabel}>A. Tổng tượng</h3>
                  <p className={`${prose} mt-4`}>{session.interpretation.sections.tongTuong}</p>
                </div>
                <div className={inset}>
                  <h3 className={insetLabel}>B. Việc đang hỏi đang ở thế nào</h3>
                  <p className={`${prose} mt-4`}>{session.interpretation.sections.theHienTai}</p>
                </div>
                <div className={inset}>
                  <h3 className={insetLabel}>C. Điểm thuận</h3>
                  <p className={`${prose} mt-4`}>{session.interpretation.sections.diemThuan}</p>
                </div>
                <div className={inset}>
                  <h3 className={insetLabel}>D. Điểm nghịch</h3>
                  <p className={`${prose} mt-4`}>{session.interpretation.sections.diemNghich}</p>
                </div>
                <div className={inset}>
                  <h3 className={insetLabel}>E. Hào động nói gì</h3>
                  <p className={`${prose} mt-4`}>{session.interpretation.sections.haoDong}</p>
                </div>
                <div className={inset}>
                  <h3 className={insetLabel}>F. Xu hướng chuyển biến qua biến quái</h3>
                  <p className={`${prose} mt-4`}>{session.interpretation.sections.xuHuongBien}</p>
                </div>
                <div className={inset}>
                  <h3 className={insetLabel}>G. Lời khuyên hành động</h3>
                  <p className={`${prose} mt-4`}>{session.interpretation.sections.loiKhuyen}</p>
                </div>
                <div className={inset}>
                  <h3 className={insetLabel}>H. Mức độ nên làm</h3>
                  <p className={`${prose} mt-4`}>
                    <span className="font-ctkp-display text-base text-[color:var(--tuvi-chart-vermilion)]">
                      {session.interpretation.actionLevelLabel}
                    </span>
                    <span className="mt-3 block text-[color:var(--tuvi-chart-ink-muted)]">
                      (Gợi mở theo vị hào động — không áp vào mọi tình huống pháp lý–y tế.)
                    </span>
                  </p>
                </div>
                {session.interpretation.multipleOfThreeNote ? (
                  <div className={inset}>
                    <h3 className={insetLabel}>Gợi mở thêm (bội ba / Tùy)</h3>
                    <p className={`${prose} mt-4 text-[color:var(--tuvi-chart-ink-muted)]`}>{session.interpretation.multipleOfThreeNote}</p>
                  </div>
                ) : null}
              </div>
            </section>

            <footer className="border-t border-[color:var(--tuvi-chart-border-soft)] pt-8 text-center font-ctkp-serif text-xs leading-relaxed text-[color:var(--tuvi-chart-ink-muted)]">
              Quẻ là gương chiêm: giúp nhìn kỹ, không thay bạn chọn bước. Nếu có bệnh nặng, rủi ro pháp lý, hay tài chính
              căng, hãy nhờ chuyên gia đứng trong vai trò đó.
            </footer>
          </div>
        ) : null}
      </div>
    </div>
  );
}