"use client";

import { useState } from "react";
import { castReading, type Line } from "@/lib/i-ching";
import { Sparkles } from "lucide-react";
import { AiInsightPanel } from "@/components/ai/insight-panel";

type Reading = ReturnType<typeof castReading>;

export default function KinhDichPage() {
  const [question, setQuestion] = useState("");
  const [reading, setReading] = useState<Reading | null>(null);
  const [casting, setCasting] = useState(false);

  function handleCast() {
    setCasting(true);
    // Slight delay for "ritual" feel
    setTimeout(() => {
      setReading(castReading());
      setCasting(false);
    }, 600);
  }

  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">
            Kinh Dịch · Gieo Quẻ
          </h1>
          <p className="text-ink-secondary mt-2 text-sm">
            Phương pháp Tam Tiền — gieo 3 đồng xu 6 lần để được quẻ.
          </p>
        </div>

        <div className="border-stroke-subtle bg-bg-elevated/40 mb-6 rounded-xl border p-5">
          <label className="text-ink-muted block text-xs">Câu hỏi của bạn</label>
          <textarea
            rows={3}
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            placeholder="Tập trung vào một câu hỏi cụ thể, có-không hoặc xin lời khuyên..."
            className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-1.5 w-full resize-none rounded-md border px-3 py-2 text-sm focus:outline-none"
          />
          <button
            onClick={handleCast}
            disabled={casting}
            className="bg-brand-gold text-bg-base mt-3 inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-semibold disabled:opacity-60"
          >
            <Sparkles className="h-4 w-4" />
            {casting ? "Đang gieo..." : reading ? "Gieo lại" : "Gieo quẻ"}
          </button>
        </div>

        {reading ? (
          <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="text-brand-gold text-xs tracking-[0.2em] uppercase">
                Quẻ chính · {reading.original.upper} trên {reading.original.lower}
              </div>
              <h2 className="font-display text-ink-primary mt-1 text-3xl font-semibold lg:text-4xl">
                {reading.original.vn}{" "}
                <span className="text-ink-muted text-base">{reading.original.name}</span>
              </h2>
              {question ? (
                <p className="text-ink-muted mt-2 text-xs italic">Hỏi: {question}</p>
              ) : null}
            </header>

            <p className="text-ink-secondary mt-4 text-sm leading-relaxed">
              {reading.original.meaning}
            </p>

            {/* Render 6 lines bottom → top */}
            <div className="mt-6">
              <h3 className="font-display text-brand-gold mb-3 text-sm font-semibold tracking-wider uppercase">
                Sáu hào (đọc từ dưới lên)
              </h3>
              <div className="space-y-1.5">
                {[...reading.lines].reverse().map((line, i) => {
                  const lineIdx = 5 - i;
                  const isChanging = line === 6 || line === 9;
                  return (
                    <LineRow key={lineIdx} line={line} index={lineIdx} changing={isChanging} />
                  );
                })}
              </div>
            </div>

            {reading.changed ? (
              <div className="border-stroke-subtle/60 bg-bg-overlay/30 mt-6 rounded-xl border p-5">
                <div className="text-brand-gold text-xs tracking-[0.2em] uppercase">
                  Có hào động → Quẻ biến
                </div>
                <h3 className="font-display text-ink-primary mt-1 text-2xl font-semibold">
                  {reading.changed.vn}{" "}
                  <span className="text-ink-muted text-sm">{reading.changed.name}</span>
                </h3>
                <p className="text-ink-secondary mt-2 text-sm leading-relaxed">
                  {reading.changed.meaning}
                </p>
                <p className="text-ink-muted mt-2 text-xs">
                  Hào động ở vị trí {reading.original.changing.map((n) => n + 1).join(", ")}. Quẻ
                  biến chỉ ra hướng phát triển từ tình trạng hiện tại.
                </p>
              </div>
            ) : null}
          </article>
        ) : null}

        {reading ? (
          <AiInsightPanel
            topic="i-ching"
            context={{
              question: question || "(không nêu)",
              original: {
                name: reading.original.name,
                vn: reading.original.vn,
                upper: reading.original.upper,
                lower: reading.original.lower,
                meaning: reading.original.meaning,
              },
              changingLines: reading.original.changing.map((n) => n + 1),
              changed: reading.changed
                ? {
                    name: reading.changed.name,
                    vn: reading.changed.vn,
                    meaning: reading.changed.meaning,
                  }
                : null,
              lines: reading.lines,
            }}
            cta={'Hỏi "Thầy" luận giải quẻ'}
            title="Luận giải sâu Kinh Dịch"
            hint='Quẻ trên là kết quả gieo. "Thầy" sẽ diễn giải ý nghĩa quẻ chính, hào động và quẻ biến trong bối cảnh câu hỏi của bạn.'
            prompt={
              question
                ? `Câu hỏi của tôi: "${question}". Hãy luận quẻ trên cho câu hỏi này.`
                : undefined
            }
          />
        ) : null}
      </div>
    </div>
  );
}

function LineRow({ line, index, changing }: { line: Line; index: number; changing: boolean }) {
  const isYang = line === 7 || line === 9;
  return (
    <div
      className={`border-stroke-subtle/50 flex items-center gap-3 rounded-md border p-2 ${
        changing ? "bg-brand-gold/10 border-brand-gold/40" : "bg-bg-inset"
      }`}
    >
      <span className="text-ink-muted w-6 font-mono text-xs">{index + 1}</span>
      <div className="flex-1 px-2">
        {isYang ? (
          <div className="bg-ink-primary h-1.5 w-full rounded-full" />
        ) : (
          <div className="flex gap-1.5">
            <div className="bg-ink-primary h-1.5 flex-1 rounded-full" />
            <div className="bg-ink-primary h-1.5 flex-1 rounded-full" />
          </div>
        )}
      </div>
      <span className="text-ink-muted w-16 text-right font-mono text-xs">
        {line} {line === 6 ? "(âm động)" : line === 9 ? "(dương động)" : isYang ? "dương" : "âm"}
      </span>
    </div>
  );
}