import React, { useState, useEffect } from 'react';
import { 
  Building, 
  Hotel, 
  UtensilsCrossed, 
  Car, 
  Store,
  Users,
  MapPin,
  Star,
  Phone,
  Mail,
  Plus,
  Search,
  Edit,
  Trash2,
  Eye,
  CheckCircle,
  XCircle,
  Clock,
  Map,
  Shield
} from 'lucide-react';
import { useAdminData } from '@/hooks/useAdminData';

interface ServicesTabProps {
  establishments: any[];
  isAdmin: boolean;
  isSuperAdmin: boolean;
  loadEstablishments: (type?: string) => void;
}

const ServicesTab: React.FC<ServicesTabProps> = ({ 
  establishments, 
  isAdmin, 
  loadEstablishments 
}) => {
  const { updateEstablishment, deleteEstablishment } = useAdminData();
  const [activeFilter, setActiveFilter] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    loadEstablishments(activeFilter === 'all' ? undefined : activeFilter);
  }, [activeFilter]);

  const serviceTypes = [
    { id: 'all', label: 'Todos', icon: Building, count: establishments.length },
    { id: 'hotel', label: 'Hoteles', icon: Hotel, count: establishments.filter(e => e.type === 'hotel').length },
    { id: 'restaurant', label: 'Restaurantes', icon: UtensilsCrossed, count: establishments.filter(e => e.type === 'restaurant').length },
    { id: 'taxi', label: 'Taxis', icon: Car, count: establishments.filter(e => e.type === 'taxi').length },
    { id: 'shop', label: 'Tiendas', icon: Store, count: establishments.filter(e => e.type === 'shop').length },
    { id: 'guide', label: 'Guías Turísticos', icon: Map, count: establishments.filter(e => e.type === 'guide').length },
    { id: 'security', label: 'Politur', icon: Shield, count: establishments.filter(e => e.type === 'security').length },
  ];

  const filteredEstablishments = establishments.filter(establishment =>
    establishment.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    establishment.description?.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const handleUpdateStatus = async (id: string, status: 'active' | 'suspended' | 'pending') => {
    const result = await updateEstablishment(id, { status });
    if (result.success) {
      loadEstablishments(activeFilter === 'all' ? undefined : activeFilter);
    }
  };

  const handleDelete = async (id: string) => {
    if (window.confirm('¿Estás seguro de que quieres eliminar este establecimiento?')) {
      const result = await deleteEstablishment(id);
      if (result.success) {
        loadEstablishments(activeFilter === 'all' ? undefined : activeFilter);
      }
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold text-gray-900">Proveedores de Servicios</h2>
        <div className="flex space-x-2">
          <button className="bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 flex items-center space-x-2">
            <Plus className="w-4 h-4" />
            <span>Aprobar Pendientes</span>
          </button>
        </div>
      </div>

      {/* Service Type Filters */}
      <div className="grid services-grid-mobile md:grid-cols-4 lg:grid-cols-7 gap-4">
        {serviceTypes.map((type) => {
          const Icon = type.icon;
          return (
            <button
              key={type.id}
              onClick={() => setActiveFilter(type.id)}
              className={`p-4 rounded-lg border-2 transition-colors ${
                activeFilter === type.id
                  ? 'border-orange-500 bg-orange-50 text-orange-700'
                  : 'border-gray-200 hover:border-gray-300'
              }`}
            >
              <div className="flex items-center justify-center mb-2">
                <Icon className="w-6 h-6" />
              </div>
              <div className="text-sm font-medium">{type.label}</div>
              <div className="text-xs text-gray-500">{type.count} activos</div>
            </button>
          );
        })}
      </div>

      {/* Search */}
      <div className="bg-white rounded-lg shadow p-6">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
          <input
            type="text"
            placeholder="Buscar establecimientos..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
          />
        </div>
      </div>

      {/* Establishments Grid */}
      <div className="grid mobile-grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
        {filteredEstablishments.map((establishment) => (
          <div key={establishment.id} className="bg-white rounded-lg shadow-md overflow-hidden">
            {/* Image */}
            <div className="h-48 bg-gray-200 relative">
              <img
                src={establishment.imageUrl || '/api/placeholder/400/300'}
                alt={establishment.name}
                className="w-full h-full object-cover"
              />
              <div className="absolute top-2 right-2">
                <span className={`px-2 py-1 text-xs font-semibold rounded-full ${
                  establishment.status === 'active' ? 'bg-green-100 text-green-800' :
                  establishment.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
                  'bg-red-100 text-red-800'
                }`}>
                  {establishment.status}
                </span>
              </div>
            </div>

            {/* Content */}
            <div className="p-4">
              <div className="flex items-start justify-between mb-2">
                <h3 className="text-lg font-semibold text-gray-900 truncate">
                  {establishment.name}
                </h3>
                <div className="flex items-center space-x-1">
                  <Star className="w-4 h-4 text-yellow-400 fill-current" />
                  <span className="text-sm text-gray-600">{establishment.rating || 0}</span>
                </div>
              </div>

              <p className="text-sm text-gray-600 mb-3 line-clamp-2">
                {establishment.description}
              </p>

              <div className="space-y-2 mb-4">
                <div className="flex items-center space-x-2 text-sm text-gray-500">
                  <MapPin className="w-4 h-4" />
                  <span className="truncate">{establishment.location?.address}</span>
                </div>
                {establishment.owner && (
                  <div className="flex items-center space-x-2 text-sm text-gray-500">
                    <Users className="w-4 h-4" />
                    <span>{establishment.owner.name}</span>
                  </div>
                )}
              </div>

              {/* Actions */}
              <div className="flex items-center justify-between">
                <div className="flex space-x-2">
                  <button 
                    className="text-blue-600 hover:text-blue-900"
                    title="Ver detalles"
                  >
                    <Eye className="w-4 h-4" />
                  </button>
                  <button 
                    className="text-green-600 hover:text-green-900"
                    title="Editar"
                  >
                    <Edit className="w-4 h-4" />
                  </button>
                  <button 
                    onClick={() => handleDelete(establishment.id)}
                    className="text-red-600 hover:text-red-900"
                    title="Eliminar"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>

                {establishment.status === 'pending' && (
                  <div className="flex space-x-1">
                    <button
                      onClick={() => handleUpdateStatus(establishment.id, 'active')}
                      className="p-1 text-green-600 hover:text-green-900"
                      title="Aprobar"
                    >
                      <CheckCircle className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => handleUpdateStatus(establishment.id, 'suspended')}
                      className="p-1 text-red-600 hover:text-red-900"
                      title="Rechazar"
                    >
                      <XCircle className="w-4 h-4" />
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      {filteredEstablishments.length === 0 && (
        <div className="text-center py-12">
          <Building className="w-12 h-12 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">No hay establecimientos</h3>
          <p className="text-gray-500">No se encontraron establecimientos que coincidan con los filtros aplicados.</p>
        </div>
      )}
    </div>
  );
};

export default ServicesTab;