"use client";

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

import { RequireAuth } from "@/components/auth/RequireAuth";
import {
  deleteSavedTuViReading,
  listSavedTuViReadings,
  updateSavedTuViReadingTitle,
  type SavedTuViReadingListItem,
} from "@/lib/saved-tu-vi-readings-api";
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;
  }
}

const LIST_LIMIT = 20;
const SEARCH_DEBOUNCE_MS = 350;

function SavedReadingsPanel() {
  const router = useRouter();
  const [rows, setRows] = useState<SavedTuViReadingListItem[] | null>(null);
  const [nextCursor, setNextCursor] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [qInput, setQInput] = useState("");
  const [debouncedQ, setDebouncedQ] = useState("");
  const [editingId, setEditingId] = useState<string | null>(null);
  const [renameDraft, setRenameDraft] = useState("");
  const [renameBusy, setRenameBusy] = useState(false);
  const [renameErr, setRenameErr] = useState<string | null>(null);

  useEffect(() => {
    const t = window.setTimeout(() => setDebouncedQ(qInput.trim()), SEARCH_DEBOUNCE_MS);
    return () => window.clearTimeout(t);
  }, [qInput]);

  const loadFirst = useCallback(async () => {
    setErr(null);
    setLoading(true);
    setRows(null);
    setNextCursor(null);
    try {
      const { items, nextCursor: nc } = await listSavedTuViReadings({
        q: debouncedQ || undefined,
        limit: LIST_LIMIT,
      });
      setRows(items);
      setNextCursor(nc);
    } catch (e: unknown) {
      const w = e as WebAuthNormalizedError;
      if (w.status === 401) {
        router.replace(`/login?next=${encodeURIComponent("/account/saved-readings")}`);
        return;
      }
      setErr(w.message || "Không tải được danh sách.");
      setRows(null);
      setNextCursor(null);
    } finally {
      setLoading(false);
    }
  }, [debouncedQ, router]);

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

  const loadMore = useCallback(async () => {
    if (!nextCursor || loadingMore) return;
    setLoadingMore(true);
    setErr(null);
    try {
      const { items, nextCursor: nc } = await listSavedTuViReadings({
        q: debouncedQ || undefined,
        limit: LIST_LIMIT,
        cursor: nextCursor,
      });
      setRows((prev) => [...(prev ?? []), ...items]);
      setNextCursor(nc);
    } catch (e: unknown) {
      const w = e as WebAuthNormalizedError;
      if (w.status === 401) {
        router.replace(`/login?next=${encodeURIComponent("/account/saved-readings")}`);
        return;
      }
      setErr(w.message || "Không tải thêm được.");
    } finally {
      setLoadingMore(false);
    }
  }, [debouncedQ, nextCursor, loadingMore, router]);

  async function onDeleteRow(id: string, e: MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
    e.stopPropagation();
    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;
    setDeletingId(id);
    setErr(null);
    try {
      await deleteSavedTuViReading(id);
      await loadFirst();
      setEditingId(null);
    } catch (unknownErr: unknown) {
      const w = unknownErr as WebAuthNormalizedError;
      if (w.status === 401) {
        router.replace(`/login?next=${encodeURIComponent("/account/saved-readings")}`);
        return;
      }
      setErr(w.message || "Không xóa được.");
    } finally {
      setDeletingId(null);
    }
  }

  function startRename(r: SavedTuViReadingListItem, e: MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    setEditingId(r.id);
    setRenameDraft(r.title?.trim() ?? "");
    setRenameErr(null);
  }

  async function commitRename(id: string, e?: MouseEvent) {
    e?.preventDefault();
    e?.stopPropagation();
    setRenameBusy(true);
    setRenameErr(null);
    try {
      const updated = await updateSavedTuViReadingTitle(id, renameDraft);
      setRows((prev) =>
        (prev ?? []).map((r) => (r.id === id ? { ...r, title: updated.title, updatedAt: updated.updatedAt } : r)),
      );
      setEditingId(null);
    } catch (unknownErr: unknown) {
      const w = unknownErr as WebAuthNormalizedError;
      if (w.status === 401) {
        router.replace(`/login?next=${encodeURIComponent("/account/saved-readings")}`);
        return;
      }
      if (w.status === 403 && w.code === "PHONE_VERIFICATION_REQUIRED") {
        setRenameErr("Cần xác minh SĐT để đổi tiêu đề.");
      } else {
        setRenameErr(w.message || "Không lưu được.");
      }
    } finally {
      setRenameBusy(false);
    }
  }

  function cancelRename(e: MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    setEditingId(null);
    setRenameErr(null);
  }

  if (loading && rows === null) {
    return (
      <div
        className="rounded-xl border border-stone-800/60 bg-stone-950/30 px-5 py-10 text-center text-sm text-stone-500"
        role="status"
        aria-busy="true"
      >
        Đang tải danh sách…
      </div>
    );
  }

  if (!loading && rows === null) {
    return (
      <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 || "Không tải được danh sách."}
      </p>
    );
  }

  if (!rows) {
    return null;
  }

  return (
    <div className="space-y-5">
      <div>
        <label htmlFor="saved-readings-search" className="sr-only">
          Tìm theo tiêu đề hoặc tên
        </label>
        <input
          id="saved-readings-search"
          type="search"
          value={qInput}
          onChange={(e) => setQInput(e.target.value)}
          placeholder="Tìm theo tiêu đề hoặc tên…"
          className="w-full rounded-xl border border-stone-700/60 bg-stone-950/50 px-4 py-2.5 text-sm text-stone-200 placeholder:text-stone-600 focus:border-amber-700/50 focus:outline-none"
        />
        {qInput.trim() !== debouncedQ ? (
          <p className="mt-1 text-[11px] text-stone-600">Đang gõ…</p>
        ) : null}
      </div>

      {err ? (
        <p className="rounded-lg border border-amber-900/40 bg-amber-950/20 px-3 py-2 text-sm text-amber-100/90" role="alert">
          {err}
        </p>
      ) : null}

      {rows.length === 0 ? (
        <div className="rounded-xl border border-stone-800/60 bg-stone-950/30 px-5 py-10 text-center">
          <p className="text-sm text-stone-400">
            {debouncedQ ? "Không có lá số khớp tìm kiếm." : "Chưa có lá số nào lưu trong tài khoản."}
          </p>
          {!debouncedQ ? (
            <>
              <p className="mt-3 text-xs text-stone-500">
                Sau khi xem kết quả (đã đăng nhập và xác minh SĐT), dùng nút{" "}
                <span className="text-stone-300">«Lưu vào tài khoản»</span> trên trang kết quả.
              </p>
              <Link href="/tu-vi" className="ctkp-text-link mt-6 inline-block text-sm">
                Tới trang lập lá số
              </Link>
            </>
          ) : (
            <button
              type="button"
              onClick={() => setQInput("")}
              className="ctkp-text-link mt-4 inline-block text-sm"
            >
              Xóa bộ lọc
            </button>
          )}
        </div>
      ) : (
        <>
          <ul className="space-y-3">
            {rows.map((r) => (
              <li key={r.id} className="rounded-xl border border-stone-800/70 bg-stone-950/35">
                <div className="flex items-stretch gap-0">
                  {editingId === r.id ? (
                    <div className="min-w-0 flex-1 px-4 py-3">
                      <div className="space-y-2">
                        <input
                          value={renameDraft}
                          onChange={(e) => setRenameDraft(e.target.value)}
                          maxLength={300}
                          className="w-full rounded-lg border border-stone-600/60 bg-stone-900/80 px-2 py-1.5 text-sm text-stone-100"
                          autoFocus
                        />
                        {renameErr ? <p className="text-[11px] text-red-300/90">{renameErr}</p> : null}
                        <div className="flex flex-wrap gap-2">
                          <button
                            type="button"
                            disabled={renameBusy}
                            onClick={(e) => void commitRename(r.id, e)}
                            className="rounded-lg border border-emerald-800/50 bg-emerald-950/40 px-2 py-1 text-[11px] text-emerald-100 disabled:opacity-50"
                          >
                            {renameBusy ? "Đang lưu…" : "Lưu tiêu đề"}
                          </button>
                          <button
                            type="button"
                            disabled={renameBusy}
                            onClick={cancelRename}
                            className="rounded-lg border border-stone-600/50 px-2 py-1 text-[11px] text-stone-400"
                          >
                            Hủy
                          </button>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <Link
                      href={`/account/saved-readings/${r.id}`}
                      className="min-w-0 flex-1 px-4 py-3 transition hover:bg-stone-900/40"
                    >
                      <p className="font-medium text-stone-100">
                        {r.title?.trim() || r.personName?.trim() || "Lá số đã lưu"}
                      </p>
                      <p className="mt-1 text-xs text-stone-500">
                        {[r.personName, r.birthDate, r.birthTime, r.gender].filter(Boolean).join(" · ") || "—"}
                      </p>
                      <p className="mt-1 text-[11px] text-stone-600">
                        Tạo: {formatDt(r.createdAt)} · Cập nhật: {formatDt(r.updatedAt)}
                      </p>
                    </Link>
                  )}
                  <div className="flex shrink-0 flex-col items-stretch justify-center gap-1 border-l border-stone-800/60 px-2 py-2">
                    {editingId !== r.id ? (
                      <button
                        type="button"
                        onClick={(e) => startRename(r, e)}
                        className="rounded-lg px-2 py-1.5 text-[11px] text-amber-200/85 underline-offset-2 hover:underline"
                      >
                        Đổi tên
                      </button>
                    ) : null}
                    <button
                      type="button"
                      disabled={deletingId === r.id}
                      onClick={(e) => void onDeleteRow(r.id, e)}
                      className="rounded-lg px-2 py-1.5 text-[11px] text-red-300/90 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50"
                    >
                      {deletingId === r.id ? "Đang xóa…" : "Xóa"}
                    </button>
                  </div>
                </div>
              </li>
            ))}
          </ul>

          {nextCursor ? (
            <div className="flex justify-center pt-2">
              <button
                type="button"
                disabled={loadingMore}
                onClick={() => void loadMore()}
                className="rounded-xl border border-stone-600/55 bg-stone-950/40 px-4 py-2 text-sm text-stone-200 hover:bg-stone-900/60 disabled:opacity-50"
              >
                {loadingMore ? "Đang tải…" : "Tải thêm"}
              </button>
            </div>
          ) : null}
        </>
      )}
    </div>
  );
}

export default function AccountSavedReadingsPage() {
  return (
    <main className="mx-auto max-w-[1100px] flex-1 px-4 py-16 sm:px-8 sm:py-20">
      <article className="mx-auto max-w-lg">
        <header>
          <p className="ctkp-eyebrow tracking-[0.36em]">Tài khoản</p>
          <h1 className="font-ctkp-display mt-3 text-2xl font-semibold text-stone-100">
            Lá số đã lưu (tài khoản)
          </h1>
          <p className="mt-2 text-sm text-stone-500">Chỉ bạn mới xem được các bản ghi này.</p>
        </header>
        <div className="mt-10">
          <RequireAuth>
            <SavedReadingsPanel />
          </RequireAuth>
        </div>
        <p className="mt-10 text-center">
          <Link href="/account" className="ctkp-text-link text-sm">
            ← Tài khoản
          </Link>
        </p>
      </article>
    </main>
  );
}