"use client";

import { useMemo, useState } from "react";
import { useTrack } from "@/hooks/use-track";
import { TRACKING_EVENTS } from "@/lib/tracking-events";
import { useAuth } from "@/components/auth-provider";

export function UnlockWorkflow() {
  const [code, setCode] = useState("");
  const [step, setStep] = useState<"idle" | "checking" | "valid" | "invalid">("idle");
  const { track } = useTrack();
  const { setAccessLevel } = useAuth();

  const hint = useMemo(() => {
    if (step === "checking") return "正在校验解锁码...";
    if (step === "valid") return "验证成功，已解锁高级下载入口（模拟）。";
    if (step === "invalid") return "解锁码无效，请关注公众号回复“下载”获取。";
    return "输入公众号返回的解锁码，体验后端接入前的完整交互流程。";
  }, [step]);

  const verify = () => {
    setStep("checking");
    track(TRACKING_EVENTS.unlockSubmit, { codeLength: code.length });
    setTimeout(() => {
      const pass = code.trim().toUpperCase() === "DOWNLOAD2026";
      setStep(pass ? "valid" : "invalid");
      track(TRACKING_EVENTS.unlockResult, { success: pass });
      if (pass) setAccessLevel("unlocked");
    }, 600);
  };

  return (
    <div className="card-glass space-y-4">
      <h3 className="text-lg font-semibold">解锁码验证（前端状态机）</h3>
      <div className="flex flex-col gap-3 md:flex-row">
        <input
          className="input-fancy"
          placeholder="请输入解锁码，例如 DOWNLOAD2026"
          value={code}
          onChange={(e) => setCode(e.target.value)}
        />
        <button onClick={verify} className="cta-main whitespace-nowrap">
          立即验证
        </button>
      </div>
      <p className="text-sm text-slate-300">{hint}</p>
      <div className="flex flex-wrap gap-2">
        <button className="cta-sub" onClick={() => track(TRACKING_EVENTS.ctaClick, { location: "unlock", target: "group" })}>加入交流群</button>
        <button className="cta-sub" onClick={() => track(TRACKING_EVENTS.ctaClick, { location: "unlock", target: "vip" })}>开通 VIP（预留）</button>
      </div>
    </div>
  );
}