"use client";

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

import { getApiBaseUrl } from "@/lib/api";
import { postPremiumTuViOrder, getPremiumTuViOrderStatus, getPremiumTuViOrderDelivery } from "@/lib/premium-orders-api";
import { isSoftLaunchClientEnabled } from "@/lib/soft-launch-client";
import sanitizeHtml from "sanitize-html";
import type { TuViPremiumDeepReportV1 } from "@/lib/tuvi-premium-report.v1";
import type { TuViPremiumTeaserV1 } from "@/lib/tuvi-premium-teaser.v1";
import { TUVI_FUNNEL_EVENT, queueTuViFunnelTelemetry } from "@/lib/tuvi-funnel-telemetry.v1";
import { getAccessToken, getMe } from "@/lib/web-auth-client";
import { TuViPremiumDeepReportOutline } from "./TuViPremiumDeepReportOutline";

const PREMIUM_COMING_SOON_HREF = "/premium-coming-soon";
const SOURCE_DEFAULT = "tu_vi_a4_premium_order";

export type TuViA4PremiumConversionProps = {
  readonly teaser: TuViPremiumTeaserV1;
  /** Khi xem lá đã lưu trong tài khoản — gắn lead (cần đăng nhập). */
  readonly premiumSavedReadingId?: string | null;
  /** Soft-launch funnel: không gửi PII — chỉ id lá & năm xem. */
  readonly funnelChartId?: string | null;
  readonly funnelViewingYearSolar?: number | null;
  /** Phase 31 — khi > 0, gửi thêm `recommendation_save_interest` sau premium_interest_success. */
  readonly strategicRecommendationBulletCount?: number;
  /** Phase 32 — mục lục luận sâu (xem trước). */
  readonly premiumDeepReport?: TuViPremiumDeepReportV1 | null;
  className?: string;
};

/** Khối chuyển đổi dưới A4 — học thuật, không áp lực sợ hãi. */
export function TuViA4PremiumConversion({
  teaser,
  premiumSavedReadingId,
  funnelChartId,
  funnelViewingYearSolar,
  strategicRecommendationBulletCount = 0,
  premiumDeepReport = null,
  className,
}: TuViA4PremiumConversionProps) {
  const dialogTitleId = useId();
  const dialogDescId = useId();
  const [open, setOpen] = useState(false);
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [note, setNote] = useState("");
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [submittedOrderId, setSubmittedOrderId] = useState<string | null>(null);
  const [orderStatusLine, setOrderStatusLine] = useState<string | null>(null);
  const [deliveryPreview, setDeliveryPreview] = useState<
    Awaited<ReturnType<typeof getPremiumTuViOrderDelivery>> | null
  >(null);
  const [orderMetaErr, setOrderMetaErr] = useState<string | null>(null);
  const teaserViewSentForChart = useRef<string | null>(null);

  useEffect(() => {
    if (!isSoftLaunchClientEnabled()) return;
    const cid = funnelChartId?.trim();
    if (!cid) return;
    if (teaserViewSentForChart.current === cid) return;
    const token = getAccessToken();
    let cancelled = false;
    const basePayload = {
      source: SOURCE_DEFAULT,
      viewingYearSolar: funnelViewingYearSolar ?? undefined,
      hasAccount: Boolean(token),
    };
    if (!token) {
      teaserViewSentForChart.current = cid;
      queueTuViFunnelTelemetry({
        eventType: TUVI_FUNNEL_EVENT.premium_teaser_view,
        chartId: cid,
        payload: { ...basePayload, phoneVerified: false },
      });
      return;
    }
    void getMe().then(
      ({ user }) => {
        if (cancelled) return;
        teaserViewSentForChart.current = cid;
        queueTuViFunnelTelemetry({
          eventType: TUVI_FUNNEL_EVENT.premium_teaser_view,
          chartId: cid,
          payload: { ...basePayload, hasAccount: true, phoneVerified: user.phoneVerifiedAt != null },
        });
      },
      () => {
        if (cancelled) return;
        teaserViewSentForChart.current = cid;
        queueTuViFunnelTelemetry({
          eventType: TUVI_FUNNEL_EVENT.premium_teaser_view,
          chartId: cid,
          payload: { ...basePayload, hasAccount: true, phoneVerified: false },
        });
      },
    );
    return () => {
      cancelled = true;
    };
  }, [funnelChartId, funnelViewingYearSolar]);

  useEffect(() => {
    if (!open) return;
    setErr(null);
    setDone(false);
    setSubmittedOrderId(null);
    setOrderStatusLine(null);
    setDeliveryPreview(null);
    setOrderMetaErr(null);
    if (!getAccessToken()) return;
    let cancelled = false;
    void (async () => {
      try {
        const { user } = await getMe();
        if (cancelled) return;
        setEmail((prev) => (prev.trim() ? prev : user.email));
      } catch {
        /* ignore — không bắt buộc đăng nhập */
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [open]);

  useEffect(() => {
    if (!done || !submittedOrderId || !getAccessToken()) {
      setOrderStatusLine(null);
      setDeliveryPreview(null);
      setOrderMetaErr(null);
      return;
    }
    let cancelled = false;
    void (async () => {
      setOrderMetaErr(null);
      try {
        const [st, del] = await Promise.all([
          getPremiumTuViOrderStatus(submittedOrderId),
          getPremiumTuViOrderDelivery(submittedOrderId),
        ]);
        if (cancelled) return;
        setOrderStatusLine(`${st.orderStatus}${st.fulfillment ? ` · ${st.fulfillment.status}` : ""}`);
        setDeliveryPreview(del);
      } catch (e) {
        if (!cancelled) {
          setOrderMetaErr(e instanceof Error ? e.message : "Không tải được trạng thái đơn.");
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [done, submittedOrderId]);

  const onSubmit = useCallback(
    async (e: React.FormEvent) => {
      e.preventDefault();
      setErr(null);
      if (!getApiBaseUrl().trim()) {
        setErr("Chưa kết nối được API — kiểm tra cấu hình triển khai.");
        return;
      }
      setBusy(true);
      try {
        const token = getAccessToken();
        if (!token && !email.trim() && !phone.trim()) {
          setErr("Vui lòng nhập ít nhất email hoặc số điện thoại.");
          return;
        }
        if (isSoftLaunchClientEnabled()) {
          queueTuViFunnelTelemetry({
            eventType: TUVI_FUNNEL_EVENT.premium_interest_submit,
            chartId: funnelChartId?.trim() || undefined,
            payload: {
              source: SOURCE_DEFAULT,
              viewingYearSolar: funnelViewingYearSolar ?? undefined,
              hasAccount: Boolean(token),
              ...(premiumSavedReadingId?.trim() && token ?
                { savedReadingId: premiumSavedReadingId.trim() }
              : {}),
            },
          });
        }
        const created = await postPremiumTuViOrder({
          ...(premiumSavedReadingId?.trim() && token ? { savedReadingId: premiumSavedReadingId.trim() } : {}),
          ...(email.trim() ? { email: email.trim() } : {}),
          ...(phone.trim() ? { phone: phone.trim() } : {}),
          ...(note.trim() ? { note: note.trim() } : {}),
          source: SOURCE_DEFAULT,
        });
        setSubmittedOrderId(created.id);
        setDone(true);
        if (isSoftLaunchClientEnabled()) {
          queueTuViFunnelTelemetry({
            eventType: TUVI_FUNNEL_EVENT.premium_interest_success,
            chartId: funnelChartId?.trim() || undefined,
            payload: {
              source: SOURCE_DEFAULT,
              viewingYearSolar: funnelViewingYearSolar ?? undefined,
              hasAccount: Boolean(token),
              ...(premiumSavedReadingId?.trim() && token ?
                { savedReadingId: premiumSavedReadingId.trim() }
              : {}),
            },
          });
          const srN = Math.trunc(Number(strategicRecommendationBulletCount));
          if (srN > 0) {
            queueTuViFunnelTelemetry({
              eventType: TUVI_FUNNEL_EVENT.recommendation_save_interest,
              chartId: funnelChartId?.trim() || undefined,
              payload: {
                source: SOURCE_DEFAULT,
                viewingYearSolar: funnelViewingYearSolar ?? undefined,
                strategicRecBulletCount: srN,
              },
            });
          }
        }
      } catch (er) {
        if (isSoftLaunchClientEnabled()) {
          queueTuViFunnelTelemetry({
            eventType: TUVI_FUNNEL_EVENT.premium_interest_failed,
            chartId: funnelChartId?.trim() || undefined,
            payload: {
              source: SOURCE_DEFAULT,
              errorCode: er instanceof Error ? er.message.slice(0, 64) : "unknown",
            },
          });
        }
        setErr(er instanceof Error ? er.message : String(er));
      } finally {
        setBusy(false);
      }
    },
    [email, funnelChartId, funnelViewingYearSolar, note, phone, premiumSavedReadingId, strategicRecommendationBulletCount],
  );

  return (
    <>
      <aside
        aria-label="Phần luận sâu dự kiến"
        className={`motion-safe:ctkp-fade-in-slow mx-auto max-w-[46rem] rounded-lg border border-[color:rgba(90,72,52,0.28)] bg-[rgba(8,10,18,0.35)] px-4 py-6 sm:px-6 sm:py-7 md:px-8 ${className ?? ""}`}
      >
        {premiumDeepReport ?
          <TuViPremiumDeepReportOutline report={premiumDeepReport} className="mb-8 -mt-1 border-0 bg-transparent px-0 py-0" />
        : null}
        <h3 className="text-center font-ctkp-serif text-[0.95rem] font-semibold tracking-[0.08em] text-[color:var(--ctkp-narrative-ink-strong)] sm:text-[1.05rem]">
          Phần luận sâu có thể mở tiếp
        </h3>
        <p className="mx-auto mt-4 max-w-prose text-center font-ctkp-serif text-[14px] leading-[1.85] text-[color:var(--ctkp-narrative-ink)] text-pretty sm:text-[15px]">
          {teaser.headline}
        </p>

        <div className="mt-6 grid gap-6 sm:grid-cols-2 sm:gap-8">
          <div>
            <p className="font-ctkp-serif text-[10px] font-semibold uppercase tracking-[0.2em] text-[color:var(--ctkp-narrative-caption)]">
              Bạn đã có trong phiên này
            </p>
            <ul className="mt-3 list-disc space-y-2 pl-5 font-ctkp-serif text-[13px] leading-[1.75] text-[color:var(--ctkp-narrative-ink)] sm:text-[14px]">
              {teaser.unlockedNow.map((line, i) => (
                <li key={`u-${i}`} className="text-pretty">
                  {line}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <p className="font-ctkp-serif text-[10px] font-semibold uppercase tracking-[0.2em] text-[color:var(--ctkp-narrative-caption)]">
              Luận chuyên sâu dự kiến mở rộng
            </p>
            <ul className="mt-3 list-disc space-y-2 pl-5 font-ctkp-serif text-[13px] leading-[1.75] text-[color:var(--ctkp-narrative-ink)] sm:text-[14px]">
              {teaser.premiumDepth.map((line, i) => (
                <li key={`p-${i}`} className="text-pretty">
                  {line}
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-6 border-t border-[color:rgba(90,72,52,0.2)] pt-5">
          <p className="text-center font-ctkp-serif text-[10px] font-semibold uppercase tracking-[0.18em] text-[color:var(--ctkp-narrative-caption)]">
            Gợi ý câu hỏi để đào sâu
          </p>
          <ul className="mx-auto mt-3 max-w-prose list-decimal space-y-2 pl-5 font-ctkp-serif text-[13px] leading-[1.78] text-[color:var(--ctkp-narrative-ink)] sm:text-[14px]">
            {teaser.recommendedNextQuestions.map((q, i) => (
              <li key={`q-${i}`} className="text-pretty pl-1">
                {q}
              </li>
            ))}
          </ul>
        </div>

        <div className="mt-6 flex flex-col items-center gap-2">
          <button
            type="button"
            onClick={() => {
              setOpen(true);
              if (isSoftLaunchClientEnabled()) {
                const token = getAccessToken();
                queueTuViFunnelTelemetry({
                  eventType: TUVI_FUNNEL_EVENT.premium_interest_open,
                  chartId: funnelChartId?.trim() || undefined,
                  payload: {
                    source: SOURCE_DEFAULT,
                    viewingYearSolar: funnelViewingYearSolar ?? undefined,
                    hasAccount: Boolean(token),
                    ...(premiumSavedReadingId?.trim() && token ?
                      { savedReadingId: premiumSavedReadingId.trim() }
                    : {}),
                  },
                });
              }
            }}
            className="inline-flex min-h-[44px] items-center justify-center rounded-sm border border-[color:rgba(212,175,55,0.38)] bg-[rgba(212,175,55,0.1)] px-6 py-2.5 text-center font-ctkp-serif text-[12px] font-medium tracking-[0.1em] text-[#f5ebd6] transition-colors hover:border-[color:rgba(212,175,55,0.5)] hover:bg-[rgba(212,175,55,0.16)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:rgba(212,175,55,0.45)] active:translate-y-px sm:text-[13px]"
          >
            {teaser.ctaLabel}
          </button>
          <Link
            href={PREMIUM_COMING_SOON_HREF}
            className="font-sans text-[11px] text-[color:var(--ctkp-narrative-caption)] underline-offset-4 hover:text-[#d4af37]/85 hover:underline"
          >
            Giới thiệu gói luận sâu (beta)
          </Link>
          <p className="max-w-md text-center font-sans text-[11px] leading-relaxed text-[color:var(--ctkp-narrative-caption)] opacity-90">
            Đặt yêu cầu tư vấn — chưa mở thanh toán trực tuyến trên trang này.
          </p>
        </div>
      </aside>

      {open ?
        <div
          className="fixed inset-0 z-[80] flex items-end justify-center bg-black/55 p-4 sm:items-center"
          role="presentation"
          onMouseDown={(ev) => {
            if (ev.target === ev.currentTarget) setOpen(false);
          }}
        >
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby={dialogTitleId}
            aria-describedby={dialogDescId}
            className="max-h-[min(92vh,640px)] w-full max-w-md overflow-y-auto rounded-xl border border-[color:rgba(90,72,52,0.35)] bg-[#0a0e18] px-4 py-5 shadow-xl sm:px-5"
            onMouseDown={(e) => e.stopPropagation()}
          >
            <h4 id={dialogTitleId} className="font-ctkp-serif text-[15px] font-semibold tracking-[0.06em] text-[#f0e6bc]">
              Yêu cầu tư vấn gói luận sâu
            </h4>
            <p id={dialogDescId} className="mt-2 font-sans text-[12px] leading-relaxed text-slate-400">
              Chưa có thanh toán trực tuyến — chúng tôi ghi nhận yêu cầu và sẽ liên hệ khi gói mở nhận. Vui lòng để lại ít
              nhất email hoặc điện thoại.
            </p>

            {done ?
              <div className="mt-5 space-y-4">
                <p className="rounded-lg border border-emerald-800/35 bg-emerald-950/25 px-3 py-3 font-sans text-[13px] leading-relaxed text-emerald-100/95">
                  Đã ghi nhận yêu cầu. Chúng tôi sẽ liên hệ khi gói luận sâu mở nhận.
                  {submittedOrderId ?
                    <span className="mt-2 block font-mono text-[11px] text-emerald-200/80">Mã đơn: {submittedOrderId}</span>
                  : null}
                </p>
                {getAccessToken() && submittedOrderId ?
                  <div className="rounded-lg border border-stone-600/40 bg-stone-950/40 px-3 py-3">
                    <p className="font-sans text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                      Trạng thái & bản giao (beta)
                    </p>
                    {orderMetaErr ?
                      <p className="mt-2 font-sans text-[12px] text-amber-200/90">{orderMetaErr}</p>
                    : null}
                    {orderStatusLine ?
                      <p className="mt-2 font-sans text-[12px] text-slate-200">Đơn: {orderStatusLine}</p>
                    : null}
                    {deliveryPreview && deliveryPreview.artifacts.length > 0 ?
                      <div className="mt-3 space-y-3">
                        {deliveryPreview.artifacts.map((a) => (
                          <div
                            key={a.id}
                            className="rounded-md border border-stone-700/50 bg-black/20 px-2 py-2"
                          >
                            <p className="font-ctkp-serif text-[13px] text-[#e8dcc4]">{a.title}</p>
                            <p className="font-mono text-[10px] text-slate-500">
                              {a.type} · {a.status}
                            </p>
                            {"contentMarkdown" in a && a.contentMarkdown ?
                              <pre className="mt-2 max-h-48 overflow-auto whitespace-pre-wrap font-sans text-[12px] leading-relaxed text-slate-200">
                                {a.contentMarkdown}
                              </pre>
                            : null}
                            {"contentHtml" in a && a.contentHtml ?
                              <div
                                className="premium-delivery-html mt-2 max-h-48 overflow-auto font-sans text-[12px] leading-relaxed text-slate-200 [&_a]:text-sky-300"
                                // safe HTML — limited tags from sanitize-html
                                dangerouslySetInnerHTML={{
                                  __html: sanitizeHtml(a.contentHtml, {
                                    allowedTags: ["p", "br", "strong", "em", "b", "i", "ul", "ol", "li", "h2", "h3", "blockquote", "a"],
                                    allowedAttributes: { a: ["href", "target", "rel"] },
                                    transformTags: {
                                      a: sanitizeHtml.simpleTransform("a", { rel: "noopener noreferrer" }),
                                    },
                                  }),
                                }}
                              />
                            : null}
                            {"externalUrl" in a && a.externalUrl ?
                              <a
                                href={a.externalUrl}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="mt-2 inline-block text-[12px] text-sky-300 underline"
                              >
                                Mở liên kết tài liệu
                              </a>
                            : null}
                          </div>
                        ))}
                      </div>
                    : getAccessToken() && submittedOrderId && !orderMetaErr ?
                      <p className="mt-2 font-sans text-[11px] text-slate-500">
                        Chưa có bản sẵn sàng (READY) — khi đội ngũ xuất bản, nội dung sẽ hiện tại đây.
                      </p>
                    : null}
                  </div>
                : null}
              </div>
            : (
              <form onSubmit={(e) => void onSubmit(e)} className="mt-4 space-y-3">
                <label className="block">
                  <span className="font-sans text-[11px] text-slate-500">Email</span>
                  <input
                    type="email"
                    name="email"
                    autoComplete="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="mt-1 w-full rounded-lg border border-stone-600/50 bg-stone-950/80 px-3 py-2 font-sans text-[13px] text-stone-100"
                    placeholder="neu@vidu.com"
                  />
                </label>
                <label className="block">
                  <span className="font-sans text-[11px] text-slate-500">Điện thoại (VN, 0… hoặc +84…)</span>
                  <input
                    type="tel"
                    name="phone"
                    autoComplete="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    className="mt-1 w-full rounded-lg border border-stone-600/50 bg-stone-950/80 px-3 py-2 font-sans text-[13px] text-stone-100"
                    placeholder="0912345678"
                  />
                </label>
                <label className="block">
                  <span className="font-sans text-[11px] text-slate-500">Ghi chú (tuỳ chọn)</span>
                  <textarea
                    name="note"
                    rows={3}
                    value={note}
                    onChange={(e) => setNote(e.target.value)}
                    className="mt-1 w-full resize-y rounded-lg border border-stone-600/50 bg-stone-950/80 px-3 py-2 font-sans text-[13px] text-stone-100"
                    placeholder="Câu hỏi hoặc trọng tâm bạn muốn luận sâu hơn…"
                    maxLength={4000}
                  />
                </label>
                {premiumSavedReadingId && getAccessToken() ?
                  <p className="font-sans text-[11px] text-slate-500">Gắn với lá đã lưu trong tài khoản.</p>
                : null}
                {err ?
                  <p className="rounded-lg border border-red-900/35 bg-red-950/20 px-3 py-2 font-sans text-[12px] text-red-100/90" role="alert">
                    {err}
                  </p>
                : null}
                <div className="flex flex-wrap gap-2 pt-1">
                  <button
                    type="submit"
                    disabled={busy}
                    className="min-h-[40px] flex-1 rounded-lg border border-[#d4af37]/40 bg-[#d4af37]/12 px-4 py-2 font-ctkp-serif text-[12px] font-medium tracking-[0.08em] text-[#f5ebd6] disabled:opacity-50"
                  >
                    {busy ? "Đang gửi…" : "Gửi yêu cầu"}
                  </button>
                  <button
                    type="button"
                    disabled={busy}
                    onClick={() => setOpen(false)}
                    className="min-h-[40px] rounded-lg border border-stone-600/50 px-4 py-2 font-sans text-[12px] text-slate-300 hover:bg-stone-900/50 disabled:opacity-50"
                  >
                    Đóng
                  </button>
                </div>
              </form>
            )}

            {done ?
              <button
                type="button"
                className="mt-4 w-full rounded-lg border border-stone-600/50 py-2 font-sans text-[12px] text-slate-300 hover:bg-stone-900/50"
                onClick={() => setOpen(false)}
              >
                Đóng
              </button>
            : null}
          </div>
        </div>
      : null}
    </>
  );
}