import React, { useState } from 'react';
import { Users, Plus, Search, Mail, Phone, Shield, Edit, Trash2, UserCheck, UserX } from 'lucide-react';
import { Button, Card, Badge, Input } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';

const TeamPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedRole, setSelectedRole] = useState('all');
  const [showForm, setShowForm] = useState(false);

  const teamMembers = [
    {
      id: '1',
      name: 'María González',
      email: 'maria.gonzalez@panaderia.com',
      phone: '+34 600 123 456',
      role: 'manager',
      department: 'Administración',
      status: 'active',
      joinDate: '2022-03-15',
      lastLogin: '2024-01-26 09:30:00',
      permissions: ['inventory', 'sales', 'reports', 'team'],
      avatar: '/avatars/maria.jpg',
      schedule: {
        monday: '07:00-15:00',
        tuesday: '07:00-15:00',
        wednesday: '07:00-15:00',
        thursday: '07:00-15:00',
        friday: '07:00-15:00',
        saturday: 'Libre',
        sunday: 'Libre'
      }
    },
    {
      id: '2',
      name: 'Carlos Rodríguez',
      email: 'carlos.rodriguez@panaderia.com',
      phone: '+34 600 234 567',
      role: 'baker',
      department: 'Producción',
      status: 'active',
      joinDate: '2021-09-20',
      lastLogin: '2024-01-26 08:45:00',
      permissions: ['production', 'inventory'],
      avatar: '/avatars/carlos.jpg',
      schedule: {
        monday: '05:00-13:00',
        tuesday: '05:00-13:00',
        wednesday: '05:00-13:00',
        thursday: '05:00-13:00',
        friday: '05:00-13:00',
        saturday: '05:00-11:00',
        sunday: 'Libre'
      }
    },
    {
      id: '3',
      name: 'Ana Martínez',
      email: 'ana.martinez@panaderia.com',
      phone: '+34 600 345 678',
      role: 'cashier',
      department: 'Ventas',
      status: 'active',
      joinDate: '2023-01-10',
      lastLogin: '2024-01-26 10:15:00',
      permissions: ['sales', 'pos'],
      avatar: '/avatars/ana.jpg',
      schedule: {
        monday: '08:00-16:00',
        tuesday: '08:00-16:00',
        wednesday: 'Libre',
        thursday: '08:00-16:00',
        friday: '08:00-16:00',
        saturday: '09:00-14:00',
        sunday: '09:00-14:00'
      }
    },
    {
      id: '4',
      name: 'Luis Fernández',
      email: 'luis.fernandez@panaderia.com',
      phone: '+34 600 456 789',
      role: 'baker',
      department: 'Producción',
      status: 'inactive',
      joinDate: '2020-11-05',
      lastLogin: '2024-01-20 16:30:00',
      permissions: ['production'],
      avatar: '/avatars/luis.jpg',
      schedule: {
        monday: '13:00-21:00',
        tuesday: '13:00-21:00',
        wednesday: '13:00-21:00',
        thursday: 'Libre',
        friday: '13:00-21:00',
        saturday: 'Libre',
        sunday: '13:00-21:00'
      }
    },
    {
      id: '5',
      name: 'Isabel Torres',
      email: 'isabel.torres@panaderia.com',
      phone: '+34 600 567 890',
      role: 'assistant',
      department: 'Ventas',
      status: 'active',
      joinDate: '2023-06-01',
      lastLogin: '2024-01-25 18:20:00',
      permissions: ['sales'],
      avatar: '/avatars/isabel.jpg',
      schedule: {
        monday: 'Libre',
        tuesday: '16:00-20:00',
        wednesday: '16:00-20:00',
        thursday: '16:00-20:00',
        friday: '16:00-20:00',
        saturday: '14:00-20:00',
        sunday: '14:00-20:00'
      }
    }
  ];

  const roles = [
    { value: 'all', label: 'Todos los Roles', count: teamMembers.length },
    { value: 'manager', label: 'Gerente', count: teamMembers.filter(m => m.role === 'manager').length },
    { value: 'baker', label: 'Panadero', count: teamMembers.filter(m => m.role === 'baker').length },
    { value: 'cashier', label: 'Cajero', count: teamMembers.filter(m => m.role === 'cashier').length },
    { value: 'assistant', label: 'Asistente', count: teamMembers.filter(m => m.role === 'assistant').length }
  ];

  const teamStats = {
    total: teamMembers.length,
    active: teamMembers.filter(m => m.status === 'active').length,
    departments: {
      production: teamMembers.filter(m => m.department === 'Producción').length,
      sales: teamMembers.filter(m => m.department === 'Ventas').length,
      admin: teamMembers.filter(m => m.department === 'Administración').length
    }
  };

  const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case 'manager': return 'purple';
      case 'baker': return 'green';
      case 'cashier': return 'blue';
      case 'assistant': return 'yellow';
      default: return 'gray';
    }
  };

  const getStatusColor = (status: string) => {
    return status === 'active' ? 'green' : 'red';
  };

  const getRoleLabel = (role: string) => {
    switch (role) {
      case 'manager': return 'Gerente';
      case 'baker': return 'Panadero';
      case 'cashier': return 'Cajero';
      case 'assistant': return 'Asistente';
      default: return role;
    }
  };

  const filteredMembers = teamMembers.filter(member => {
    const matchesRole = selectedRole === 'all' || member.role === selectedRole;
    const matchesSearch = member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         member.email.toLowerCase().includes(searchTerm.toLowerCase());
    return matchesRole && matchesSearch;
  });

  const formatLastLogin = (timestamp: string) => {
    const date = new Date(timestamp);
    const now = new Date();
    const diffInDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
    
    if (diffInDays === 0) {
      return 'Hoy ' + date.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
    } else if (diffInDays === 1) {
      return 'Ayer';
    } else {
      return `hace ${diffInDays} días`;
    }
  };

  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title="Gestión de Equipo"
        description="Administra los miembros del equipo, roles y permisos"
        action={
          <Button onClick={() => setShowForm(true)}>
            <Plus className="w-4 h-4 mr-2" />
            Nuevo Miembro
          </Button>
        }
      />

      {/* Team Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Total Equipo</p>
              <p className="text-3xl font-bold text-[var(--text-primary)]">{teamStats.total}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-info)]/10 rounded-full flex items-center justify-center">
              <Users className="h-6 w-6 text-[var(--color-info)]" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Activos</p>
              <p className="text-3xl font-bold text-[var(--color-success)]">{teamStats.active}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
              <UserCheck className="h-6 w-6 text-[var(--color-success)]" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Producción</p>
              <p className="text-3xl font-bold text-[var(--color-primary)]">{teamStats.departments.production}</p>
            </div>
            <div className="h-12 w-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
              <Users className="h-6 w-6 text-[var(--color-primary)]" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Ventas</p>
              <p className="text-3xl font-bold text-purple-600">{teamStats.departments.sales}</p>
            </div>
            <div className="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center">
              <Users className="h-6 w-6 text-purple-600" />
            </div>
          </div>
        </Card>
      </div>

      {/* Filters and Search */}
      <Card className="p-6">
        <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 transform -translate-y-1/2 text-[var(--text-tertiary)] h-4 w-4" />
              <Input
                placeholder="Buscar miembros del equipo..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>
          
          <div className="flex gap-2 flex-wrap">
            {roles.map((role) => (
              <button
                key={role.value}
                onClick={() => setSelectedRole(role.value)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                  selectedRole === role.value
                    ? 'bg-blue-600 text-white'
                    : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:bg-[var(--bg-quaternary)]'
                }`}
              >
                {role.label} ({role.count})
              </button>
            ))}
          </div>
        </div>
      </Card>

      {/* Team Members List */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {filteredMembers.map((member) => (
          <Card key={member.id} className="p-6">
            <div className="flex items-start justify-between">
              <div className="flex items-start space-x-4 flex-1">
                <div className="w-12 h-12 bg-[var(--bg-quaternary)] rounded-full flex items-center justify-center">
                  <Users className="w-6 h-6 text-[var(--text-tertiary)]" />
                </div>
                
                <div className="flex-1">
                  <div className="flex items-center space-x-3 mb-2">
                    <h3 className="text-lg font-semibold text-[var(--text-primary)]">{member.name}</h3>
                    <Badge variant={getStatusColor(member.status)}>
                      {member.status === 'active' ? 'Activo' : 'Inactivo'}
                    </Badge>
                  </div>
                  
                  <div className="space-y-1 mb-3">
                    <div className="flex items-center text-sm text-[var(--text-secondary)]">
                      <Mail className="w-4 h-4 mr-2" />
                      {member.email}
                    </div>
                    <div className="flex items-center text-sm text-[var(--text-secondary)]">
                      <Phone className="w-4 h-4 mr-2" />
                      {member.phone}
                    </div>
                  </div>
                  
                  <div className="flex items-center space-x-2 mb-3">
                    <Badge variant={getRoleBadgeColor(member.role)}>
                      {getRoleLabel(member.role)}
                    </Badge>
                    <Badge variant="gray">
                      {member.department}
                    </Badge>
                  </div>
                  
                  <div className="text-sm text-[var(--text-tertiary)] mb-3">
                    <p>Se unió: {new Date(member.joinDate).toLocaleDateString('es-ES')}</p>
                    <p>Última conexión: {formatLastLogin(member.lastLogin)}</p>
                  </div>
                  
                  {/* Permissions */}
                  <div className="mb-3">
                    <p className="text-xs font-medium text-[var(--text-secondary)] mb-2">Permisos:</p>
                    <div className="flex flex-wrap gap-1">
                      {member.permissions.map((permission, index) => (
                        <span
                          key={index}
                          className="px-2 py-1 bg-[var(--color-info)]/10 text-[var(--color-info)] text-xs rounded-full"
                        >
                          {permission}
                        </span>
                      ))}
                    </div>
                  </div>
                  
                  {/* Schedule Preview */}
                  <div className="text-xs text-[var(--text-tertiary)]">
                    <p className="font-medium mb-1">Horario esta semana:</p>
                    <div className="grid grid-cols-2 gap-1">
                      {Object.entries(member.schedule).slice(0, 4).map(([day, hours]) => (
                        <span key={day}>
                          {day.charAt(0).toUpperCase()}: {hours}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="flex space-x-2">
                <Button size="sm" variant="outline">
                  <Edit className="w-4 h-4" />
                </Button>
                <Button 
                  size="sm" 
                  variant="outline"
                  className={member.status === 'active' ? 'text-[var(--color-error)] hover:text-[var(--color-error)]' : 'text-[var(--color-success)] hover:text-[var(--color-success)]'}
                >
                  {member.status === 'active' ? <UserX className="w-4 h-4" /> : <UserCheck className="w-4 h-4" />}
                </Button>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {filteredMembers.length === 0 && (
        <Card className="p-12 text-center">
          <Users className="h-12 w-12 text-[var(--text-tertiary)] mx-auto mb-4" />
          <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">No se encontraron miembros</h3>
          <p className="text-[var(--text-secondary)]">
            No hay miembros del equipo que coincidan con los filtros seleccionados.
          </p>
        </Card>
      )}

      {/* Add Member Modal Placeholder */}
      {showForm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <Card className="p-6 max-w-md w-full mx-4">
            <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Nuevo Miembro del Equipo</h3>
            <p className="text-[var(--text-secondary)] mb-4">
              Formulario para agregar un nuevo miembro del equipo.
            </p>
            <div className="flex space-x-2">
              <Button size="sm" onClick={() => setShowForm(false)}>
                Guardar
              </Button>
              <Button size="sm" variant="outline" onClick={() => setShowForm(false)}>
                Cancelar
              </Button>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
};

export default TeamPage;