import { motion } from 'motion/react';
import { useNavigate, useParams } from 'react-router';
import { FileText, FileSpreadsheet, ChevronDown } from 'lucide-react';
import { RocketFilled, DownloadFilled } from '@/shared/icons/FilledIcons';
import { Button } from '@/shared/ui/button';
import { PageContainer } from '@/shared/ui/page-container';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@/shared/ui/dropdown-menu';
import { useExportPDF } from '@/features/report/hooks/useExportPDF';
import { useExportPlanCSV } from '@/features/plan/hooks/useExportPlanCSV';
import type { MarketingPlan } from '@/features/plan/types/plan';

interface PlanCTAProps {
  /** 전체 기획 — CSV 내보내기에 사용 */
  plan?: MarketingPlan;
}

export default function PlanCTA({ plan }: PlanCTAProps = {}) {
  const { exportPDF, isExporting } = useExportPDF();
  const { exportPlanCSV } = useExportPlanCSV();
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const baseFilename = 'INFINITH_Marketing_Plan';

  return (
    <motion.section
      className="py-16 md:py-20 px-6"
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: 'easeOut' }}
    >
      <PageContainer className="px-0">
        <div
          data-cta-card
          className="rounded-2xl bg-gradient-to-r from-brand-grad-peach via-brand-grad-violet to-brand-grad-sky 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">
              <RocketFilled size={28} className="text-brand-purple" />
            </div>
          </div>

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

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

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Button
              type="button"
              onClick={() => navigate(`/studio/${id || 'live'}`)}
              className="inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-brand-purple to-brand-purple-deep px-6 py-3 h-auto text-sm font-medium text-white shadow-md hover:shadow-lg hover:from-brand-purple hover:to-brand-purple-deep transition-shadow"
            >
              콘텐츠 제작 시작
            </Button>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  type="button"
                  variant="outline"
                  disabled={isExporting}
                  className="inline-flex items-center justify-center gap-2 rounded-full bg-white border-slate-200 px-6 py-3 h-auto text-sm font-medium text-brand-purple-deep shadow-sm hover:shadow-md hover:bg-white transition-shadow disabled:opacity-60"
                >
                  {isExporting ? (
                    <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
                    </svg>
                  ) : (
                    <DownloadFilled size={16} />
                  )}
                  플랜 다운로드
                  <ChevronDown size={14} className="opacity-70" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem onSelect={() => exportPDF(baseFilename)}>
                  <FileText size={14} className="text-slate-500" />
                  <span>PDF로 저장</span>
                </DropdownMenuItem>
                <DropdownMenuItem
                  disabled={!plan}
                  onSelect={() => plan && exportPlanCSV(baseFilename, plan)}
                >
                  <FileSpreadsheet size={14} className="text-slate-500" />
                  <span>CSV로 저장</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </PageContainer>
    </motion.section>
  );
}
