import type { AssetSourceType } from '../../types/studio';

interface Props {
  selectedPillar: string | null;
  selectedSources: AssetSourceType[];
  onPillarSelect: (id: string | null) => void;
  onSourceToggle: (source: AssetSourceType) => void;
}

const PILLARS = [
  { id: 'safety', title: '안전과 신뢰', description: '수술 안전 시스템, 21년 무사고, CCTV, 마취과 전문의 상주', color: '#6C5CE7' },
  { id: 'expertise', title: '전문성과 기술력', description: '분야별 전문의, 최신 장비, 논문 실적, 학회 활동', color: '#7A84D4' },
  { id: 'results', title: '자연스러운 결과', description: '비포/애프터, 환자 후기, 한번에 성공하는 성형', color: '#9B8AD4' },
  { id: 'care', title: '환자 중심 케어', description: '상담 프로세스, 사후 관리, 1:1 맞춤 플랜', color: '#D4A872' },
];

const SOURCES: { key: AssetSourceType; title: string; description: string }[] = [
  { key: 'collected', title: '수집된 에셋', description: '홈페이지, 블로그, SNS에서 수집한 기존 에셋' },
  { key: 'my_assets', title: '나의 소재', description: '직접 업로드한 이미지, 영상, 텍스트 파일' },
  { key: 'ai_generated', title: 'AI 생성', description: 'AI가 새로 생성하는 이미지, 텍스트, 영상' },
];

export default function StrategySourceStep({ selectedPillar, selectedSources, onPillarSelect, onSourceToggle }: Props) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
      {/* Pillar Selection */}
      <div>
        <h3 className="font-serif font-bold text-2xl text-[#0A1128] mb-2">콘텐츠 전략</h3>
        <p className="text-sm text-slate-500 mb-6">콘텐츠의 핵심 메시지 필러를 선택하세요</p>

        <div className="space-y-3">
          {PILLARS.map(pillar => {
            const isSelected = selectedPillar === pillar.id;
            return (
              <button
                key={pillar.id}
                onClick={() => onPillarSelect(isSelected ? null : pillar.id)}
                className={`w-full text-left relative p-5 rounded-2xl border-2 transition-all ${
                  isSelected
                    ? 'border-[#6C5CE7] bg-[#F3F0FF]/30 shadow-[3px_4px_12px_rgba(108,92,231,0.12)]'
                    : 'border-slate-100 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:border-[#D5CDF5]'
                }`}
              >
                {isSelected && (
                  <div className="absolute top-4 right-4 w-5 h-5 rounded-full bg-[#6C5CE7] flex items-center justify-center">
                    <svg width="10" height="10" viewBox="0 0 14 14" fill="none">
                      <path d="M2 7L5.5 10.5L12 3.5" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                )}
                <div className="flex items-start gap-3">
                  <div
                    className="w-1 h-10 rounded-full shrink-0 mt-1"
                    style={{ backgroundColor: pillar.color }}
                  />
                  <div>
                    <h4 className="font-semibold text-[#0A1128] mb-1">{pillar.title}</h4>
                    <p className="text-sm text-slate-500">{pillar.description}</p>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Source Selection */}
      <div>
        <h3 className="font-serif font-bold text-2xl text-[#0A1128] mb-2">소스 선택</h3>
        <p className="text-sm text-slate-500 mb-6">콘텐츠에 사용할 에셋 소스를 선택하세요 (복수 선택)</p>

        <div className="space-y-3">
          {SOURCES.map(source => {
            const isSelected = selectedSources.includes(source.key);
            return (
              <button
                key={source.key}
                onClick={() => onSourceToggle(source.key)}
                className={`w-full text-left relative p-5 rounded-2xl border-2 transition-all ${
                  isSelected
                    ? 'border-[#6C5CE7] bg-[#F3F0FF]/30 shadow-[3px_4px_12px_rgba(108,92,231,0.12)]'
                    : 'border-slate-100 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:border-[#D5CDF5]'
                }`}
              >
                <div className="flex items-center gap-3">
                  <div className={`w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-all ${
                    isSelected
                      ? 'border-[#6C5CE7] bg-[#6C5CE7]'
                      : 'border-slate-300 bg-white'
                  }`}>
                    {isSelected && (
                      <svg width="10" height="10" viewBox="0 0 14 14" fill="none">
                        <path d="M2 7L5.5 10.5L12 3.5" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    )}
                  </div>
                  <div>
                    <h4 className="font-semibold text-[#0A1128] mb-1">{source.title}</h4>
                    <p className="text-sm text-slate-500">{source.description}</p>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}
