"use client";

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

import {
  getYearlyRevisitRecommendation,
  type YearlyRevisitRecommendationPayloadV1,
} from "@/lib/saved-tu-vi-readings-api";
import { isSoftLaunchClientEnabled } from "@/lib/soft-launch-client";
import { setYearlyRevisitIntentInSession } from "@/lib/tuvi-yearly-revisit-intent.v1";
import { pickTuViFunnelPayload, queueTuViFunnelTelemetry, TUVI_FUNNEL_EVENT } from "@/lib/tuvi-funnel-telemetry.v1";

export function TuViYearlyRevisitSuggestionBlock() {
  const [rec, setRec] = useState<YearlyRevisitRecommendationPayloadV1 | null>(null);
  const [phase, setPhase] = useState<"idle" | "loading" | "err">("idle");
  const viewSent = useRef(false);

  useEffect(() => {
    let cancel = false;
    setPhase("loading");
    void (async () => {
      try {
        const r = await getYearlyRevisitRecommendation();
        if (cancel) return;
        setRec(r.recommendation);
        setPhase("idle");
        const payload = r.recommendation;
        if (isSoftLaunchClientEnabled() && payload && !viewSent.current) {
          viewSent.current = true;
          queueTuViFunnelTelemetry({
            eventType: TUVI_FUNNEL_EVENT.revisit_recommendation_view,
            payload: pickTuViFunnelPayload({
              source: "account_yearly_revisit",
              path: "/account",
              recommendedViewingYear: payload.recommendedViewingYear,
              yearlyRevisitReasonCount: payload.reasonKeys.length,
            }),
          });
        }
      } catch {
        if (!cancel) setPhase("err");
      }
    })();
    return () => {
      cancel = true;
    };
  }, []);

  const onCta = useCallback((y: number, nReasons: number) => {
    setYearlyRevisitIntentInSession(y);
    if (isSoftLaunchClientEnabled()) {
      queueTuViFunnelTelemetry({
        eventType: TUVI_FUNNEL_EVENT.revisit_recommendation_click,
        payload: pickTuViFunnelPayload({
          source: "account_yearly_revisit",
          path: "/account",
          recommendedViewingYear: y,
          yearlyRevisitReasonCount: nReasons,
        }),
      });
    }
  }, []);

  if (phase === "loading" && !rec) {
    return (
      <section className="rounded-2xl border border-amber-950/20 bg-stone-950/25 px-4 py-4 sm:px-5">
        <p className="text-xs text-stone-500">Đang kiểm tra gợi ý năm xem…</p>
      </section>
    );
  }

  if (phase === "err" || !rec) return null;

  const y = rec.recommendedViewingYear;
  const href = `/tu-vi?namXem=${encodeURIComponent(String(y))}`;

  return (
    <section className="rounded-2xl border border-emerald-900/30 bg-emerald-950/20 px-4 py-4 sm:px-5">
      <h2 className="font-ctkp-display text-base font-semibold text-emerald-100/90">Gợi ý xem lại năm vận</h2>
      <p className="mt-2 text-[13px] leading-snug text-stone-300">{rec.suggestedHeadline}</p>
      <p className="mt-3 text-[11px] font-medium uppercase tracking-wide text-stone-500">
        Năm quan sát đề xuất: <span className="text-emerald-200/90">{y}</span>
      </p>
      {rec.suggestedFocusAreas.length ? (
        <ul className="mt-2 list-inside list-disc space-y-1 text-[12px] leading-snug text-stone-400">
          {rec.suggestedFocusAreas.map((line) => (
            <li key={line}>{line}</li>
          ))}
        </ul>
      ) : null}
      <p className="mt-4">
        <Link
          href={href}
          onClick={() => onCta(y, rec.reasonKeys.length)}
          className="ctkp-text-link text-sm font-medium"
        >
          Xem lại lá số cho năm {y} →
        </Link>
      </p>
    </section>
  );
}