import React, { useEffect, useState, useMemo } from 'react';
import { useTrabalhadores } from '../hooks/useTrabalhadores';
import ExcelTable from '../components/ExcelTable';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { 
  Users, 
  Search, 
  RefreshCw,
  UserCheck,
  Building2,
  Filter,
  Briefcase
} from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';

/**
 * View de Controle Especializado de Trabalhadores
 * Separação por Parceiros e Colaboradores com filtros avançados
 */
export const TrabalhadoresView = () => {
  const {
    trabalhadores,
    parceiros,
    colaboradores,
    dadosFiltrados,
    loading,
    filters,
    fetchTrabalhadores,
    setFilters
  } = useTrabalhadores();

  const [tipoVisualizacao, setTipoVisualizacao] = useState('todos'); // 'todos', 'parceiros', 'colaboradores'

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

  const columns = [
    { field: 'id', header: 'ID', width: 80 },
    { field: 'nome', header: 'Nome', width: 250 },
    { field: 'tipo', header: 'Tipo', width: 120, render: (row) => {
      const tipo = row.tipo || row.tipo_trabalhador;
      const isParceiro = tipo === 'Parceiro';
      return (
        <span className={`px-2 py-1 rounded-xl text-[clamp(1rem,1.1vw,1.0625rem)] font-medium ${
          isParceiro
            ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
            : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
        }`}>
          {tipo}
        </span>
      );
    }},
    { field: 'cpf', header: 'CPF/CNPJ', width: 150, className: 'text-[clamp(1rem,1.1vw,1.0625rem)] font-mono' },
    { field: 'cargo', header: 'Cargo', width: 180 },
    { field: 'base', header: 'Base', width: 120 },
    { field: 'empresa', header: 'Empresa', width: 150 },
    { field: 'status', header: 'Status', width: 120, render: (row) => {
      const statusColors = {
        'Ativo': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
        'Inativo': 'bg-slate-100 text-slate-700 dark:bg-slate-900/30 dark:text-slate-300',
        'Férias': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
        'Afastado': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
      };
      return (
        <span className={`px-2 py-1 rounded-xl text-[clamp(1rem,1.1vw,1.0625rem)] font-medium ${statusColors[row.status] || 'bg-slate-100 text-slate-700'}`}>
          {row.status}
        </span>
      );
    }},
    { field: 'data_admissao', header: 'Admissão', width: 120, render: (row) => (
      <span className="text-xs font-mono">
        {row.data_admissao ? new Date(row.data_admissao).toLocaleDateString('pt-BR') : '-'}
      </span>
    )},
    { field: 'telefone', header: 'Telefone', width: 140, className: 'text-xs font-mono' },
    { field: 'email', header: 'Email', width: 200, className: 'text-xs' }
  ];

  // Dados para exibição baseado na aba selecionada
  const dadosExibicao = useMemo(() => {
    if (tipoVisualizacao === 'parceiros') {
      return dadosFiltrados.filter(t => t.tipo === 'Parceiro' || t.tipo_trabalhador === 'Parceiro');
    } else if (tipoVisualizacao === 'colaboradores') {
      return dadosFiltrados.filter(t => t.tipo === 'Colaborador' || t.tipo_trabalhador === 'Colaborador');
    }
    return dadosFiltrados;
  }, [dadosFiltrados, tipoVisualizacao]);

  const stats = [
    {
      label: 'Total de Trabalhadores',
      value: trabalhadores.length,
      icon: Users,
      color: 'bg-indigo-500/10 text-indigo-500'
    },
    {
      label: 'Colaboradores',
      value: colaboradores.length,
      icon: UserCheck,
      color: 'bg-blue-500/10 text-blue-500'
    },
    {
      label: 'Parceiros',
      value: parceiros.length,
      icon: Building2,
      color: 'bg-purple-500/10 text-purple-500'
    },
    {
      label: 'Ativos',
      value: trabalhadores.filter(t => t.status === 'Ativo').length,
      icon: Briefcase,
      color: 'bg-green-500/10 text-green-500'
    }
  ];

  // Obter valores únicos para filtros (garantindo que não há strings vazias, null ou undefined)
  const basesUnicas = useMemo(() => {
    const bases = [...new Set(trabalhadores.map(t => t.base).filter(b => b && typeof b === 'string' && b.trim() !== ''))].sort();
    return bases;
  }, [trabalhadores]);
  
  const empresasUnicas = useMemo(() => {
    const empresas = [...new Set(trabalhadores.map(t => t.empresa).filter(e => e && typeof e === 'string' && e.trim() !== ''))].sort();
    return empresas;
  }, [trabalhadores]);
  
  const cargosUnicos = useMemo(() => {
    const cargos = [...new Set(trabalhadores.map(t => t.cargo).filter(c => c && typeof c === 'string' && c.trim() !== ''))].sort();
    return cargos;
  }, [trabalhadores]);

  return (
    <div className="theme-rh flex-1 flex flex-col h-full w-full overflow-hidden bg-slate-50/50 dark:bg-[#0a0a0a] p-4 sm:p-6 md:p-8">
      {/* Header */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
        <div className="space-y-1">
          <div className="flex items-center gap-3">
            <div className="p-2 sm:p-3 bg-indigo-500/10 rounded-xl">
              <Users className="text-indigo-500" size={24} />
            </div>
            <h1 className="text-[clamp(1.5rem,3vw,2.25rem)] font-semibold text-slate-800 dark:text-white tracking-tight">
              Controle de Trabalhadores
            </h1>
          </div>
          <p className="text-slate-500 text-[clamp(1rem,1.1vw,1.0625rem)] font-normal ml-1">
            Gestão especializada de Parceiros e Colaboradores
          </p>
        </div>
        
        <Button 
          onClick={() => fetchTrabalhadores()}
          disabled={loading}
          variant="outline"
          size="sm"
        >
          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
        </Button>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {stats.map((stat, idx) => {
          const Icon = stat.icon;
          return (
            <Card key={idx} className="rounded-2xl border-slate-200 dark:border-white/5 overflow-hidden">
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-[clamp(1.5rem,2.8vw,2.25rem)] font-semibold text-slate-800 dark:text-white">
                      {stat.value}
                    </p>
                    <p className="text-[clamp(1rem,1.1vw,1.0625rem)] text-slate-500 font-medium uppercase tracking-wider mt-1">
                      {stat.label}
                    </p>
                  </div>
                  <div className={`p-3 rounded-xl ${stat.color}`}>
                    <Icon size={20} />
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Tabs para separar Parceiros e Colaboradores */}
      <Tabs value={tipoVisualizacao} onValueChange={setTipoVisualizacao} className="mb-6">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="todos">Todos ({trabalhadores.length})</TabsTrigger>
          <TabsTrigger value="colaboradores">Colaboradores ({colaboradores.length})</TabsTrigger>
          <TabsTrigger value="parceiros">Parceiros ({parceiros.length})</TabsTrigger>
        </TabsList>
      </Tabs>

      {/* Filtros */}
      <Card className="mb-6 rounded-2xl border-slate-200 dark:border-white/5 overflow-hidden">
        <CardContent className="p-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
                <Input
                  placeholder="Buscar por nome, cargo ou CPF..."
                  value={filters.search || ''}
                  onChange={(e) => setFilters({ search: e.target.value })}
                  className="pl-10"
                />
              </div>
            </div>
            <Select 
              value={filters.tipo || undefined} 
              onValueChange={(value) => setFilters({ tipo: value || '' })}
            >
              <SelectTrigger className="w-full sm:w-[180px] rounded-xl">
                <SelectValue placeholder="Tipo" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Colaborador">Colaborador</SelectItem>
                <SelectItem value="Parceiro">Parceiro</SelectItem>
              </SelectContent>
            </Select>
            <Select 
              value={filters.base || undefined} 
              onValueChange={(value) => setFilters({ base: value || '' })}
            >
              <SelectTrigger className="w-full sm:w-[150px] rounded-xl">
                <SelectValue placeholder="Base" />
              </SelectTrigger>
              <SelectContent>
                {basesUnicas.map(base => (
                  <SelectItem key={base} value={base}>{base}</SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select 
              value={filters.empresa || undefined} 
              onValueChange={(value) => setFilters({ empresa: value || '' })}
            >
              <SelectTrigger className="w-full sm:w-[180px] rounded-xl">
                <SelectValue placeholder="Empresa" />
              </SelectTrigger>
              <SelectContent>
                {empresasUnicas.filter(empresa => empresa && typeof empresa === 'string' && empresa.trim() !== '').map(empresa => (
                  <SelectItem key={empresa} value={empresa}>{empresa}</SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select 
              value={filters.status || undefined} 
              onValueChange={(value) => setFilters({ status: value || '' })}
            >
              <SelectTrigger className="w-full sm:w-[150px] rounded-xl">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Ativo">Ativo</SelectItem>
                <SelectItem value="Inativo">Inativo</SelectItem>
                <SelectItem value="Férias">Férias</SelectItem>
                <SelectItem value="Afastado">Afastado</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* Tabela */}
      <Card className="flex-1 flex flex-col overflow-hidden rounded-2xl border-slate-200 dark:border-white/5">
        <CardHeader className="border-b border-slate-200 dark:border-white/5">
          <CardTitle className="text-[clamp(1.125rem,2vw,1.5rem)] font-semibold">
            Trabalhadores ({dadosExibicao.length})
          </CardTitle>
        </CardHeader>
        <CardContent className="flex-1 overflow-hidden p-0">
          <ExcelTable
            data={dadosExibicao}
            columns={columns}
            loading={loading}
            pageSize={50}
          />
        </CardContent>
      </Card>
    </div>
  );
};
