import React, { useState, useEffect } from 'react';
import { Client } from '../types';

interface ClientFilterProps {
  onFilteredClients: (clients: Client[]) => void;
}

const ClientFilter: React.FC<ClientFilterProps> = ({ onFilteredClients }) => {
  const [clients, setClients] = useState<Client[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [filters, setFilters] = useState({
    name: '',
    email: '',
    phone: '',
    address: ''
  });
  const [sortBy, setSortBy] = useState<'name' | 'email' | 'phone'>('name');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');

  useEffect(() => {
    fetchClients();
  }, []);

  useEffect(() => {
    applyFilters();
  }, [clients, filters, sortBy, sortOrder]);

  const fetchClients = async () => {
    try {
      const token = localStorage.getItem('token');
      const response = await fetch('/api/clients', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (response.ok) {
        const data = await response.json();
        setClients(data);
      } else {
        setError('Erro ao carregar clientes');
      }
    } catch (error) {
      setError('Erro ao carregar clientes');
    } finally {
      setLoading(false);
    }
  };

  const applyFilters = () => {
    let filtered = [...clients];

    // Aplicar filtros de texto
    if (filters.name) {
      filtered = filtered.filter(client => 
        client.name.toLowerCase().includes(filters.name.toLowerCase())
      );
    }

    if (filters.email) {
      filtered = filtered.filter(client => 
        client.email.toLowerCase().includes(filters.email.toLowerCase())
      );
    }

    if (filters.phone) {
      filtered = filtered.filter(client => 
        client.phone.toLowerCase().includes(filters.phone.toLowerCase())
      );
    }

    if (filters.address) {
      filtered = filtered.filter(client => 
        client.address.toLowerCase().includes(filters.address.toLowerCase())
      );
    }

    // Aplicar ordenação
    filtered.sort((a, b) => {
      const aValue = a[sortBy].toLowerCase();
      const bValue = b[sortBy].toLowerCase();
      
      if (sortOrder === 'asc') {
        return aValue.localeCompare(bValue);
      } else {
        return bValue.localeCompare(aValue);
      }
    });

    onFilteredClients(filtered);
  };

  const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFilters(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const clearFilters = () => {
    setFilters({
      name: '',
      email: '',
      phone: '',
      address: ''
    });
  };

  const exportToCSV = () => {
    const csvContent = [
      ['Nome', 'Email', 'Telefone', 'Endereço'],
      ...clients.map(client => [
        client.name,
        client.email,
        client.phone,
        client.address
      ])
    ].map(row => row.join(',')).join('\n');

    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'clientes.csv';
    a.click();
    window.URL.revokeObjectURL(url);
  };

  if (loading) {
    return (
      <div className="container">
        <div className="text-center">
          <p>Carregando...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="container">
      <div className="d-flex justify-content-between align-items-center mb-4">
        <h1>Filtragem e Análise de Clientes</h1>
        <div className="d-flex gap-2">
          <button
            className="btn btn-success"
            onClick={exportToCSV}
          >
            Exportar CSV
          </button>
          <button
            className="btn btn-secondary"
            onClick={clearFilters}
          >
            Limpar Filtros
          </button>
        </div>
      </div>

      {error && (
        <div className="alert alert-danger">
          {error}
        </div>
      )}

      <div className="card mb-4">
        <div className="card-header">
          <h5>Filtros de Busca</h5>
        </div>
        <div className="card-body">
          <div className="row">
            <div className="col-md-3">
              <div className="form-group">
                <label htmlFor="name">Nome</label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  className="form-control"
                  value={filters.name}
                  onChange={handleFilterChange}
                  placeholder="Buscar por nome..."
                />
              </div>
            </div>
            <div className="col-md-3">
              <div className="form-group">
                <label htmlFor="email">Email</label>
                <input
                  type="text"
                  id="email"
                  name="email"
                  className="form-control"
                  value={filters.email}
                  onChange={handleFilterChange}
                  placeholder="Buscar por email..."
                />
              </div>
            </div>
            <div className="col-md-3">
              <div className="form-group">
                <label htmlFor="phone">Telefone</label>
                <input
                  type="text"
                  id="phone"
                  name="phone"
                  className="form-control"
                  value={filters.phone}
                  onChange={handleFilterChange}
                  placeholder="Buscar por telefone..."
                />
              </div>
            </div>
            <div className="col-md-3">
              <div className="form-group">
                <label htmlFor="address">Endereço</label>
                <input
                  type="text"
                  id="address"
                  name="address"
                  className="form-control"
                  value={filters.address}
                  onChange={handleFilterChange}
                  placeholder="Buscar por endereço..."
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="card mb-4">
        <div className="card-header">
          <h5>Ordenação</h5>
        </div>
        <div className="card-body">
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <label htmlFor="sortBy">Ordenar por</label>
                <select
                  id="sortBy"
                  className="form-control"
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value as 'name' | 'email' | 'phone')}
                >
                  <option value="name">Nome</option>
                  <option value="email">Email</option>
                  <option value="phone">Telefone</option>
                </select>
              </div>
            </div>
            <div className="col-md-6">
              <div className="form-group">
                <label htmlFor="sortOrder">Ordem</label>
                <select
                  id="sortOrder"
                  className="form-control"
                  value={sortOrder}
                  onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc')}
                >
                  <option value="asc">Crescente (A-Z)</option>
                  <option value="desc">Decrescente (Z-A)</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ClientFilter;