"use client";

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

import { RequireAuth } from "@/components/auth/RequireAuth";
import { TuViYearlyRevisitSuggestionBlock } from "@/components/account/TuViYearlyRevisitSuggestionBlock";
import { TuViRevisitInsightsSection } from "@/components/account/TuViRevisitInsightsSection";
import {
  accountGateTest,
  getMe,
  type MeUser,
  type WebAuthNormalizedError,
} from "@/lib/web-auth-client";

function formatDt(iso: string | null): string {
  if (!iso) return "—";
  try {
    const d = new Date(iso);
    if (Number.isNaN(d.getTime())) return iso;
    return d.toLocaleString("vi-VN");
  } catch {
    return iso;
  }
}

function AccountPanel() {
  const [me, setMe] = useState<MeUser | null>(null);
  const [loadErr, setLoadErr] = useState<string | null>(null);
  const [gateLoading, setGateLoading] = useState(false);
  const [gateOk, setGateOk] = useState<string | null>(null);
  const [gateErr, setGateErr] = useState<string | null>(null);

  const refreshMe = useCallback(async () => {
    setLoadErr(null);
    try {
      const { user } = await getMe();
      setMe(user);
    } catch (e: unknown) {
      const err = e as WebAuthNormalizedError;
      setLoadErr(err.message || "Không tải được hồ sơ.");
    }
  }, []);

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

  async function onGateTest() {
    setGateOk(null);
    setGateErr(null);
    setGateLoading(true);
    try {
      await accountGateTest();
      setGateOk("Đã qua cổng xác minh SĐT");
    } catch (e: unknown) {
      const err = e as WebAuthNormalizedError;
      if (err.status === 403 && err.code === "PHONE_VERIFICATION_REQUIRED") {
        setGateErr("Cần xác minh số điện thoại (403 PHONE_VERIFICATION_REQUIRED — đúng với backend).");
      } else {
        setGateErr(err.message || "Lỗi không xác định");
      }
    } finally {
      setGateLoading(false);
    }
  }

  if (loadErr) {
    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">
        {loadErr}
      </p>
    );
  }

  if (!me) {
    return <p className="text-center text-sm text-stone-500">Đang tải hồ sơ…</p>;
  }

  return (
    <div className="space-y-10">
      <section className="rounded-2xl border border-amber-950/25 bg-stone-950/35 px-5 py-6 sm:px-7 sm:py-8">
        <h2 className="font-ctkp-display text-lg font-semibold text-amber-100/90">Hồ sơ (GET /auth/me)</h2>
        <dl className="mt-5 space-y-3 text-sm text-stone-300">
          <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
            <dt className="text-stone-500">Tên</dt>
            <dd className="text-stone-200">{me.name?.trim() || "—"}</dd>
          </div>
          <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
            <dt className="text-stone-500">Email</dt>
            <dd className="break-all text-stone-200">{me.email}</dd>
          </div>
          <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
            <dt className="text-stone-500">Vai trò</dt>
            <dd className="text-stone-200">{me.role}</dd>
          </div>
          <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
            <dt className="text-stone-500">Trạng thái</dt>
            <dd className="text-stone-200">{me.status}</dd>
          </div>
          <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
            <dt className="text-stone-500">Số điện thoại (đã ẩn)</dt>
            <dd className="text-stone-200">{me.phoneNumberMasked ?? "—"}</dd>
          </div>
          <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
            <dt className="text-stone-500">Xác minh SĐT lúc</dt>
            <dd className="text-stone-200">{formatDt(me.phoneVerifiedAt)}</dd>
          </div>
          <div className="flex flex-col gap-0.5 sm:flex-row sm:justify-between">
            <dt className="text-stone-500">Cần xác minh SĐT</dt>
            <dd className="text-stone-200">{me.requiresPhoneVerification ? "Có" : "Không"}</dd>
          </div>
        </dl>
        <p className="mt-6 text-center">
          <Link href="/account/saved-readings" className="ctkp-text-link text-sm">
            Lá số đã lưu trong tài khoản →
          </Link>
        </p>
      </section>

      <TuViYearlyRevisitSuggestionBlock />

      <TuViRevisitInsightsSection />

      <section className="rounded-2xl border border-amber-950/25 bg-stone-950/35 px-5 py-6 sm:px-7 sm:py-8">
        <h2 className="font-ctkp-display text-lg font-semibold text-amber-100/90">Cổng API (đã xác minh SĐT)</h2>
        <p className="mt-2 text-xs leading-relaxed text-stone-500">
          Nút gọi <code className="text-amber-200/70">GET /auth/account-gate-test</code> — backend chỉ trả thành công
          sau khi OTP xác minh SĐT xong; trước đó luôn là 403{" "}
          <code className="text-amber-200/70">PHONE_VERIFICATION_REQUIRED</code>.
        </p>
        {me.requiresPhoneVerification ? (
          <p className="mt-2 text-xs text-stone-500">
            Bạn vẫn xem được trang này khi chưa xác minh; nút kiểm tra bên dưới sẽ báo “cần xác minh” cho đến khi hoàn
            tất OTP.
          </p>
        ) : null}
        <button
          type="button"
          disabled={gateLoading}
          onClick={() => void onGateTest()}
          className="mt-4 w-full rounded-xl border border-amber-700/45 bg-amber-950/45 py-2.5 text-sm font-medium text-amber-50/95 transition hover:bg-amber-950/65 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {gateLoading ? "Đang kiểm tra…" : "Kiểm tra quyền truy cập đã xác minh SĐT"}
        </button>
        {gateOk ? (
          <p className="mt-3 text-sm text-emerald-300/90" role="status">
            {gateOk}
          </p>
        ) : null}
        {gateErr ? (
          <p className="mt-3 text-sm text-amber-200/85" role="status">
            {gateErr}
          </p>
        ) : null}
      </section>

      {me.requiresPhoneVerification ? (
        <p className="text-center text-sm text-stone-500">
          <Link href="/verify-phone?next=%2Faccount" className="ctkp-text-link">
            Đi tới xác minh số điện thoại
          </Link>
        </p>
      ) : null}
    </div>
  );
}

export default function AccountPage() {
  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 className="text-center">
          <div className="ctkp-rule mx-auto mb-8 w-20 opacity-80" aria-hidden />
          <p className="ctkp-eyebrow tracking-[0.36em]">Cổ Thư Kỳ Tịch · tài khoản</p>
          <h1 className="font-ctkp-display mt-5 text-[1.85rem] font-semibold leading-tight tracking-tight text-stone-100 sm:text-[2rem]">
            Tài khoản
          </h1>
          <p className="mt-3 text-sm leading-relaxed text-stone-500">Trang beta để xem phiên và thử cổng bảo vệ.</p>
        </header>
        <div className="mt-10">
          <RequireAuth>
            <AccountPanel />
          </RequireAuth>
        </div>
        <p className="mt-12 text-center">
          <Link href="/" className="ctkp-text-link text-sm">
            ← Về trang chủ
          </Link>
        </p>
      </article>
    </main>
  );
}