import Input from '@/components/common/Input'

interface TemplateEditorProps {
  tipo: string
  config: Record<string, any>
  onChange: (config: Record<string, any>) => void
}

export default function TemplateEditor({ tipo, config, onChange }: TemplateEditorProps) {
  const handleColorChange = (key: string, value: string) => {
    onChange({ ...config, [key]: value })
  }

  const handleTextChange = (key: string, value: string) => {
    onChange({ ...config, [key]: value })
  }

  const renderEditorByType = () => {
    switch (tipo) {
      case 'capa':
        return (
          <div className="space-y-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={config.corPrimaria || '#1a365d'}
                onChange={(e) => handleColorChange('corPrimaria', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 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={config.corSecundaria || '#2b6cb0'}
                onChange={(e) => handleColorChange('corSecundaria', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer"
              />
            </div>

            <Input
              label="Título Principal"
              value={config.titulo || ''}
              onChange={(e) => handleTextChange('titulo', e.target.value)}
              placeholder="Ex: BUZIOS 7 PRODUCTION SYSTEM"
            />

            <Input
              label="Subtítulo"
              value={config.subtitulo || ''}
              onChange={(e) => handleTextChange('subtitulo', e.target.value)}
              placeholder="Ex: AR HEAD FABRICATION"
            />

            <Input
              label="Cliente"
              value={config.cliente || ''}
              onChange={(e) => handleTextChange('cliente', e.target.value)}
              placeholder="Ex: SAIPEM"
            />

            <Input
              label="Número do Documento"
              value={config.numeroDocumento || ''}
              onChange={(e) => handleTextChange('numeroDocumento', e.target.value)}
              placeholder="Ex: DB-B97-01_S1_VENDOR_DATABOOK"
            />

            <Input
              label="Contrato"
              value={config.contrato || ''}
              onChange={(e) => handleTextChange('contrato', e.target.value)}
              placeholder="Ex: OC 1472739"
            />

            <Input
              label="Fornecedor"
              value={config.fornecedor || ''}
              onChange={(e) => handleTextChange('fornecedor', e.target.value)}
              placeholder="Ex: ENGEMETAL"
            />
          </div>
        )

      case 'indice':
        return (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Cor do Título
              </label>
              <input
                type="color"
                value={config.corTitulo || '#1a365d'}
                onChange={(e) => handleColorChange('corTitulo', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Cor da Linha Divisória
              </label>
              <input
                type="color"
                value={config.corLinha || '#2b6cb0'}
                onChange={(e) => handleColorChange('corLinha', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </div>

            <div>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={config.bilingue || false}
                  onChange={(e) => handleColorChange('bilingue', e.target.checked ? 'true' : 'false')}
                  className="rounded border-gray-300 dark:border-gray-600"
                />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Bilíngue (PT/EN)</span>
              </label>
            </div>

            <Input
              label="Título do Índice"
              value={config.titulo || 'ÍNDICE / TABLE OF CONTENTS'}
              onChange={(e) => handleTextChange('titulo', e.target.value)}
              placeholder="Título do índice"
            />
          </div>
        )

      case 'divisora':
        return (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Estilo da Divisora
              </label>
              <select
                value={config.estilo || 'minimalista'}
                onChange={(e) => handleColorChange('estilo', e.target.value)}
                className="input-field"
              >
                <option value="minimalista">Minimalista</option>
                <option value="lateral">Lateral</option>
                <option value="corporativa">Corporativa</option>
              </select>
            </div>

            <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={config.corPrimaria || '#1a365d'}
                onChange={(e) => handleColorChange('corPrimaria', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </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={config.corSecundaria || '#2b6cb0'}
                onChange={(e) => handleColorChange('corSecundaria', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </div>

            <div>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={config.bilingue || false}
                  onChange={(e) => handleColorChange('bilingue', e.target.checked ? 'true' : 'false')}
                  className="rounded border-gray-300 dark:border-gray-600"
                />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Bilíngue (PT/EN)</span>
              </label>
            </div>

            <Input
              label="Ícone da Seção"
              value={config.icone || '📑'}
              onChange={(e) => handleTextChange('icone', e.target.value)}
              placeholder="Ex: 📑, 🔩, ⚡"
              maxLength={2}
            />
          </div>
        )

      case 'cabecalho':
        return (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Cor da Borda
              </label>
              <input
                type="color"
                value={config.corBorda || '#2b6cb0'}
                onChange={(e) => handleColorChange('corBorda', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </div>

            <Input
              label="Altura (px)"
              type="number"
              value={config.altura || 60}
              onChange={(e) => handleTextChange('altura', e.target.value)}
              placeholder="60"
            />

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Estilo
              </label>
              <select
                value={config.estilo || 'simples'}
                onChange={(e) => handleColorChange('estilo', e.target.value)}
                className="input-field"
              >
                <option value="simples">Simples</option>
                <option value="completo">Completo com Logo</option>
                <option value="minimalista">Minimalista</option>
              </select>
            </div>
          </div>
        )

      case 'rodape':
        return (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Cor da Borda
              </label>
              <input
                type="color"
                value={config.corBorda || '#cbd5e0'}
                onChange={(e) => handleColorChange('corBorda', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </div>

            <Input
              label="Altura (px)"
              type="number"
              value={config.altura || 40}
              onChange={(e) => handleTextChange('altura', e.target.value)}
              placeholder="40"
            />

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Estilo
              </label>
              <select
                value={config.estilo || 'simples'}
                onChange={(e) => handleColorChange('estilo', e.target.value)}
                className="input-field"
              >
                <option value="simples">Simples</option>
                <option value="completo">Completo</option>
                <option value="minimalista">Minimalista</option>
              </select>
            </div>

            <div>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={config.mostrarPagina || true}
                  onChange={(e) => handleColorChange('mostrarPagina', e.target.checked ? 'true' : 'false')}
                  className="rounded border-gray-300 dark:border-gray-600"
                />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Mostrar Número da Página</span>
              </label>
            </div>
          </div>
        )

      case 'guia_estilo':
        return (
          <div className="space-y-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={config.corPrimaria || '#1a365d'}
                onChange={(e) => handleColorChange('corPrimaria', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </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={config.corSecundaria || '#2b6cb0'}
                onChange={(e) => handleColorChange('corSecundaria', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Cor de Destaque
              </label>
              <input
                type="color"
                value={config.corDestaque || '#4299e1'}
                onChange={(e) => handleColorChange('corDestaque', e.target.value)}
                className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
              />
            </div>

            <Input
              label="Fonte Principal"
              value={config.fontePrincipal || 'Roboto'}
              onChange={(e) => handleTextChange('fontePrincipal', e.target.value)}
              placeholder="Ex: Roboto, Arial"
            />

            <Input
              label="Fonte Secundária"
              value={config.fonteSecundaria || 'Open Sans'}
              onChange={(e) => handleTextChange('fonteSecundaria', e.target.value)}
              placeholder="Ex: Open Sans, Helvetica"
            />

            <div>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={config.incluirPaleta || true}
                  onChange={(e) => handleColorChange('incluirPaleta', e.target.checked ? 'true' : 'false')}
                  className="rounded border-gray-300 dark:border-gray-600"
                />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Incluir Paleta de Cores</span>
              </label>
            </div>

            <div>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={config.incluirTipografia || true}
                  onChange={(e) => handleColorChange('incluirTipografia', e.target.checked ? 'true' : 'false')}
                  className="rounded border-gray-300 dark:border-gray-600"
                />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Incluir Tipografia</span>
              </label>
            </div>
          </div>
        )

      default:
        return <p className="text-gray-500 dark:text-gray-400">Selecione um tipo de template</p>
    }
  }

  return (
    <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 space-y-4">
      <h3 className="font-semibold text-gray-900 dark:text-gray-100">Configurações do Template</h3>
      {renderEditorByType()}
    </div>
  )
}