"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

import { fetchFortuneHistory, type FortuneHistoryItem } from "@/lib/fortune-history";
import { getApiBaseUrl } from "@/lib/api";
import { FORTUNE_RESULT_KEY } from "@/lib/fortune";
import { normalizeTuViStoredPayload, TUVI_RESULT_KEY } from "@/lib/tuvi";
import { leadTextForTuViHistoryInput } from "@/lib/tuvi-age";

function formatDate(iso: string) {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  const dd = String(d.getDate()).padStart(2, "0");
  const mm = String(d.getMonth() + 1).padStart(2, "0");
  const yyyy = d.getFullYear();
  return `${dd}/${mm}/${yyyy}`;
}

function shortSummary(item: FortuneHistoryItem) {
  const result = item.result as Record<string, unknown>;
  const prep = result.ctkp_interpret_prep as { summary_short?: string } | undefined;
  const tuViLead = item.type === "tu_vi" ? leadTextForTuViHistoryInput(item.input as Record<string, unknown>) : "";
  if (prep?.summary_short) return tuViLead ? `${tuViLead}${prep.summary_short}` : prep.summary_short;
  if (item.type === "tu_vi") {
    const inp = item.input as Record<string, unknown>;
    const fs = typeof inp.foundation_summary_vi === "string" ? inp.foundation_summary_vi.trim() : "";
    if (fs.length > 0) {
      const body = fs.length > 160 ? `${fs.slice(0, 159)}…` : fs;
      return tuViLead ? `${tuViLead}${body}` : body;
    }
    const title = (((result.result as Record<string, unknown>)?.reading as Record<string, unknown>)?.title ??
      "") as string;
    const tail = title || "Kết quả tử vi";
    return tuViLead ? `${tuViLead}${tail}` : tail;
  }
  const methodLabel = (result.methodLabel as string) || "";
  return methodLabel || "Kết quả quẻ dịch";
}

function tryPersistStoredResult(key: string, value: unknown): boolean {
  if (typeof sessionStorage === "undefined") return false;
  try {
    sessionStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch {
    return false;
  }
}

export default function FortuneHistoryPage() {
  const router = useRouter();
  const hasApi = Boolean(getApiBaseUrl());
  const [items, setItems] = useState<FortuneHistoryItem[]>([]);
  const [loading, setLoading] = useState(hasApi);
  const [storageHint, setStorageHint] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    void (async () => {
      if (!hasApi) {
        setLoading(false);
        return;
      }
      setLoading(true);
      try {
        const list = await fetchFortuneHistory();
        if (!cancelled) setItems(list);
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [hasApi]);

  return (
    <main className="mx-auto max-w-3xl px-4 py-12 sm:px-8 sm:py-16">
      <div className="mb-8 flex flex-col gap-3 border-b border-stone-800/45 pb-6 sm:flex-row sm:items-end sm:justify-between">
        <h1 className="font-ctkp-display text-2xl font-semibold text-stone-100">Sổ gieo — nhật ký</h1>
        <Link href="/fortune" className="ctkp-text-link text-sm">
          Về gieo quẻ
        </Link>
      </div>

      {!hasApi ? (
        <p className="rounded-xl border border-stone-800/50 bg-[#0c0b0a]/70 p-5 text-sm leading-relaxed text-stone-400">
          Chưa cấu hình NEXT_PUBLIC_API_BASE_URL — không tải được nhật ký từ máy chủ.
        </p>
      ) : loading ? (
        <p className="rounded-xl border border-stone-800/50 bg-[#0c0b0a]/70 p-5 text-sm text-stone-400">Đang tải…</p>
      ) : items.length === 0 ? (
        <p className="rounded-xl border border-stone-800/50 bg-[#0c0b0a]/70 p-5 text-sm text-stone-400">
          Chưa có mục nào — gieo quẻ hoặc mở lá số qua API để lưu vào đây.
        </p>
      ) : (
        <div className="space-y-3">
          {storageHint ? (
            <p className="rounded-xl border border-amber-800/40 bg-amber-950/25 p-4 text-sm text-amber-100/90" role="status">
              {storageHint}
            </p>
          ) : null}
          {items.map((item) => (
            <button
              key={item.id}
              type="button"
              onClick={() => {
                setStorageHint(null);
                if (item.type === "que_dich") {
                  if (!tryPersistStoredResult(FORTUNE_RESULT_KEY, item.result)) {
                    setStorageHint(
                      "Không ghi được nhớ trình duyệt (quota hoặc chế độ hạn chế). Thử cửa sổ thường, giải phóng dung lượng, rồi bấm lại.",
                    );
                    return;
                  }
                  router.push("/fortune/result");
                } else {
                  if (
                    !tryPersistStoredResult(TUVI_RESULT_KEY, normalizeTuViStoredPayload(item.result))
                  ) {
                    setStorageHint(
                      "Không ghi được nhớ trình duyệt (quota hoặc chế độ hạn chế). Thử cửa sổ thường, giải phóng dung lượng, rồi bấm lại.",
                    );
                    return;
                  }
                  router.push("/tu-vi/ket-qua");
                }
              }}
              className="w-full rounded-lg border border-stone-800/45 bg-[#0c0b0a]/60 p-4 text-left transition-colors duration-200 hover:border-[#6b5a3a]/30 hover:bg-[#100e0c]/75"
            >
              <div className="text-sm text-stone-500">{item.type === "tu_vi" ? "Tử vi" : "Quẻ dịch"}</div>
              <div className="mt-1 font-ctkp-display font-medium text-stone-100">{shortSummary(item)}</div>
              <div className="mt-2 text-xs text-stone-500">{formatDate(item.createdAt)}</div>
            </button>
          ))}
        </div>
      )}
    </main>
  );
}