import { useState, useCallback, useEffect, useRef } from 'react'
import { Film, Scissors, Music, Type, LogOut, Wand2 } from 'lucide-react'
import { supabase } from '../lib/supabase'
import UploadZone from '../components/UploadZone'
import LiveCutter from '../components/LiveCutter'
import JobStatus from '../components/JobStatus'
import ResultCard from '../components/ResultCard'

const API_URL = import.meta.env.VITE_API_URL || 'https://video.agenciaclimb.com.br'

interface Segmento {
  inicio: number
  fim: number
}

interface JobState {
  id: string
  status: string
  progresso: number
  mensagem: string
  video_url?: string
}

const ESTILOS_LEGENDA = [
  { value: 'branca', label: 'Branca', desc: 'Texto branco com contorno' },
  { value: 'amarela', label: 'Amarela', desc: 'Texto amarelo estilo viral' },
  { value: 'karaoke', label: 'Karaoke', desc: 'Destaca palavra por palavra' },
]

const TAMANHOS_LEGENDA = [
  { value: 'pequeno', label: 'Pequeno' },
  { value: 'medio', label: 'Médio' },
  { value: 'grande', label: 'Grande' },
]

export default function Editor() {
  const [aba, setAba] = useState<'clip' | 'live'>('clip')
  const [arquivo, setArquivo] = useState<File | null>(null)
  const [segmentos, setSegmentos] = useState<Segmento[]>([])
  const [estilo, setEstilo] = useState('branca')
  const [tamanhoLegenda, setTamanhoLegenda] = useState('medio')
  const [musica, setMusica] = useState(true)
  const [enviando, setEnviando] = useState(false)
  const [erro, setErro] = useState('')
  const [job, setJob] = useState<JobState | null>(null)
  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null)

  const clearArquivo = useCallback(() => {
    setArquivo(null)
    setSegmentos([])
  }, [])

  // Polling do job
  useEffect(() => {
    if (!job || job.status === 'concluido' || job.status === 'erro') {
      if (pollingRef.current) clearInterval(pollingRef.current)
      return
    }

    pollingRef.current = setInterval(async () => {
      try {
        const r = await fetch(`${API_URL}/api/job/${job.id}`)
        if (!r.ok) return
        const data = await r.json()
        setJob(prev => prev ? { ...prev, ...data } : null)
      } catch {
        // ignora erros de rede temporários
      }
    }, 3000)

    return () => {
      if (pollingRef.current) clearInterval(pollingRef.current)
    }
  }, [job?.id, job?.status])

  const enviar = async () => {
    if (!arquivo) return
    if (aba === 'live' && segmentos.length === 0) {
      setErro('Selecione ao menos um segmento antes de gerar.')
      return
    }

    setEnviando(true)
    setErro('')
    setJob(null)

    const form = new FormData()
    form.append('video', arquivo)
    form.append('modo', aba)
    form.append('musica', String(musica))
    form.append('estilo_legenda', estilo)
    form.append('tamanho_legenda', tamanhoLegenda)
    if (aba === 'live') {
      form.append('segmentos', JSON.stringify(segmentos))
    }

    try {
      const r = await fetch(`${API_URL}/api/processar`, {
        method: 'POST',
        body: form,
      })
      const data = await r.json()
      if (!r.ok) throw new Error(data.erro || 'Erro ao iniciar processamento.')
      setJob({
        id: data.job_id,
        status: 'fila',
        progresso: 0,
        mensagem: 'Na fila...',
      })
    } catch (e: unknown) {
      setErro(e instanceof Error ? e.message : 'Erro ao conectar com o servidor.')
    } finally {
      setEnviando(false)
    }
  }

  const resetar = () => {
    setJob(null)
    setArquivo(null)
    setSegmentos([])
    setErro('')
  }

  const handleLogout = async () => {
    await supabase.auth.signOut()
  }

  const processando = job && job.status !== 'concluido' && job.status !== 'erro'
  const concluido = job?.status === 'concluido'
  const jobErro = job?.status === 'erro'

  return (
    <div className="min-h-screen">
      {/* Header */}
      <header className="border-b border-white/8 px-4 py-4 flex items-center justify-between max-w-2xl mx-auto">
        <div className="flex items-center gap-2.5">
          <div className="w-8 h-8 rounded-lg bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center">
            <Film size={16} className="text-indigo-400" />
          </div>
          <div>
            <h1 className="text-sm font-bold text-white leading-none">Reel Editor</h1>
            <p className="text-[10px] text-slate-600 mt-0.5">Climb Digital</p>
          </div>
        </div>
        <button
          onClick={handleLogout}
          className="text-slate-500 hover:text-slate-300 transition-colors p-2"
          title="Sair"
        >
          <LogOut size={16} />
        </button>
      </header>

      {/* Content */}
      <main className="max-w-2xl mx-auto px-4 py-6 space-y-6">

        {/* Resultado - aparece quando concluido */}
        {concluido && job && (
          <ResultCard
            jobId={job.id}
            apiUrl={API_URL}
            onReset={resetar}
          />
        )}

        {/* Status do job em andamento */}
        {(processando || jobErro) && job && (
          <JobStatus
            status={job.status}
            progresso={job.progresso}
            mensagem={job.mensagem}
          />
        )}

        {/* Formulario - esconde durante processamento */}
        {!processando && !concluido && (
          <>
            {/* Abas */}
            <div className="flex bg-white/5 border border-white/10 rounded-xl p-1 gap-1">
              <button
                onClick={() => { setAba('clip'); clearArquivo() }}
                className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-medium transition-all ${
                  aba === 'clip'
                    ? 'bg-indigo-600 text-white shadow-lg'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                <Film size={15} />
                Clip Gravado
              </button>
              <button
                onClick={() => { setAba('live'); clearArquivo() }}
                className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-medium transition-all ${
                  aba === 'live'
                    ? 'bg-indigo-600 text-white shadow-lg'
                    : 'text-slate-400 hover:text-slate-200'
                }`}
              >
                <Scissors size={15} />
                Cortar Live
              </button>
            </div>

            {/* Conteudo da aba */}
            <div className="bg-white/3 border border-white/8 rounded-xl p-5 space-y-5">
              {aba === 'clip' ? (
                <>
                  <div>
                    <h2 className="text-sm font-semibold text-slate-200 mb-3">
                      Envie seu clip
                    </h2>
                    <UploadZone
                      file={arquivo}
                      onFile={setArquivo}
                      onClear={clearArquivo}
                      label="Arraste o vídeo (talking head, shorts, etc.)"
                    />
                  </div>
                </>
              ) : (
                <>
                  <div>
                    <h2 className="text-sm font-semibold text-slate-200 mb-1">
                      Envie sua live gravada
                    </h2>
                    <p className="text-xs text-slate-500 mb-3">
                      Depois do upload, marque os trechos que quer usar no Reel.
                    </p>
                    {!arquivo ? (
                      <UploadZone
                        file={arquivo}
                        onFile={setArquivo}
                        onClear={clearArquivo}
                        label="Arraste a live ou gravação longa"
                      />
                    ) : (
                      <LiveCutter
                        file={arquivo}
                        segmentos={segmentos}
                        onSegmentos={setSegmentos}
                      />
                    )}
                  </div>
                  {arquivo && (
                    <button
                      onClick={clearArquivo}
                      className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
                    >
                      Trocar vídeo
                    </button>
                  )}
                </>
              )}

              {/* Opcoes */}
              <div className="space-y-4 pt-2 border-t border-white/8">
                {/* Estilo de legenda */}
                <div>
                  <label className="flex items-center gap-1.5 text-xs font-medium text-slate-400 uppercase tracking-wide mb-2">
                    <Type size={12} />
                    Estilo de legenda
                  </label>
                  <div className="grid grid-cols-3 gap-2">
                    {ESTILOS_LEGENDA.map(e => (
                      <button
                        key={e.value}
                        onClick={() => setEstilo(e.value)}
                        className={`py-2 px-3 rounded-lg border text-xs text-center transition-all ${
                          estilo === e.value
                            ? 'border-indigo-500/60 bg-indigo-600/20 text-indigo-300'
                            : 'border-white/10 text-slate-500 hover:border-white/20 hover:text-slate-300'
                        }`}
                      >
                        <span className="font-medium block">{e.label}</span>
                        <span className="text-[10px] opacity-70">{e.desc}</span>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Tamanho da legenda */}
                <div>
                  <label className="flex items-center gap-1.5 text-xs font-medium text-slate-400 uppercase tracking-wide mb-2">
                    <Type size={12} />
                    Tamanho da legenda
                  </label>
                  <div className="grid grid-cols-3 gap-2">
                    {TAMANHOS_LEGENDA.map(t => (
                      <button
                        key={t.value}
                        onClick={() => setTamanhoLegenda(t.value)}
                        className={`py-2 px-3 rounded-lg border text-xs text-center transition-all ${
                          tamanhoLegenda === t.value
                            ? 'border-indigo-500/60 bg-indigo-600/20 text-indigo-300'
                            : 'border-white/10 text-slate-500 hover:border-white/20 hover:text-slate-300'
                        }`}
                      >
                        <span className="font-medium block">{t.label}</span>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Musica */}
                <div className="flex items-center justify-between">
                  <label className="flex items-center gap-1.5 text-xs font-medium text-slate-400 uppercase tracking-wide">
                    <Music size={12} />
                    Musica de fundo
                  </label>
                  <button
                    onClick={() => setMusica(!musica)}
                    className={`relative w-10 h-5 rounded-full transition-colors ${
                      musica ? 'bg-indigo-600' : 'bg-white/10'
                    }`}
                  >
                    <span
                      className={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-all ${
                        musica ? 'left-5' : 'left-0.5'
                      }`}
                    />
                  </button>
                </div>
              </div>
            </div>

            {/* Erro */}
            {erro && (
              <div className="bg-red-500/10 border border-red-500/20 rounded-xl px-4 py-3 text-sm text-red-400">
                {erro}
              </div>
            )}

            {/* Botao gerar */}
            <button
              onClick={enviar}
              disabled={!arquivo || enviando || (aba === 'live' && segmentos.length === 0)}
              className="w-full py-4 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-500 hover:to-violet-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold rounded-xl transition-all flex items-center justify-center gap-2 text-base shadow-lg"
            >
              <Wand2 size={18} />
              {enviando ? 'Enviando...' : aba === 'live' ? `Gerar Reel com ${segmentos.length} trecho(s)` : 'Gerar Reel automaticamente'}
            </button>

            {/* Info */}
            <div className="grid grid-cols-3 gap-3 text-center">
              {[
                { label: 'Transcricao', desc: 'Whisper AI' },
                { label: 'B-roll', desc: 'Pexels API' },
                { label: 'Formato', desc: '1080x1920' },
              ].map(item => (
                <div key={item.label} className="bg-white/3 border border-white/8 rounded-xl p-3">
                  <p className="text-xs font-medium text-indigo-300">{item.label}</p>
                  <p className="text-[10px] text-slate-500 mt-0.5">{item.desc}</p>
                </div>
              ))}
            </div>
          </>
        )}
      </main>
    </div>
  )
}