import { useI18n } from '../../i18n/useI18n'

interface GenerationStatus {
  ref_total: number
  ref_done: number
  ref_failed: number
  scene_total: number
  scene_done: number
  scene_failed: number
  scene_primary: number
  fal_count: number
}

interface Props {
  status: GenerationStatus | null
  analysisStatus?: string
  onRetryRef?: () => void
  onRetryScene?: () => void
  loading?: boolean
}

function ProgressBar({ done, failed, total }: { done: number; failed: number; total: number }) {
  if (total === 0) return null
  const doneP = (done / total) * 100
  const failedP = (failed / total) * 100
  return (
    <div style={{
      height: '8px', borderRadius: '4px', background: 'var(--bg-input)',
      overflow: 'hidden', display: 'flex',
    }}>
      <div style={{ width: `${doneP}%`, background: 'var(--green)', transition: 'width 0.3s' }} />
      <div style={{ width: `${failedP}%`, background: 'var(--red, #ef4444)', transition: 'width 0.3s' }} />
    </div>
  )
}

export function GenerationStatusPanel({ status, analysisStatus, onRetryRef, onRetryScene, loading }: Props) {
  const { t } = useI18n()

  if (!status) return null

  const { ref_total, ref_done, ref_failed, scene_total, scene_done, scene_failed, scene_primary, fal_count } = status
  const ref_pending = ref_total - ref_done - ref_failed
  const scene_pending = scene_total - scene_done - scene_failed

  return (
    <div style={{
      padding: '12px 16px', background: 'var(--bg-raised)',
      borderRadius: 'var(--radius-sm)', border: '1px solid var(--border)',
      fontSize: '12px', lineHeight: 1.6,
    }}>
      <div style={{ fontSize: '11px', fontWeight: 700, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: '10px' }}>
        파이프라인 상태
      </div>

      {/* Analysis */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
        <span style={{ width: '80px', color: 'var(--text-muted)' }}>분석</span>
        <span style={{
          padding: '1px 8px', borderRadius: '999px', fontSize: '10px', fontWeight: 600,
          background: analysisStatus === 'analyzed' ? 'var(--green-bg)' : 'var(--bg-input)',
          color: analysisStatus === 'analyzed' ? 'var(--green)' : 'var(--text-muted)',
        }}>
          {analysisStatus === 'analyzed' ? '완료' : analysisStatus || '대기'}
        </span>
      </div>

      {/* Reference Images */}
      <div style={{ marginBottom: '10px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
          <span style={{ width: '80px', color: 'var(--text-muted)' }}>참조 이미지</span>
          <span style={{ color: 'var(--green)', fontWeight: 600 }}>{ref_done}</span>
          <span style={{ color: 'var(--text-dim)' }}>/ {ref_total}</span>
          {ref_failed > 0 && (
            <span style={{ color: 'var(--red, #ef4444)', fontWeight: 600 }}>({ref_failed} 실패)</span>
          )}
          {ref_pending > 0 && ref_failed === 0 && (
            <span style={{ color: 'var(--text-dim)' }}>({ref_pending} 대기)</span>
          )}
          {onRetryRef && (ref_failed > 0 || ref_done < ref_total) && (
            <button
              onClick={onRetryRef}
              disabled={loading}
              style={{
                fontSize: '10px', padding: '1px 8px', borderRadius: '999px',
                background: 'var(--accent-glow)', color: 'var(--accent)',
                border: '1px solid var(--accent)', cursor: 'pointer', fontWeight: 600,
              }}
            >
              {loading ? '...' : '재시도'}
            </button>
          )}
        </div>
        <ProgressBar done={ref_done} failed={ref_failed} total={ref_total} />
      </div>

      {/* Scene Images */}
      <div style={{ marginBottom: '6px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
          <span style={{ width: '80px', color: 'var(--text-muted)' }}>씬 이미지</span>
          <span style={{ color: 'var(--green)', fontWeight: 600 }}>{scene_primary}</span>
          <span style={{ color: 'var(--text-dim)' }}>/ {scene_total} primary</span>
          {scene_failed > 0 && (
            <span style={{ color: 'var(--red, #ef4444)', fontWeight: 600 }}>({scene_failed} 실패)</span>
          )}
          {fal_count > 0 && (
            <span style={{ color: 'var(--text-dim)' }}>fal:{fal_count}</span>
          )}
          {onRetryScene && (scene_failed > 0 || scene_primary < scene_total) && ref_done > 0 && (
            <button
              onClick={onRetryScene}
              disabled={loading}
              style={{
                fontSize: '10px', padding: '1px 8px', borderRadius: '999px',
                background: 'var(--accent-glow)', color: 'var(--accent)',
                border: '1px solid var(--accent)', cursor: 'pointer', fontWeight: 600,
              }}
            >
              {loading ? '...' : '재시도'}
            </button>
          )}
        </div>
        <ProgressBar done={scene_primary} failed={scene_failed} total={scene_total} />
      </div>
    </div>
  )
}