import { useState, type ComponentType } from 'react';
import { motion } from 'motion/react';
import { Youtube, Instagram, Facebook, Globe, Search, Star, ArrowUpRight } from 'lucide-react';
import { SectionWrapper } from './ui/SectionWrapper';
import { ComparisonRow } from './ui/ComparisonRow';
import type { TransformationProposal as TransformationProposalType, PlatformStrategy } from '../../types/report';

interface TransformationProposalProps {
  data: TransformationProposalType;
}

const tabItems = [
  { key: 'brand', label: 'Brand Identity', labelKr: '브랜드 아이덴티티' },
  { key: 'content', label: 'Content Strategy', labelKr: '콘텐츠 전략' },
  { key: 'platform', label: 'Platform Strategies', labelKr: '플랫폼 전략' },
  { key: 'website', label: 'Website', labelKr: '웹사이트 개선' },
  { key: 'newChannel', label: 'New Channels', labelKr: '신규 채널' },
] as const;

type TabKey = (typeof tabItems)[number]['key'];

const platformIconMap: Record<string, ComponentType<{ size?: number; className?: string }>> = {
  youtube: Youtube,
  instagram: Instagram,
  facebook: Facebook,
  website: Globe,
  blog: Globe,
  naver: Search,
  tiktok: Star,
};

function PlatformStrategyCard({ strategy, index }: { key?: string | number; strategy: PlatformStrategy; index: number }) {
  const Icon = platformIconMap[strategy.icon?.toLowerCase()] ?? Globe;

  return (
    <motion.div
      className="rounded-2xl bg-white border border-slate-100 shadow-sm p-6"
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
    >
      <div className="flex items-center gap-3 mb-4">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#6C5CE7]/10 to-[#4F1DA1]/10 flex items-center justify-center">
          <Icon size={20} className="text-[#6C5CE7]" />
        </div>
        <h4 className="font-bold text-[#0A1128]">{strategy.platform}</h4>
      </div>

      {/* Current to Target */}
      <div className="flex items-center gap-3 mb-4 text-sm">
        <span className="rounded-lg bg-[#FFF0F0] px-3 py-2 text-[#7C3A4B] font-medium">
          {strategy.currentMetric}
        </span>
        <ArrowUpRight size={16} className="text-slate-400" />
        <span className="rounded-lg bg-[#F3F0FF] px-3 py-2 text-[#4A3A7C] font-medium">
          {strategy.targetMetric}
        </span>
      </div>

      {/* Strategy bullets */}
      <ul className="space-y-2">
        {strategy.strategies.map((s, i) => (
          <li key={i} className="flex items-start gap-2">
            <span className="shrink-0 w-2 h-2 rounded-full bg-[#6C5CE7] mt-2" />
            <div>
              <p className="text-sm font-medium text-[#0A1128]">{s.strategy}</p>
              <p className="text-xs text-slate-500">{s.detail}</p>
            </div>
          </li>
        ))}
      </ul>
    </motion.div>
  );
}

const priorityColor: Record<string, string> = {
  high: 'bg-[#FFF0F0] text-[#7C3A4B] border-[#F5D5DC]',
  medium: 'bg-[#FFF6ED] text-[#7C5C3A] border-[#F5E0C5]',
  low: 'bg-[#F3F0FF] text-[#4A3A7C] border-[#D5CDF5]',
  높음: 'bg-[#FFF0F0] text-[#7C3A4B] border-[#F5D5DC]',
  중간: 'bg-[#FFF6ED] text-[#7C5C3A] border-[#F5E0C5]',
  낮음: 'bg-[#F3F0FF] text-[#4A3A7C] border-[#D5CDF5]',
};

export default function TransformationProposal({ data }: TransformationProposalProps) {
  const [activeTab, setActiveTab] = useState<TabKey>('brand');

  return (
    <SectionWrapper id="transformation" title="Transformation Proposal" subtitle="As-Is → To-Be 전환 제안">
      {/* Tabs */}
      <div className="flex flex-wrap gap-2 mb-8">
        {tabItems.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`rounded-full px-4 py-2 text-sm font-medium transition-all ${
              activeTab === tab.key
                ? 'bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white shadow-lg'
                : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Brand Identity */}
      {activeTab === 'brand' && (
        <motion.div
          className="rounded-2xl bg-white border border-slate-100 shadow-sm p-6"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4 }}
        >
          <h3 className="font-serif font-bold text-2xl text-[#0A1128] mb-4">브랜드 아이덴티티</h3>
          {data.brandIdentity.map((item, i) => (
            <ComparisonRow key={i} area={item.area} asIs={item.asIs} toBe={item.toBe} />
          ))}
        </motion.div>
      )}

      {/* Content Strategy */}
      {activeTab === 'content' && (
        <motion.div
          className="rounded-2xl bg-white border border-slate-100 shadow-sm p-6"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4 }}
        >
          <h3 className="font-serif font-bold text-2xl text-[#0A1128] mb-4">콘텐츠 전략</h3>
          {data.contentStrategy.map((item, i) => (
            <ComparisonRow key={i} area={item.area} asIs={item.asIs} toBe={item.toBe} />
          ))}
        </motion.div>
      )}

      {/* Platform Strategies */}
      {activeTab === 'platform' && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {data.platformStrategies.map((strategy, i) => (
            <PlatformStrategyCard key={strategy.platform} strategy={strategy} index={i} />
          ))}
        </div>
      )}

      {/* Website Improvements */}
      {activeTab === 'website' && (
        <motion.div
          className="rounded-2xl bg-white border border-slate-100 shadow-sm p-6"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4 }}
        >
          <h3 className="font-serif font-bold text-2xl text-[#0A1128] mb-4">웹사이트 개선</h3>
          {data.websiteImprovements.map((item, i) => (
            <ComparisonRow key={i} area={item.area} asIs={item.asIs} toBe={item.toBe} />
          ))}
        </motion.div>
      )}

      {/* New Channel Proposals */}
      {activeTab === 'newChannel' && (
        <motion.div
          className="rounded-2xl bg-white border border-slate-100 shadow-sm overflow-hidden"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4 }}
        >
          <table className="w-full text-left">
            <thead>
              <tr className="bg-slate-50 border-b border-slate-100">
                <th className="px-6 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">채널</th>
                <th className="px-6 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">우선순위</th>
                <th className="px-6 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wide">근거</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {data.newChannelProposals.map((ch, i) => (
                <motion.tr
                  key={ch.channel}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3, delay: i * 0.05 }}
                >
                  <td className="px-6 py-4 text-sm font-medium text-[#0A1128]">{ch.channel}</td>
                  <td className="px-6 py-4">
                    <span
                      className={`inline-flex items-center rounded-full text-xs font-medium px-3 py-1 border ${
                        priorityColor[ch.priority.toLowerCase()] ?? 'bg-slate-50 text-slate-700 border-slate-200'
                      }`}
                    >
                      {ch.priority}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-slate-600">{ch.rationale}</td>
                </motion.tr>
              ))}
            </tbody>
          </table>
        </motion.div>
      )}
    </SectionWrapper>
  );
}
