import { useState, useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import Button from '@/components/common/Button'
import Input from '@/components/common/Input'
import LoadingSpinner from '@/components/common/LoadingSpinner'
import { TOPICOS_PADRAO } from '@/lib/constants'
import { supabase } from '@/lib/supabase'
import { updateTemplate } from '@/lib/mutations'
import { toast } from '@/lib/toast'

export default function TemplateEdit() {
  const navigate = useNavigate()
  const { id } = useParams()
  const queryClient = useQueryClient()
  const [step, setStep] = useState(1)
  const [formData, setFormData] = useState({
    nome: '',
    tipo: 'novo' as 'novo' | 'derivado',
    template_pai_id: null as string | null,
    topicos_selecionados: [] as string[],
    descricao: '',
  })
  
  const { data: template, isLoading } = useQuery({
    queryKey: ['template', id],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('templates_customizados')
        .select('*')
        .eq('id', id)
        .single()
      
      if (error) throw error
      return data as any
    },
    enabled: !!id,
  })
  
  useEffect(() => {
    if (template) {
      setFormData({
        nome: template.nome,
        tipo: template.tipo,
        template_pai_id: template.template_pai_id,
        topicos_selecionados: template.topicos_selecionados || [],
        descricao: template.descricao || '',
      })
    }
  }, [template])
  
  const updateMutation = useMutation({
    mutationFn: () => updateTemplate(id!, {
      nome: formData.nome,
      topicos_selecionados: formData.topicos_selecionados,
      descricao: formData.descricao,
    }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['templates'] })
      queryClient.invalidateQueries({ queryKey: ['template', id] })
      toast.success('Template atualizado com sucesso')
      navigate('/templates')
    },
    onError: () => {
      toast.error('Erro ao atualizar template')
    },
  })
  
  const handleTopicoToggle = (numero: string) => {
    setFormData(prev => ({
      ...prev,
      topicos_selecionados: prev.topicos_selecionados.includes(numero)
        ? prev.topicos_selecionados.filter(t => t !== numero)
        : [...prev.topicos_selecionados, numero]
    }))
  }
  
  const handleSelectAll = () => {
    setFormData(prev => ({
      ...prev,
      topicos_selecionados: TOPICOS_PADRAO.map(t => t.numero)
    }))
  }
  
  const handleSelectMinimo = () => {
    setFormData(prev => ({
      ...prev,
      topicos_selecionados: TOPICOS_PADRAO.filter(t => t.obrigatorio).map(t => t.numero)
    }))
  }
  
  const handleSave = () => {
    updateMutation.mutate()
  }
  
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <LoadingSpinner size="lg" />
      </div>
    )
  }
  
  return (
    <div className="max-w-4xl mx-auto space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" onClick={() => navigate('/templates')}>
          <ChevronLeft size={20} />
        </Button>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Editar Template</h1>
      </div>
      
      {/* Progress Steps */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div className="flex items-center justify-between mb-8">
          {[1, 2, 3].map((s) => (
            <div key={s} className="flex items-center flex-1">
              <div className={`flex items-center justify-center w-10 h-10 rounded-full ${
                step >= s ? 'bg-primary text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
              }`}>
                {s}
              </div>
              {s < 3 && (
                <div className={`flex-1 h-1 mx-4 ${
                  step > s ? 'bg-primary' : 'bg-gray-200 dark:bg-gray-700'
                }`} />
              )}
            </div>
          ))}
        </div>
        
        {/* Step 1: Dados Básicos */}
        {step === 1 && (
          <div className="space-y-6">
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Dados Básicos</h2>
            
            <Input
              label="Nome do Template"
              value={formData.nome}
              onChange={(e) => setFormData(prev => ({ ...prev, nome: e.target.value }))}
              placeholder="Ex: Padrão Galpão Civil"
              required
            />
            
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Descrição (opcional)</label>
              <textarea
                value={formData.descricao}
                onChange={(e) => setFormData(prev => ({ ...prev, descricao: e.target.value }))}
                placeholder="Descreva o propósito deste template..."
                className="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                rows={3}
              />
            </div>
            
            <div className="flex justify-end">
              <Button onClick={() => setStep(2)}>
                Próximo
                <ChevronRight size={20} className="ml-2" />
              </Button>
            </div>
          </div>
        )}
        
        {/* Step 2: Seleção de Tópicos */}
        {step === 2 && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Selecionar Tópicos</h2>
              <div className="space-x-2">
                <Button size="sm" variant="outline" onClick={handleSelectAll}>
                  Selecionar Todos
                </Button>
                <Button size="sm" variant="outline" onClick={handleSelectMinimo}>
                  Apenas Obrigatórios
                </Button>
              </div>
            </div>
            
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Selecionados: {formData.topicos_selecionados.length} / {TOPICOS_PADRAO.length}
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 max-h-96 overflow-y-auto">
              {TOPICOS_PADRAO.map((topico) => (
                <label
                  key={topico.numero}
                  className="flex items-start gap-3 p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:border-primary cursor-pointer bg-white dark:bg-gray-700 transition-colors"
                >
                  <input
                    type="checkbox"
                    checked={formData.topicos_selecionados.includes(topico.numero)}
                    onChange={() => handleTopicoToggle(topico.numero)}
                    className="mt-1 text-primary focus:ring-primary"
                  />
                  <div className="flex-1">
                    <div className="font-medium text-sm text-gray-900 dark:text-gray-100">
                      {topico.numero} - {topico.titulo}
                      {topico.obrigatorio && (
                        <span className="ml-2 text-xs text-red-600 dark:text-red-400">*</span>
                      )}
                    </div>
                  </div>
                </label>
              ))}
            </div>
            
            <div className="flex justify-between">
              <Button variant="outline" onClick={() => setStep(1)}>
                <ChevronLeft size={20} className="mr-2" />
                Anterior
              </Button>
              <Button onClick={() => setStep(3)}>
                Próximo
                <ChevronRight size={20} className="ml-2" />
              </Button>
            </div>
          </div>
        )}
        
        {/* Step 3: Revisar e Salvar */}
        {step === 3 && (
          <div className="space-y-6">
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Revisar e Salvar</h2>
            
            <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 space-y-4">
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">Nome</p>
                <p className="font-medium text-gray-900 dark:text-gray-100">{formData.nome}</p>
              </div>
              {formData.descricao && (
                <div>
                  <p className="text-sm text-gray-600 dark:text-gray-400">Descrição</p>
                  <p className="font-medium text-gray-900 dark:text-gray-100">{formData.descricao}</p>
                </div>
              )}
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">Tipo</p>
                <p className="font-medium text-gray-900 dark:text-gray-100">{formData.tipo}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">Total de Seções</p>
                <p className="font-medium text-gray-900 dark:text-gray-100">
                  {formData.topicos_selecionados.length} de {TOPICOS_PADRAO.length}
                </p>
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">Seções Obrigatórias</p>
                <p className="font-medium text-gray-900 dark:text-gray-100">
                  {formData.topicos_selecionados.filter(t => 
                    TOPICOS_PADRAO.find(tp => tp.numero === t)?.obrigatorio
                  ).length}
                </p>
              </div>
            </div>
            
            <div className="flex justify-between">
              <Button variant="outline" onClick={() => setStep(2)}>
                <ChevronLeft size={20} className="mr-2" />
                Anterior
              </Button>
              <Button onClick={handleSave} isLoading={updateMutation.isPending}>
                Salvar Alterações
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}