"use client";

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

import { TuViPageShell } from "@/components/tu-vi";
import { getApiBaseUrl } from "@/lib/api";
import { normalizeTuViStoredPayload, TUVI_RESULT_KEY } from "@/lib/tuvi";
import {
  fetchTuViSavedChartList,
  fetchTuViSavedChartRecord,
  type TuViSavedChartListItem,
  tuViStoredPayloadFromSavedRecord,
} from "@/lib/tuvi-chart-records-api";

const RESTORED_CHAT_SS = "ctkp_tuvi_restored_ai_chat";

export default function TuViDaLuuPage() {
  const router = useRouter();
  const [records, setRecords] = useState<TuViSavedChartListItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [openBusyId, setOpenBusyId] = useState<string | null>(null);

  const apiOk = Boolean(getApiBaseUrl());

  const load = useCallback(async () => {
    if (!apiOk) {
      setLoading(false);
      setError("Chưa kết nối được máy chủ — kiểm tra cấu hình triển khai rồi thử lại.");
      setRecords([]);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const r = await fetchTuViSavedChartList();
      setRecords(r.records);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
      setRecords([]);
    } finally {
      setLoading(false);
    }
  }, [apiOk]);

  useEffect(() => {
    void load();
  }, [load]);

  async function openRecord(id: string) {
    if (!apiOk) return;
    setOpenBusyId(id);
    setError(null);
    try {
      const { record } = await fetchTuViSavedChartRecord(id);
      const payload = tuViStoredPayloadFromSavedRecord(record);
      if (!payload) {
        setError("Bản ghi không đủ dữ liệu để mở lá.");
        return;
      }
      const normalized = normalizeTuViStoredPayload(payload);
      sessionStorage.setItem(TUVI_RESULT_KEY, JSON.stringify(normalized));
      const chatSnap = record.aiChatMessagesSnapshot;
      if (Array.isArray(chatSnap) && chatSnap.length > 0) {
        sessionStorage.setItem(RESTORED_CHAT_SS, JSON.stringify(chatSnap));
      }
      router.push("/tu-vi/ket-qua");
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setOpenBusyId(null);
    }
  }

  return (
    <TuViPageShell>
      <header className="mb-6 border-b border-[#d4af37]/12 pb-4">
        <h1 className="font-ctkp-serif text-xl tracking-[0.04em] text-[#f0e6bc]">Lá số đã lưu</h1>
        <p className="mt-2 max-w-xl font-sans text-[13px] leading-relaxed text-slate-500">
          Mở lại lá và luận deterministic đã ghi trên máy chủ (phân quyền theo trình duyệt này).
        </p>
      </header>
      <div className="mx-auto max-w-2xl px-0 py-2 sm:px-0">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <Link href="/tu-vi" className="font-sans text-[13px] text-[#d4af37]/88 underline-offset-4 hover:underline">
            ← Ghi lá mới
          </Link>
          <button
            type="button"
            disabled={loading || !apiOk}
            onClick={() => void load()}
            className="rounded-lg border border-[#d4af37]/28 bg-[#d4af37]/10 px-3 py-1.5 font-sans text-[12px] text-[#f5ebd6] hover:bg-[#d4af37]/16 disabled:opacity-45"
          >
            Làm mới danh sách
          </button>
        </div>

        {error ?
          <p className="mt-6 rounded-lg border border-red-900/35 bg-red-950/20 px-3 py-2 font-sans text-[13px] text-red-100/90">
            {error}
          </p>
        : null}

        {loading ?
          <p className="mt-8 font-sans text-[13px] text-slate-500">Đang tải…</p>
        : records.length === 0 ?
          <p className="mt-8 font-sans text-[13px] leading-relaxed text-slate-500">
            Chưa có lá nào được lưu trên máy chủ cho trình duyệt này. Ở trang kết quả lá số, bấm «Lưu lá số» sau khi đã có
            luận từ engine.
          </p>
        : (
          <ul className="mt-8 space-y-3" aria-label="Danh sách lá đã lưu">
            {records.map((r) => (
              <li key={r.id}>
                <button
                  type="button"
                  disabled={openBusyId === r.id}
                  onClick={() => void openRecord(r.id)}
                  className="w-full rounded-xl border border-[#d4af37]/14 bg-[#060912]/55 px-4 py-3 text-left transition-colors hover:border-[#d4af37]/28 hover:bg-[#0a1020]/65 disabled:opacity-50"
                >
                  <p className="font-ctkp-serif text-[15px] text-[#f0e6bc]">{r.name}</p>
                  <p className="mt-1 font-sans text-[12px] text-slate-400">
                    Sinh {r.birthDate} · {r.birthTime} · {r.gender} · Năm xem {r.viewingYearSolar}
                  </p>
                  <p className="mt-1 font-sans text-[11px] text-slate-600">
                    Ghi {new Date(r.createdAt).toLocaleString("vi-VN")}
                  </p>
                  {openBusyId === r.id ?
                    <p className="mt-2 font-sans text-[11px] text-[#d4af37]/75">Đang mở…</p>
                  : null}
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </TuViPageShell>
  );
}