import { useState } from "react";
import { useNavigate } from "react-router-dom";
import DownloadIcon from "@/assets/report/download.svg?react";
import { Button } from "@/components/atoms/Button";
import { useCurrentMarketingPlan } from "@/features/plan/hooks/useCurrentMarketingPlan";

function PlanCtaRocketIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      width={28}
      height={28}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden
    >
      <path
        d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

/** `DEMO/src/components/plan/PlanCTA.tsx` 레이아웃·카피·버튼 구성과 동일 (PDF는 Phase 1 목 동작). */
export function PlanCtaSection() {
  const navigate = useNavigate();
  const { data, error } = useCurrentMarketingPlan();
  const [isExporting, setIsExporting] = useState(false);

  if (error || !data) {
    return null;
  }

  const planId = data.id;

  const exportPdf = () => {
    setIsExporting(true);
    window.setTimeout(() => setIsExporting(false), 900);
  };

  return (
    <section className="py-16 md:py-20 px-6 scroll-mt-36" aria-label="다음 단계 안내">
      <div className="max-w-7xl mx-auto">
        <div
          data-cta-card
          className="rounded-2xl bg-gradient-to-r from-[var(--color-marketing-cream)] via-[var(--color-marketing-lilac)] to-[var(--color-marketing-ice)] p-10 md:p-14 text-center"
        >
          <div className="flex justify-center mb-6">
            <div className="w-14 h-14 rounded-full bg-white/80 backdrop-blur-sm border border-white/40 flex items-center justify-center">
              <PlanCtaRocketIcon className="text-violet-700" />
            </div>
          </div>

          <h3 className="font-serif text-2xl md:text-3xl font-bold text-navy-950 mb-3 break-keep">
            콘텐츠 제작을 시작하세요
          </h3>

          <p className="text-navy-950/60 mb-8 max-w-lg mx-auto break-keep">
            INFINITH가 브랜딩부터 콘텐츠 제작, 채널 배포까지 자동화합니다.
          </p>

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Button
              variant="primary"
              onClick={() => navigate(`/studio/${planId}`)}
              className="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium hover:shadow-lg transition-shadow"
            >
              <span className="break-keep">콘텐츠 제작 시작</span>
            </Button>

            <Button
              variant="outline"
              onClick={exportPdf}
              disabled={isExporting}
              className="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium text-navy-950 shadow-sm hover:shadow-md disabled:opacity-60 disabled:cursor-not-allowed"
            >
              {isExporting ? (
                <span
                  className="w-4 h-4 border-2 border-navy-950 border-t-transparent rounded-full animate-spin shrink-0"
                  aria-hidden
                />
              ) : (
                <DownloadIcon width={16} height={16} className="shrink-0" aria-hidden />
              )}
              <span className="break-keep">플랜 다운로드</span>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}