// @ts-nocheck
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { ChevronLeft, ChevronRight, Upload } from 'lucide-react'
import Button from '@/components/common/Button'
import Input from '@/components/common/Input'
import { supabase } from '@/lib/supabase'

export default function DatabookNew() {
  const navigate = useNavigate()
  const [step, setStep] = useState(1)
  
  // Buscar templates disponíveis
  const { data: templates } = useQuery({
    queryKey: ['templates-ativos'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('templates_customizados')
        .select('*')
        .eq('ativo', true)
        .order('tipo', { ascending: true })
        .order('nome', { ascending: true })
      
      if (error) throw error
      return data as any[]
    },
  })
  const [formData, setFormData] = useState({
    // Template
    template_id: '',
    // Cliente
    cliente_nome: '',
    cliente_contato: '',
    cliente_email: '',
    cliente_telefone: '',
    // Produto
    produto_nome: '',
    produto_tipo: 'offshore',
    produto_descricao: '',
    produto_normas: [] as string[],
    // Identificação
    numero_projeto: '',
    ordem_compra: '',
    data_inicio: '',
    data_entrega_prevista: '',
    // Revisão
    revisao_numero: 'Rev. 0',
    revisao_motivo: '',
    // Capa
    cor_primaria: '#1E40AF',
    cor_secundaria: '#64748B',
    titulo_principal: 'DATABOOK - ESTRUTURA METÁLICA',
    subtitulo: '',
    tamanho_pagina: 'A4' as 'A4' | 'Letter',
    orientacao: 'retrato' as 'retrato' | 'paisagem',
    // Arquivos
    logo_empresa: null as File | null,
    logo_cliente: null as File | null,
    marca_agua: null as File | null,
  })
  
  const [isLoading, setIsLoading] = useState(false)
  
  const handleFileChange = (field: 'logo_empresa' | 'logo_cliente' | 'marca_agua', file: File | null) => {
    setFormData(prev => ({ ...prev, [field]: file }))
  }
  
  const handleSave = async () => {
    setIsLoading(true)
    try {
      const { createDatabook } = await import('@/lib/mutations')
      const { supabase } = await import('@/lib/supabase')
      const { toast } = await import('@/lib/toast')
      
      // Primeiro, criar ou buscar cliente
      let clienteId = null
      if (formData.cliente_nome) {
        const { data: clientesExistentes } = await supabase
          .from('clientes')
          .select('id')
          .eq('nome', formData.cliente_nome)
          .limit(1)
        
        if (clientesExistentes && clientesExistentes.length > 0) {
          clienteId = clientesExistentes[0].id
        } else {
          const { data: novoCliente } = await supabase
            .from('clientes')
            .insert([{
              nome: formData.cliente_nome,
              contato: formData.cliente_contato,
              email: formData.cliente_email,
              telefone: formData.cliente_telefone,
            } as any])
            .select()
          
          clienteId = novoCliente?.[0]?.id
        }
      }
      
      // Upload de arquivos (se houver)
      // TODO: Implementar upload para Supabase Storage
      
      await createDatabook({
        numero_projeto: formData.numero_projeto || `PRJ-${Date.now()}`,
        nome_projeto: formData.produto_nome,
        cliente_id: clienteId,
        template_id: formData.template_id || null,
        cliente_nome: formData.cliente_nome,
        cliente_contato: formData.cliente_contato,
        cliente_email: formData.cliente_email,
        cliente_telefone: formData.cliente_telefone,
        produto_nome: formData.produto_nome,
        produto_tipo: formData.produto_tipo,
        produto_descricao: formData.produto_descricao,
        produto_normas: formData.produto_normas,
        ordem_compra: formData.ordem_compra,
        data_inicio: formData.data_inicio,
        data_entrega_prevista: formData.data_entrega_prevista,
        titulo_principal: formData.titulo_principal,
        subtitulo: formData.subtitulo,
        cor_primaria: formData.cor_primaria,
        cor_secundaria: formData.cor_secundaria,
        tamanho_pagina: formData.tamanho_pagina,
        orientacao: formData.orientacao,
      })
      
      toast.success('Databook criado com sucesso!')
      navigate('/dashboard')
    } catch (error: any) {
      console.error('Erro ao criar databook:', error)
      const { toast } = await import('@/lib/toast')
      toast.error(error.message || 'Erro ao criar databook')
    } finally {
      setIsLoading(false)
    }
  }
  
  return (
    <div className="max-w-4xl mx-auto space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" onClick={() => navigate('/dashboard')}>
          <ChevronLeft size={20} />
        </Button>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Novo Databook</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 dark:bg-blue-600 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 dark:bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'
                }`} />
              )}
            </div>
          ))}
        </div>
        
        {/* Step 1: Dados Mestres */}
        {step === 1 && (
          <div className="space-y-8">
            {/* Seleção de Template */}
            <div>
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Selecionar Template</h2>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Template do Databook *
                </label>
                <select
                  value={formData.template_id}
                  onChange={(e) => setFormData(prev => ({ ...prev, template_id: e.target.value }))}
                  className="input-field"
                  required
                >
                  <option value="">Selecione um template...</option>
                  {templates && templates.length > 0 && (
                    <>
                      {/* Templates Padrão */}
                      {templates.filter(t => t.tipo === 'padrao').length > 0 && (
                        <optgroup label="Templates Padrão">
                          {templates.filter(t => t.tipo === 'padrao').map(template => (
                            <option key={template.id} value={template.id}>
                              {template.nome} ({template.total_topicos} seções)
                            </option>
                          ))}
                        </optgroup>
                      )}
                      {/* Templates Customizados */}
                      {templates.filter(t => t.tipo !== 'padrao').length > 0 && (
                        <optgroup label="Meus Templates">
                          {templates.filter(t => t.tipo !== 'padrao').map(template => (
                            <option key={template.id} value={template.id}>
                              {template.nome} ({template.total_topicos} seções)
                            </option>
                          ))}
                        </optgroup>
                      )}
                    </>
                  )}
                </select>
                {formData.template_id && templates && (
                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-2">
                    {templates.find(t => t.id === formData.template_id)?.descricao}
                  </p>
                )}
              </div>
            </div>
            
            <div>
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Dados do Cliente</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Input
                  label="Nome do Cliente"
                  value={formData.cliente_nome}
                  onChange={(e) => setFormData(prev => ({ ...prev, cliente_nome: e.target.value }))}
                  required
                />
                <Input
                  label="Contato"
                  value={formData.cliente_contato}
                  onChange={(e) => setFormData(prev => ({ ...prev, cliente_contato: e.target.value }))}
                />
                <Input
                  label="Email"
                  type="email"
                  value={formData.cliente_email}
                  onChange={(e) => setFormData(prev => ({ ...prev, cliente_email: e.target.value }))}
                />
                <Input
                  label="Telefone"
                  value={formData.cliente_telefone}
                  onChange={(e) => setFormData(prev => ({ ...prev, cliente_telefone: e.target.value }))}
                />
              </div>
            </div>
            
            <div>
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Dados do Produto</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Input
                  label="Nome do Produto"
                  value={formData.produto_nome}
                  onChange={(e) => setFormData(prev => ({ ...prev, produto_nome: e.target.value }))}
                  required
                />
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Tipo de Estrutura
                  </label>
                  <select
                    value={formData.produto_tipo}
                    onChange={(e) => setFormData(prev => ({ ...prev, produto_tipo: e.target.value }))}
                    className="input-field"
                  >
                    <option value="offshore">Offshore</option>
                    <option value="galpao">Galpão</option>
                    <option value="edificio">Edifício</option>
                    <option value="ponte">Ponte</option>
                  </select>
                </div>
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Descrição
                  </label>
                  <textarea
                    value={formData.produto_descricao}
                    onChange={(e) => setFormData(prev => ({ ...prev, produto_descricao: e.target.value }))}
                    className="input-field"
                    rows={3}
                  />
                </div>
              </div>
            </div>
            
            <div>
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Identificação</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Input
                  label="Número do Projeto"
                  value={formData.numero_projeto}
                  onChange={(e) => setFormData(prev => ({ ...prev, numero_projeto: e.target.value }))}
                  placeholder="PRJ-2025-00001"
                  required
                />
                <Input
                  label="Ordem de Compra"
                  value={formData.ordem_compra}
                  onChange={(e) => setFormData(prev => ({ ...prev, ordem_compra: e.target.value }))}
                />
                <Input
                  label="Data de Início"
                  type="date"
                  value={formData.data_inicio}
                  onChange={(e) => setFormData(prev => ({ ...prev, data_inicio: e.target.value }))}
                />
                <Input
                  label="Data de Entrega Prevista"
                  type="date"
                  value={formData.data_entrega_prevista}
                  onChange={(e) => setFormData(prev => ({ ...prev, data_entrega_prevista: e.target.value }))}
                />
              </div>
            </div>
            
            <div className="flex justify-end">
              <Button onClick={() => setStep(2)}>
                Próximo
                <ChevronRight size={20} className="ml-2" />
              </Button>
            </div>
          </div>
        )}
        
        {/* Step 2: Customizar Capa */}
        {step === 2 && (
          <div className="space-y-8">
            <div>
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Branding e Logos</h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Logo Empresa
                  </label>
                  <label className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary cursor-pointer block">
                    <input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => handleFileChange('logo_empresa', e.target.files?.[0] || null)}
                    />
                    <Upload className="mx-auto text-gray-400 dark:text-gray-500 mb-2" size={32} />
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {formData.logo_empresa ? formData.logo_empresa.name : 'Arraste ou clique'}
                    </p>
                  </label>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Logo Cliente
                  </label>
                  <label className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary cursor-pointer block">
                    <input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => handleFileChange('logo_cliente', e.target.files?.[0] || null)}
                    />
                    <Upload className="mx-auto text-gray-400 dark:text-gray-500 mb-2" size={32} />
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {formData.logo_cliente ? formData.logo_cliente.name : 'Arraste ou clique'}
                    </p>
                  </label>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Marca d'água
                  </label>
                  <label className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary cursor-pointer block">
                    <input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => handleFileChange('marca_agua', e.target.files?.[0] || null)}
                    />
                    <Upload className="mx-auto text-gray-400 dark:text-gray-500 mb-2" size={32} />
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {formData.marca_agua ? formData.marca_agua.name : 'Arraste ou clique'}
                    </p>
                  </label>
                </div>
              </div>
              
              <div className="grid grid-cols-2 gap-4 mt-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Cor Primária
                  </label>
                  <input
                    type="color"
                    value={formData.cor_primaria}
                    onChange={(e) => setFormData(prev => ({ ...prev, cor_primaria: e.target.value }))}
                    className="h-10 w-full rounded-lg cursor-pointer"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Cor Secundária
                  </label>
                  <input
                    type="color"
                    value={formData.cor_secundaria}
                    onChange={(e) => setFormData(prev => ({ ...prev, cor_secundaria: e.target.value }))}
                    className="h-10 w-full rounded-lg cursor-pointer"
                  />
                </div>
              </div>
            </div>
            
            <div>
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Textos da Capa</h2>
              <div className="space-y-4">
                <Input
                  label="Título Principal"
                  value={formData.titulo_principal}
                  onChange={(e) => setFormData(prev => ({ ...prev, titulo_principal: e.target.value }))}
                />
                <Input
                  label="Subtítulo"
                  value={formData.subtitulo}
                  onChange={(e) => setFormData(prev => ({ ...prev, subtitulo: e.target.value }))}
                />
              </div>
            </div>
            
            <div>
              <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Formatação</h2>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Tamanho da Página
                  </label>
                  <div className="space-y-2">
                    <label className="flex items-center gap-2">
                      <input
                        type="radio"
                        checked={formData.tamanho_pagina === 'A4'}
                        onChange={() => setFormData(prev => ({ ...prev, tamanho_pagina: 'A4' }))}
                        className="text-primary focus:ring-primary"
                      />
                      <span>A4</span>
                    </label>
                    <label className="flex items-center gap-2">
                      <input
                        type="radio"
                        checked={formData.tamanho_pagina === 'Letter'}
                        onChange={() => setFormData(prev => ({ ...prev, tamanho_pagina: 'Letter' }))}
                        className="text-primary focus:ring-primary"
                      />
                      <span>Letter</span>
                    </label>
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Orientação
                  </label>
                  <div className="space-y-2">
                    <label className="flex items-center gap-2">
                      <input
                        type="radio"
                        checked={formData.orientacao === 'retrato'}
                        onChange={() => setFormData(prev => ({ ...prev, orientacao: 'retrato' }))}
                        className="text-primary focus:ring-primary"
                      />
                      <span>Retrato</span>
                    </label>
                    <label className="flex items-center gap-2">
                      <input
                        type="radio"
                        checked={formData.orientacao === 'paisagem'}
                        onChange={() => setFormData(prev => ({ ...prev, orientacao: 'paisagem' }))}
                        className="text-primary focus:ring-primary"
                      />
                      <span>Paisagem</span>
                    </label>
                  </div>
                </div>
              </div>
            </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: Confirmar */}
        {step === 3 && (
          <div className="space-y-6">
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Confirmar e Criar</h2>
            
            <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 space-y-4">
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">Cliente</p>
                <p className="font-medium text-gray-900 dark:text-gray-100">{formData.cliente_nome}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">Produto</p>
                <p className="font-medium text-gray-900 dark:text-gray-100">{formData.produto_nome}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400">Número do Projeto</p>
                <p className="font-medium text-gray-900 dark:text-gray-100">{formData.numero_projeto}</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={isLoading}>
                Criar Databook
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}


