import { useState, useCallback } from 'react';
import { motion } from 'motion/react';
import { FileTextFilled } from '../icons/FilledIcons';
import type { StudioState } from '../../types/studio';
import { CHANNEL_OPTIONS } from '../../types/studio';
import { generateImage, type GenerateResult } from '../../services/geminiImageGen';

interface Props {
  studioState: StudioState;
}

type GenStatus = 'idle' | 'generating' | 'done' | 'error';

const PLACEHOLDER_BLOG = `# 한번에 성공하는 코성형, VIEW의 비결

코성형은 얼굴의 중심을 결정하는 중요한 수술입니다. VIEW 성형외과는 21년간 축적된 노하우를 바탕으로, 환자 개개인의 얼굴 비율과 피부 특성을 정밀 분석하여 자연스러운 결과를 만들어냅니다.

## 왜 VIEW인가?

- **21년 무사고** 안전 시스템
- **분야별 전문의** 협진 시스템
- **수술실 CCTV** 투명한 수술 환경
- **전담 마취과 전문의** 상주

## 코성형 종류별 특징

### 1. 매부리코 교정
매부리코는 코뼈와 연골의 돌출로 인해 발생합니다. VIEW에서는 절골술과 연골 성형을 병행하여 자연스러운 일자 라인을 만들어냅니다.

### 2. 콧대 높이기
실리콘이나 고어텍스를 이용한 융비술로 이상적인 콧대 높이를 만듭니다. 환자의 피부 두께와 코 구조에 맞는 보형물을 선택합니다.

### 3. 코끝 성형
코끝의 모양과 각도를 조절하여 세련된 인상을 만드는 수술입니다. 자가연골(귀연골, 비중격연골)을 활용하여 자연스러운 결과를 추구합니다.

## 상담 예약

지금 바로 무료 상담을 예약하세요. VIEW 성형외과 전문의가 1:1 맞춤 상담을 제공합니다.

☎ 02-XXX-XXXX | 서울 강남구 논현동`;

export default function BlogEditorStep({ studioState }: Props) {
  const [imageStatus, setImageStatus] = useState<GenStatus>('idle');
  const [imageResult, setImageResult] = useState<GenerateResult | null>(null);
  const [imageError, setImageError] = useState('');
  const [blogText, setBlogText] = useState(PLACEHOLDER_BLOG);
  const [activeTab, setActiveTab] = useState<'image' | 'text'>('image');

  const activeChannel = CHANNEL_OPTIONS.find(c => c.channel === studioState.channel);
  const activeFormat = activeChannel?.formats.find(f => f.key === studioState.format);

  const handleGenerateImage = useCallback(async () => {
    setImageStatus('generating');
    setImageError('');
    try {
      const res = await generateImage(studioState);
      setImageResult(res);
      setImageStatus('done');
    } catch (err) {
      setImageError(err instanceof Error ? err.message : '이미지 생성 실패');
      setImageStatus('error');
    }
  }, [studioState]);

  return (
    <div>
      {/* Tabs */}
      <div className="flex gap-2 mb-8">
        {([
          { key: 'image' as const, label: '대표 이미지' },
          { key: 'text' as const, label: '블로그 텍스트' },
        ]).map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`flex items-center gap-2 px-5 py-3 rounded-full text-sm font-medium transition-all ${
              activeTab === tab.key
                ? 'bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white shadow-md'
                : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'image' && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Image generation */}
          <div>
            <h3 className="font-serif font-bold text-2xl text-[#0A1128] mb-2">대표 이미지 생성</h3>
            <p className="text-sm text-slate-500 mb-6">블로그 상단에 들어갈 대표 이미지를 AI로 생성합니다</p>

            <div className="bg-white rounded-2xl border border-slate-100 shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-5 mb-4 space-y-3">
              <SummaryRow label="포맷" value={activeFormat?.label ?? '-'} />
              <SummaryRow label="비율" value="16:9 (블로그 헤더)" />
              <SummaryRow label="스타일" value="프리미엄 의료 마케팅" />
            </div>

            {(imageStatus === 'idle' || imageStatus === 'error') && (
              <button
                onClick={handleGenerateImage}
                className="w-full flex items-center justify-center gap-2 py-4 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white text-sm font-medium shadow-md hover:shadow-lg transition-all"
              >
                <FileTextFilled size={18} className="text-white" />
                {imageStatus === 'error' ? '다시 시도' : '이미지 생성'}
              </button>
            )}
            {imageStatus === 'error' && (
              <p className="mt-3 text-sm text-[#7C3A4B] text-center">{imageError}</p>
            )}
            {imageStatus === 'done' && (
              <button
                onClick={() => { setImageStatus('idle'); setImageResult(null); }}
                className="w-full py-3 rounded-full bg-white border border-slate-200 text-slate-600 text-sm font-medium shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:bg-slate-50 transition-all"
              >
                새로 생성
              </button>
            )}
          </div>

          {/* Image preview */}
          <div>
            <h3 className="font-serif font-bold text-2xl text-[#0A1128] mb-4">프리뷰</h3>
            <div className="w-full aspect-video rounded-2xl overflow-hidden border border-slate-200 bg-slate-50 flex items-center justify-center relative">
              {imageStatus === 'idle' && (
                <div className="text-center px-6">
                  <div className="w-16 h-16 rounded-2xl bg-[#F3F0FF] flex items-center justify-center mx-auto mb-4">
                    <FileTextFilled size={28} className="text-[#9B8AD4]" />
                  </div>
                  <p className="text-sm text-slate-400">생성 버튼을 눌러주세요</p>
                </div>
              )}
              {imageStatus === 'generating' && (
                <div className="text-center">
                  <div className="w-12 h-12 border-4 border-[#6C5CE7] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
                  <p className="text-sm text-slate-500">이미지 생성 중...</p>
                </div>
              )}
              {imageStatus === 'error' && (
                <p className="text-sm text-[#7C3A4B]">{imageError}</p>
              )}
              {imageStatus === 'done' && imageResult?.imageDataUrl && (
                <motion.img
                  src={imageResult.imageDataUrl}
                  alt="Blog header"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  className="absolute inset-0 w-full h-full object-cover"
                />
              )}
            </div>
          </div>
        </div>
      )}

      {activeTab === 'text' && (
        <div>
          <div className="flex items-center justify-between mb-4">
            <div>
              <h3 className="font-serif font-bold text-2xl text-[#0A1128]">블로그 편집기</h3>
              <p className="text-sm text-slate-500 mt-1">AI가 생성한 초안을 수정하세요 (Markdown 지원)</p>
            </div>
            <div className="flex gap-2">
              <span className="px-3 py-1 rounded-full bg-[#F3F0FF] text-[#4A3A7C] text-xs font-medium border border-[#D5CDF5]">
                {blogText.length.toLocaleString()}자
              </span>
              <span className="px-3 py-1 rounded-full bg-[#EFF0FF] text-[#3A3F7C] text-xs font-medium border border-[#C5CBF5]">
                SEO 최적화
              </span>
            </div>
          </div>

          <textarea
            value={blogText}
            onChange={(e) => setBlogText(e.target.value)}
            className="w-full min-h-[500px] p-6 rounded-2xl border border-slate-200 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] text-sm text-slate-700 leading-relaxed font-mono resize-y focus:outline-none focus:border-[#6C5CE7] focus:ring-1 focus:ring-[#6C5CE7]/20 transition-all"
            placeholder="블로그 콘텐츠를 입력하세요..."
          />

          <div className="flex gap-3 mt-6">
            <button className="flex-1 py-3 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white text-sm font-medium shadow-md hover:shadow-lg transition-all">
              저장
            </button>
            <button className="flex-1 py-3 rounded-full bg-white border border-slate-200 text-slate-600 text-sm font-medium shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:bg-slate-50 transition-all">
              AI 재생성
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function SummaryRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between py-2 border-b border-slate-50 last:border-0">
      <span className="text-sm text-slate-500">{label}</span>
      <span className="text-sm font-medium text-[#0A1128]">{value}</span>
    </div>
  );
}
