import React, { useState } from 'react';
import './BulkGroupCreator.css';
import { apiPost } from '../../services/apiClient';

type GrupoForm = {
  nome: string;
  participantes: string;
};

type ResultadoCriacao = {
  sucesso: boolean;
  nome: string;
  grupo?: { id?: { _serialized?: string } };
  erro?: string;
};

const BulkGroupCreator = () => {
  const [grupos, setGrupos] = useState<GrupoForm[]>([{ nome: '', participantes: '' }]);
  const [loading, setLoading] = useState(false);
  const [resultados, setResultados] = useState<ResultadoCriacao[] | null>(null);

  const addGrupo = () => {
    setGrupos([...grupos, { nome: '', participantes: '' }]);
  };

  const removeGrupo = (index: number) => {
    if (grupos.length > 1) {
      setGrupos(grupos.filter((_, i) => i !== index));
    }
  };

  const updateGrupo = (index: number, field: keyof GrupoForm, value: string) => {
    const novosGrupos = [...grupos];
    novosGrupos[index][field] = value;
    setGrupos(novosGrupos);
  };

  const handleCriarGrupos = async () => {
    // Validar grupos
    const gruposInvalidos = grupos.filter(
      g => !g.nome.trim() || !g.participantes.trim()
    );

    if (gruposInvalidos.length > 0) {
      alert('Por favor, preencha o nome e participantes de todos os grupos');
      return;
    }

    // Preparar dados
    const gruposParaCriar = grupos.map(g => ({
      nome: g.nome.trim(),
      participantes: g.participantes
        .split('\n')
        .map(line => line.trim())
        .filter(line => line.length > 0)
        .map(num => `${num}@c.us`)
    }));

    // Validar se cada grupo tem pelo menos 2 participantes (WhatsApp requer)
    const gruposSemParticipantes = gruposParaCriar.filter(
      g => g.participantes.length < 2
    );

    if (gruposSemParticipantes.length > 0) {
      alert('Cada grupo precisa ter pelo menos 2 participantes');
      return;
    }

    if (!window.confirm(`Deseja criar ${grupos.length} grupo(s)?`)) {
      return;
    }

    setLoading(true);
    setResultados(null);

    try {
      const data = await apiPost('/grupos/criar-massa', { grupos: gruposParaCriar });
      setResultados(data);

      // Limpar grupos criados com sucesso
      const sucessos = data.filter(r => r.sucesso);
      if (sucessos.length > 0) {
        const novosGrupos = grupos.filter((_, index) => {
          const resultado = data[index];
          return !resultado || !resultado.sucesso;
        });
        setGrupos(novosGrupos.length > 0 ? novosGrupos : [{ nome: '', participantes: '' }]);
      }
    } catch (error) {
      console.error('Erro:', error);
      alert('Erro: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  const handleImportarCSV = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e: ProgressEvent<FileReader>) => {
      const text = e.target?.result;
      if (typeof text !== 'string') {
        return;
      }
      const lines = text.split('\n').filter(line => line.trim());
      
      // Formato CSV esperado: nome,participante1,participante2,participante3,...
      const novosGrupos = lines.map(line => {
        const parts = line.split(',').map(p => p.trim());
        const nome = parts[0];
        const participantes = parts.slice(1).join('\n');
        return { nome, participantes };
      }).filter(g => g.nome);

      if (novosGrupos.length > 0) {
        setGrupos(novosGrupos);
        alert(`${novosGrupos.length} grupo(s) importado(s) com sucesso!`);
      } else {
        alert('Nenhum grupo válido encontrado no arquivo');
      }
    };
    reader.readAsText(file);
  };

  const handleExportarTemplate = () => {
    const template = `Grupo 1,5511999999999,5511888888888,5511777777777
Grupo 2,5511999999999,5511888888888
Grupo 3,5511999999999,5511888888888,5511777777777,5511666666666`;
    
    const blob = new Blob([template], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'template-grupos.csv';
    a.click();
    window.URL.revokeObjectURL(url);
  };

  return (
    <div className="bulk-creator page-surface">
      <div className="bulk-header">
        <h2>📦 Criação de Grupos em Massa</h2>
        <div className="bulk-actions">
          <label className="import-btn">
            📥 Importar CSV
            <input
              type="file"
              accept=".csv"
              onChange={handleImportarCSV}
              style={{ display: 'none' }}
            />
          </label>
          <button onClick={handleExportarTemplate} className="export-btn">
            📄 Baixar Template CSV
          </button>
        </div>
      </div>

      <div className="info-box">
        <h3>ℹ️ Instruções</h3>
        <ul>
          <li>Digite o nome do grupo e os números dos participantes (um por linha)</li>
          <li>Formato dos números: 5511999999999 (código do país + DDD + número)</li>
          <li>Cada grupo precisa ter pelo menos 2 participantes</li>
          <li>Você pode importar um arquivo CSV com o formato: nome,participante1,participante2,...</li>
        </ul>
      </div>

      <div className="grupos-list">
        {grupos.map((grupo, index) => (
          <div key={index} className="grupo-card">
            <div className="grupo-header">
              <h3>Grupo {index + 1}</h3>
              {grupos.length > 1 && (
                <button
                  onClick={() => removeGrupo(index)}
                  className="remove-grupo-btn"
                  title="Remover grupo"
                >
                  ✕
                </button>
              )}
            </div>
            <div className="grupo-form">
              <div className="form-group">
                <label>Nome do Grupo</label>
                <input
                  type="text"
                  value={grupo.nome}
                  onChange={(e) => updateGrupo(index, 'nome', e.target.value)}
                  placeholder="Ex: Grupo de Vendas"
                  className="form-input"
                />
              </div>
              <div className="form-group">
                <label>Participantes (um número por linha)</label>
                <textarea
                  value={grupo.participantes}
                  onChange={(e) => updateGrupo(index, 'participantes', e.target.value)}
                  placeholder="5511999999999&#10;5511888888888&#10;5511777777777"
                  rows={6}
                  className="form-textarea"
                />
                <div className="participants-count">
                  {grupo.participantes.split('\n').filter(p => p.trim()).length} participante(s)
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="bulk-footer">
        <button onClick={addGrupo} className="add-grupo-btn">
          ➕ Adicionar Outro Grupo
        </button>
        <button
          onClick={handleCriarGrupos}
          disabled={loading}
          className="criar-grupos-btn"
        >
          {loading ? '⏳ Criando grupos...' : '🚀 Criar Todos os Grupos'}
        </button>
      </div>

      {resultados && (
        <div className="resultados-panel">
          <h3>📊 Resultados</h3>
          <div className="resultados-stats">
            <div className="stat success">
              ✓ Sucessos: {resultados.filter(r => r.sucesso).length}
            </div>
            <div className="stat error">
              ✗ Falhas: {resultados.filter(r => !r.sucesso).length}
            </div>
          </div>
          <div className="resultados-list">
            {resultados.map((resultado, index) => (
              <div
                key={index}
                className={`resultado-item ${resultado.sucesso ? 'success' : 'error'}`}
              >
                <div className="resultado-header">
                  <span className="resultado-icon">
                    {resultado.sucesso ? '✓' : '✗'}
                  </span>
                  <span className="resultado-nome">{resultado.nome}</span>
                </div>
                {resultado.sucesso ? (
                  <div className="resultado-info">
                    Grupo criado com sucesso! ID: {resultado.grupo?.id?._serialized || 'N/A'}
                  </div>
                ) : (
                  <div className="resultado-error">
                    Erro: {resultado.erro}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default BulkGroupCreator;