import { useState } from 'react';
import {
  YoutubeFilled,
  InstagramFilled,
  FacebookFilled,
  GlobeFilled,
  TiktokFilled,
  VideoFilled,
  RefreshFilled,
  BoltFilled,
} from '@/shared/icons/FilledIcons';
import { SectionWrapper } from '@/features/report/components/ui/SectionWrapper';
import { Button } from '@/shared/ui/button';
import type { RepurposingProposalItem } from '@/features/plan/types/plan';

interface RepurposingProposalProps {
  proposals: RepurposingProposalItem[];
}

// 채널 키워드 → FilledIcon 매핑
function ChannelIcon({ channel, size = 14 }: { channel: string; size?: number }) {
  const lower = channel.toLowerCase();
  const className = 'shrink-0';
  if (lower.includes('youtube')) return <YoutubeFilled size={size} className={className} />;
  if (lower.includes('instagram')) return <InstagramFilled size={size} className={className} />;
  if (lower.includes('facebook')) return <FacebookFilled size={size} className={className} />;
  if (lower.includes('tiktok')) return <TiktokFilled size={size} className={className} />;
  if (lower.includes('naver') || lower.includes('blog')) return <GlobeFilled size={size} className={className} />;
  return <VideoFilled size={size} className={className} />;
}

const effortConfig: Record<string, { label: string; bg: string; text: string; border: string }> = {
  low:    { label: '빠른 작업', bg: 'bg-brand-tint-purple', text: 'text-brand-purple-muted', border: 'border-brand-tint-lavender' },
  medium: { label: '중간 작업', bg: 'bg-brand-earth-bg', text: 'text-brand-earth', border: 'border-brand-earth-soft' },
  high:   { label: '집중 작업', bg: 'bg-brand-rose-bg', text: 'text-brand-rose', border: 'border-brand-rose-soft' },
};

const priorityConfig: Record<string, { label: string; dot: string }> = {
  high:   { label: 'P0', dot: 'bg-brand-rose-mid' },
  medium: { label: 'P1', dot: 'bg-[#D4A872]' },
  low:    { label: 'P2', dot: 'bg-brand-purple-soft' },
};

function formatViews(views: number): string {
  if (views >= 1_000_000) return `${(views / 1_000_000).toFixed(1)}M`;
  if (views >= 1_000) return `${Math.round(views / 1_000)}K`;
  return String(views);
}

export default function RepurposingProposal({ proposals }: RepurposingProposalProps) {
  const [expandedIdx, setExpandedIdx] = useState<number | null>(0);

  return (
    <SectionWrapper
      id="repurposing-proposal"
      title="Repurposing Proposal"
      subtitle="콘텐츠 리퍼포징 제안"
    >
      <div className="space-y-4">
        {proposals.map((item, idx) => {
          const effort = effortConfig[item.estimatedEffort];
          const priority = priorityConfig[item.priority];
          const isExpanded = expandedIdx === idx;

          return (
            <div
              key={item.sourceVideo.title}
              className="rounded-2xl border border-slate-100 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] overflow-hidden"
            >
              {/* Card Header — click to expand */}
              <Button
                type="button"
                variant="ghost"
                className="w-full flex items-center gap-4 px-6 py-4 h-auto text-left hover:bg-slate-50/50 rounded-none"
                onClick={() => setExpandedIdx(isExpanded ? null : idx)}
              >
                {/* Source video info */}
                <div className="w-10 h-10 rounded-xl bg-brand-tint-purple flex items-center justify-center shrink-0">
                  <YoutubeFilled size={20} className="text-brand-purple-vivid" />
                </div>

                <div className="flex-1 min-w-0">
                  <p className="font-bold text-brand-navy text-sm truncate">{item.sourceVideo.title}</p>
                  <div className="flex items-center gap-2 mt-1">
                    <span className="text-xs text-slate-500">{formatViews(item.sourceVideo.views)} views</span>
                    <span className="w-1 h-1 rounded-full bg-slate-300" />
                    <span className="text-xs text-slate-500">{item.sourceVideo.type === 'Short' ? 'Shorts' : 'Long-form'}</span>
                  </div>
                </div>

                {/* Badges */}
                <div className="flex items-center gap-2 shrink-0">
                  {/* Output count */}
                  <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-brand-tint-purple border border-brand-tint-lavender">
                    <RefreshFilled size={11} className="text-brand-purple-vivid" />
                    <span className="text-xs font-semibold text-brand-purple-muted">{item.outputs.length}개 포맷</span>
                  </div>

                  {/* Effort */}
                  <span className={`text-xs font-medium px-2.5 py-1 rounded-full border ${effort.bg} ${effort.text} ${effort.border} hidden sm:inline-flex`}>
                    {effort.label}
                  </span>

                  {/* Priority */}
                  <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-50 border border-slate-200">
                    <span className={`w-1.5 h-1.5 rounded-full ${priority.dot}`} />
                    <span className="text-xs font-bold text-slate-600">{priority.label}</span>
                  </div>

                  {/* Chevron */}
                  <svg
                    className={`w-4 h-4 text-slate-400 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
                    fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                  </svg>
                </div>
              </Button>

              {/* Expanded: Repurpose outputs */}
              {isExpanded && (
                <div className="border-t border-slate-100">
                  <div className="px-6 py-4">
                    <div className="flex items-center gap-2 mb-4">
                      <BoltFilled size={14} className="text-brand-purple-vivid" />
                      <p className="text-xs font-semibold text-slate-500 uppercase tracking-widest">REPURPOSE AS</p>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      {item.outputs.map((output) => (
                        <div
                          key={output.format}
                          className="flex items-start gap-3 p-4 rounded-xl bg-slate-50 border border-slate-100"
                        >
                          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-purple-vivid/10 to-brand-purple/10 flex items-center justify-center shrink-0">
                            <ChannelIcon channel={output.channel} size={16} />
                          </div>
                          <div className="min-w-0">
                            <p className="font-semibold text-brand-navy text-sm">{output.format}</p>
                            <p className="text-xs text-brand-purple-vivid font-medium mb-1">{output.channel}</p>
                            <p className="text-xs text-slate-500 leading-relaxed">{output.description}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </SectionWrapper>
  );
}
