"use client";

import Link from "next/link";

import { useParams, useRouter } from "next/navigation";

import { useCallback, useEffect, useState } from "react";

import { RequireAuth } from "@/components/auth/RequireAuth";
import { TuViStoredReadonlyCanvas, TuViReadingFeedbackSection } from "@/components/tu-vi";

import {
  deleteSavedTuViReading,
  getSavedTuViReading,
  updateSavedTuViReadingTitle,
  type SavedTuViReadingDetail,
} from "@/lib/saved-tu-vi-readings-api";
import { parseTuViStoredPayload } from "@/lib/tu-vi-stored-payload";
import { storedResultEligibleForPremiumDeepReportPreview } from "@/lib/tuvi-premium-report.v1";

import type { WebAuthNormalizedError } from "@/lib/web-auth-client";

function formatDt(iso: string): string {
  try {
    const d = new Date(iso);

    return Number.isNaN(d.getTime()) ? iso : d.toLocaleString("vi-VN");
  } catch {
    return iso;
  }
}

function MetaRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-1 border-b border-stone-800/40 py-3 last:border-b-0 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4">
      <dt className="shrink-0 text-[12px] font-medium uppercase tracking-wide text-stone-500">
        {label}
      </dt>

      <dd className="min-w-0 text-right text-[15px] text-stone-100 sm:text-left">
        {value.trim() ? value : "—"}
      </dd>
    </div>
  );
}

function SavedReadingDetailPanel() {
  const params = useParams();

  const router = useRouter();

  const id = typeof params.id === "string" ? params.id : "";

  const [row, setRow] = useState<SavedTuViReadingDetail | null>(null);

  const [err, setErr] = useState<string | null>(null);

  const [notFound, setNotFound] = useState(false);

  const [loading, setLoading] = useState(true);

  const [delBusy, setDelBusy] = useState(false);

  const [titleDraft, setTitleDraft] = useState("");

  const [titleSaving, setTitleSaving] = useState(false);

  const [titleFeedback, setTitleFeedback] = useState<{ kind: "ok" | "err"; text: string } | null>(null);

  const load = useCallback(async () => {
    if (!id) {
      setLoading(false);

      setErr("Thiếu mã lá số.");

      return;
    }

    setErr(null);

    setNotFound(false);

    setLoading(true);

    try {
      const r = await getSavedTuViReading(id);

      setRow(r);

      setTitleDraft(r.title?.trim() ?? "");
    } catch (e: unknown) {
      const w = e as WebAuthNormalizedError;

      if (w.status === 401) {
        router.replace(
          `/login?next=${encodeURIComponent(`/account/saved-readings/${id}`)}`,
        );

        return;
      }

      if (w.status === 404) {
        setNotFound(true);

        setErr(null);
      } else {
        setErr(w.message || "Không tải được.");
      }

      setRow(null);
    } finally {
      setLoading(false);
    }
  }, [id, router]);

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

  async function onSaveTitle() {
    if (!id || !row) return;
    setTitleSaving(true);
    setTitleFeedback(null);
    try {
      const updated = await updateSavedTuViReadingTitle(id, titleDraft);
      setRow((prev) =>
        prev ?
          {
            ...prev,
            title: updated.title,
            updatedAt: updated.updatedAt,
          }
        : null,
      );
      setTitleFeedback({ kind: "ok", text: "Đã lưu tiêu đề." });
      setTitleDraft(updated.title ?? "");
    } catch (e: unknown) {
      const w = e as WebAuthNormalizedError;
      if (w.status === 401) {
        router.replace(`/login?next=${encodeURIComponent(`/account/saved-readings/${id}`)}`);
        return;
      }
      if (w.status === 403 && w.code === "PHONE_VERIFICATION_REQUIRED") {
        setTitleFeedback({ kind: "err", text: "Cần xác minh SĐT để sửa tiêu đề." });
      } else {
        setTitleFeedback({ kind: "err", text: w.message || "Không lưu được tiêu đề." });
      }
    } finally {
      setTitleSaving(false);
    }
  }

  async function onDelete() {
    if (!id || !row) return;

    if (
      !window.confirm("Xóa lá số này khỏi tài khoản? Hành động không hoàn tác.")
    )
      return;

    setDelBusy(true);

    setErr(null);

    try {
      await deleteSavedTuViReading(id);

      router.replace("/account/saved-readings");
    } catch (e: unknown) {
      const w = e as WebAuthNormalizedError;

      if (w.status === 401) {
        router.replace(
          `/login?next=${encodeURIComponent(`/account/saved-readings/${id}`)}`,
        );

        return;
      }

      setErr(w.message || "Không xóa được.");
    } finally {
      setDelBusy(false);
    }
  }

  if (loading && !row && !notFound) {
    return (
      <p className="rounded-xl border border-stone-800/60 bg-stone-950/30 px-5 py-10 text-center text-sm text-stone-500">
        Đang tải…
      </p>
    );
  }

  if (notFound) {
    return (
      <div className="space-y-5">
        <div className="rounded-xl border border-stone-800/70 bg-stone-950/35 px-5 py-8 text-center">
          <p className="font-ctkp-display text-lg font-medium text-stone-200">
            Không tìm thấy lá số
          </p>

          <p className="mt-2 text-sm leading-relaxed text-stone-500">
            Bản ghi có thể đã bị xóa hoặc không thuộc tài khoản của bạn. Hãy
            quay lại danh sách và chọn một lá khác.
          </p>
        </div>

        <Link
          href="/account/saved-readings"
          className="ctkp-text-link inline-block text-sm"
        >
          ← Quay lại danh sách
        </Link>
      </div>
    );
  }

  if (err && !row) {
    return (
      <div className="space-y-4">
        <p
          className="rounded-lg border border-red-900/40 bg-red-950/25 px-3 py-2 text-sm text-red-200/90"
          role="alert"
        >
          {err}
        </p>

        <Link href="/account/saved-readings" className="ctkp-text-link text-sm">
          ← Quay lại danh sách
        </Link>
      </div>
    );
  }

  if (!row) {
    return null;
  }

  const parsedStored = parseTuViStoredPayload(row.resultJson);

  const chartIdForFeedback =
    (parsedStored?.result?.id && String(parsedStored.result.id).trim()) ||
    (typeof row.resultJson === "object" && row.resultJson !== null ?
      String((row.resultJson as { result?: { id?: unknown } }).result?.id ?? "").trim()
    : "") ||
    row.id;

  return (
    <div className="space-y-8">
      <Link
        href="/account/saved-readings"
        className="ctkp-text-link inline-block text-sm"
      >
        ← Quay lại danh sách
      </Link>

      {err ? (
        <p className="rounded-lg border border-red-900/40 bg-red-950/25 px-3 py-2 text-sm text-red-200/90">
          {err}
        </p>
      ) : null}

      <section className="mx-auto max-w-lg rounded-xl border border-stone-800/70 bg-stone-950/35 px-5 py-5">
        <h2 className="text-xs font-semibold uppercase tracking-wider text-amber-200/80">
          Thông tin lá số
        </h2>

        <dl className="mt-2">
          <div className="flex flex-col gap-2 border-b border-stone-800/40 py-3">
            <dt className="text-[12px] font-medium uppercase tracking-wide text-stone-500">
              Tiêu đề (hiển thị)
            </dt>
            <dd className="space-y-2">
              <input
                type="text"
                value={titleDraft}
                onChange={(e) => {
                  setTitleDraft(e.target.value);
                  setTitleFeedback(null);
                }}
                maxLength={300}
                className="w-full rounded-lg border border-stone-600/60 bg-stone-900/70 px-3 py-2 text-sm text-stone-100"
                placeholder="Đặt tên gợi nhớ cho lá số"
              />
              <div className="flex flex-wrap items-center gap-2">
                <button
                  type="button"
                  disabled={titleSaving}
                  onClick={() => void onSaveTitle()}
                  className="rounded-lg border border-emerald-800/45 bg-emerald-950/35 px-3 py-1.5 text-xs font-medium text-emerald-100/95 hover:bg-emerald-950/50 disabled:opacity-50"
                >
                  {titleSaving ? "Đang lưu…" : "Lưu tiêu đề"}
                </button>
                <button
                  type="button"
                  disabled={titleSaving}
                  onClick={() => {
                    setTitleDraft(row.title?.trim() ?? "");
                    setTitleFeedback(null);
                  }}
                  className="rounded-lg border border-stone-600/50 px-3 py-1.5 text-xs text-stone-400 hover:bg-stone-900/40 disabled:opacity-50"
                >
                  Hoàn tác
                </button>
              </div>
              {titleFeedback ?
                <p
                  className={`text-xs ${titleFeedback.kind === "ok" ? "text-emerald-300/90" : "text-red-300/90"}`}
                  role="status"
                >
                  {titleFeedback.text}
                </p>
              : null}
            </dd>
          </div>

          <MetaRow label="Tên người xem" value={row.personName ?? ""} />

          <MetaRow label="Ngày sinh (đã ghi)" value={row.birthDate ?? ""} />

          <MetaRow label="Giờ sinh (đã ghi)" value={row.birthTime ?? ""} />

          <MetaRow label="Giới tính (đã ghi)" value={row.gender ?? ""} />

          <MetaRow label="Tạo lúc" value={formatDt(row.createdAt)} />

          <MetaRow label="Cập nhật lúc" value={formatDt(row.updatedAt)} />
        </dl>
      </section>

      {row.expertReviewPublic && row.expertReviewPublic.v === 1 ? (
        <section className="mx-auto max-w-lg rounded-xl border border-sky-900/40 bg-sky-950/15 px-5 py-4">
          <h2 className="text-xs font-semibold uppercase tracking-wider text-sky-200/90">Ghi chú chuyên gia</h2>
          <p className="mt-1 text-[11px] leading-relaxed text-stone-500">
            Bổ sung từ chuyên gia; không thay thế lá số tự động. Cập nhật{" "}
            {formatDt(row.expertReviewPublic.updatedAt)}.
          </p>
          {row.expertReviewPublic.summary?.trim() ? (
            <p className="mt-3 text-[13px] leading-relaxed text-stone-200">{row.expertReviewPublic.summary.trim()}</p>
          ) : null}
          {row.expertReviewPublic.strategicNotes?.trim() ? (
            <div className="mt-3">
              <h3 className="text-[11px] font-medium uppercase tracking-wide text-stone-500">
                Chiến lược / trọng tâm
              </h3>
              <p className="mt-1 whitespace-pre-wrap text-[13px] leading-relaxed text-stone-200/95">
                {row.expertReviewPublic.strategicNotes.trim()}
              </p>
            </div>
          ) : null}
          {row.expertReviewPublic.timingNotes?.trim() ? (
            <div className="mt-3">
              <h3 className="text-[11px] font-medium uppercase tracking-wide text-stone-500">Thời điểm</h3>
              <p className="mt-1 whitespace-pre-wrap text-[13px] leading-relaxed text-stone-200/95">
                {row.expertReviewPublic.timingNotes.trim()}
              </p>
            </div>
          ) : null}
        </section>
      ) : null}

      {parsedStored && storedResultEligibleForPremiumDeepReportPreview(parsedStored.result) ?
        <section className="mx-auto max-w-lg rounded-xl border border-emerald-900/35 bg-emerald-950/12 px-5 py-4">
          <p className="text-[13px] leading-relaxed text-emerald-100/92">
            Có thể mở bản luận sâu từ lá số này — xem trước mục lục các phần trong khối khái quát phía dưới (chưa thanh toán;
            đầy đủ hơn khi gói chuyên sâu mở).
          </p>
        </section>
      : null}

      {row.revisitEchoLines && row.revisitEchoLines.length > 0 ? (
        <section className="mx-auto max-w-lg rounded-xl border border-amber-900/35 bg-amber-950/10 px-5 py-4">
          <h2 className="text-xs font-semibold uppercase tracking-wider text-amber-200/85">
            Điểm này cũng xuất hiện trong các lần luận khác
          </h2>
          <ul className="mt-2 list-inside list-disc space-y-1.5 text-[13px] leading-snug text-stone-300">
            {row.revisitEchoLines.map((line) => (
              <li key={line}>{line}</li>
            ))}
          </ul>
          <p className="mt-3 text-[11px] leading-relaxed text-stone-500">
            Gợi ý dựa trên các bản đã lưu cùng mốc sinh — vẫn đọc chi tiết trong từng lần luận.
          </p>
        </section>
      ) : null}

      {parsedStored ? (
        <TuViStoredReadonlyCanvas
          data={parsedStored}
          savedLabel="Lá số đã lưu"
          savedAtDisplay={formatDt(row.createdAt)}
          premiumSavedReadingId={row.id}
        />
      ) : (
        <div className="mx-auto max-w-lg rounded-xl border border-amber-900/35 bg-amber-950/15 px-5 py-6">
          <p className="text-sm leading-relaxed text-amber-100/90">
            Dữ liệu lá số đã lưu không còn đúng định dạng hiện tại.
          </p>
          <p className="mt-2 text-xs leading-relaxed text-stone-500">
            Bạn vẫn có thể xem phần kỹ thuật bên dưới hoặc lập lá số mới từ trang Tử Vi.
          </p>
          <Link href="/tu-vi" className="ctkp-text-link mt-4 inline-block text-sm">
            Tới trang lập lá số
          </Link>
        </div>
      )}

      <TuViReadingFeedbackSection
        chartId={chartIdForFeedback}
        savedReadingId={row.id}
        source="tu_vi_saved_reading_detail"
        className="mx-auto max-w-lg"
      />

      <details className="mx-auto max-w-4xl rounded-xl border border-stone-800/70 bg-black/25 px-4 py-3">
        <summary className="cursor-pointer text-sm text-amber-200/85">
          Dữ liệu kỹ thuật beta
        </summary>

        <pre className="mt-4 max-h-[min(50vh,420px)] overflow-auto whitespace-pre-wrap break-all font-mono text-[10px] text-stone-400">
          {JSON.stringify(
            { inputJson: row.inputJson, resultJson: row.resultJson },
            null,
            2,
          )}
        </pre>
      </details>

      <div className="mx-auto flex max-w-lg flex-wrap gap-3">
        <button
          type="button"
          disabled={delBusy}
          onClick={() => void onDelete()}
          className="rounded-xl border border-red-900/50 bg-red-950/30 px-4 py-2 text-sm text-red-100/90 hover:bg-red-950/45 disabled:opacity-50"
        >
          {delBusy ? "Đang xóa…" : "Xóa khỏi tài khoản"}
        </button>

        <Link
          href="/account/saved-readings"
          className="rounded-xl border border-stone-700/50 px-4 py-2 text-sm text-stone-300 hover:bg-stone-900/50"
        >
          Danh sách
        </Link>
      </div>
    </div>
  );
}

export default function AccountSavedReadingDetailPage() {
  return (
    <main className="mx-auto w-full max-w-[1320px] flex-1 px-4 py-16 sm:px-8 sm:py-20">
      <header className="mx-auto max-w-lg">
        <p className="ctkp-eyebrow tracking-[0.36em]">
          Tài khoản · lá số đã lưu
        </p>

        <h1 className="font-ctkp-display mt-3 text-2xl font-semibold text-stone-100">
          Chi tiết lá số
        </h1>
      </header>

      <div className="mt-10 w-full">
        <RequireAuth>
          <SavedReadingDetailPanel />
        </RequireAuth>
      </div>
    </main>
  );
}