import React, { useState, useEffect } from 'react';
import { Plus, Edit, Trash2, UtensilsCrossed, Table, ClipboardList } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { useToast } from '@/hooks/use-toast';
import { apiClient } from '@/services/adminApi';

const RestaurantPOS = () => {
  const [establishments, setEstablishments] = useState<any[]>([]);
  const [selectedEstablishment, setSelectedEstablishment] = useState<string>('');
  const [menuItems, setMenuItems] = useState<any[]>([]);
  const [tables, setTables] = useState<any[]>([]);
  const [orders, setOrders] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const { toast } = useToast();

  const [menuForm, setMenuForm] = useState({
    name: '',
    description: '',
    category: '',
    price: 0,
    isAvailable: true
  });

  const [tableForm, setTableForm] = useState({
    tableNumber: '',
    capacity: 4,
    status: 'available'
  });

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

  useEffect(() => {
    if (selectedEstablishment) {
      loadRestaurantData();
    }
  }, [selectedEstablishment]);

  const loadEstablishments = async () => {
    try {
      const response = await apiClient.get('/commerce/establishments?type=restaurant');
      setEstablishments(Array.isArray(response) ? response : (response as any)?.establishments || []);
    } catch (error) {
      console.error('Error loading establishments:', error);
    }
  };

  const loadRestaurantData = async () => {
    if (!selectedEstablishment) return;
    setLoading(true);
    try {
      const [menuData, tablesData, ordersData] = await Promise.all([
        apiClient.get(`/restaurant/establishments/${selectedEstablishment}/menu`),
        apiClient.get(`/restaurant/establishments/${selectedEstablishment}/tables`),
        apiClient.get(`/restaurant/establishments/${selectedEstablishment}/orders`)
      ]);
      
      setMenuItems(Array.isArray(menuData) ? menuData : (menuData as any)?.items || []);
      setTables(Array.isArray(tablesData) ? tablesData : (tablesData as any)?.tables || []);
      setOrders(Array.isArray(ordersData) ? ordersData : (ordersData as any)?.orders || []);
    } catch (error) {
      console.error('Error loading restaurant data:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleCreateMenuItem = async () => {
    try {
      await apiClient.post('/restaurant/menu-items', {
        ...menuForm,
        establishmentId: parseInt(selectedEstablishment)
      });
      toast({ title: 'Éxito', description: 'Ítem de menú creado' });
      setMenuForm({ name: '', description: '', category: '', price: 0, isAvailable: true });
      loadRestaurantData();
    } catch (error: any) {
      toast({ title: 'Error', description: error?.message || 'No se pudo crear el ítem', variant: 'destructive' });
    }
  };

  const handleDeleteMenuItem = async (id: number) => {
    try {
      await apiClient.delete(`/restaurant/menu-items/${id}`);
      toast({ title: 'Éxito', description: 'Ítem eliminado' });
      loadRestaurantData();
    } catch (error) {
      toast({ title: 'Error', description: 'No se pudo eliminar', variant: 'destructive' });
    }
  };

  const handleCreateTable = async () => {
    try {
      await apiClient.post('/restaurant/tables', {
        ...tableForm,
        establishmentId: parseInt(selectedEstablishment)
      });
      toast({ title: 'Éxito', description: 'Mesa creada' });
      setTableForm({ tableNumber: '', capacity: 4, status: 'available' });
      loadRestaurantData();
    } catch (error: any) {
      toast({ title: 'Error', description: error?.message || 'No se pudo crear la mesa', variant: 'destructive' });
    }
  };

  const handleUpdateTableStatus = async (tableId: number, status: string) => {
    try {
      await apiClient.patch(`/restaurant/tables/${tableId}/status`, { status });
      toast({ title: 'Éxito', description: 'Estado actualizado' });
      loadRestaurantData();
    } catch (error) {
      toast({ title: 'Error', description: 'No se pudo actualizar', variant: 'destructive' });
    }
  };

  const handleUpdateOrderStatus = async (orderId: number, status: string) => {
    try {
      await apiClient.patch(`/restaurant/orders/${orderId}/status`, { status });
      toast({ title: 'Éxito', description: 'Orden actualizada' });
      loadRestaurantData();
    } catch (error) {
      toast({ title: 'Error', description: 'No se pudo actualizar', variant: 'destructive' });
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <Select value={selectedEstablishment} onValueChange={setSelectedEstablishment}>
          <SelectTrigger className="w-64">
            <SelectValue placeholder="Selecciona un restaurante" />
          </SelectTrigger>
          <SelectContent>
            {establishments.map((est) => (
              <SelectItem key={est.id} value={est.id.toString()}>
                {est.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {selectedEstablishment && (
        <Tabs defaultValue="menu" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="menu">Menú</TabsTrigger>
            <TabsTrigger value="tables">Mesas</TabsTrigger>
            <TabsTrigger value="orders">Órdenes</TabsTrigger>
          </TabsList>

          <TabsContent value="menu" className="space-y-4">
            <div className="flex justify-end">
              <Dialog>
                <DialogTrigger asChild>
                  <Button>
                    <Plus className="w-4 h-4 mr-2" />
                    Nuevo Ítem
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Agregar Ítem al Menú</DialogTitle>
                  </DialogHeader>
                  <div className="grid gap-4">
                    <div>
                      <Label>Nombre</Label>
                      <Input
                        value={menuForm.name}
                        onChange={(e) => setMenuForm({ ...menuForm, name: e.target.value })}
                        placeholder="Nombre del plato"
                      />
                    </div>
                    <div>
                      <Label>Descripción</Label>
                      <Textarea
                        value={menuForm.description}
                        onChange={(e) => setMenuForm({ ...menuForm, description: e.target.value })}
                        placeholder="Describe el plato..."
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <Label>Categoría</Label>
                        <Input
                          value={menuForm.category}
                          onChange={(e) => setMenuForm({ ...menuForm, category: e.target.value })}
                          placeholder="Ej: Entradas"
                        />
                      </div>
                      <div>
                        <Label>Precio</Label>
                        <Input
                          type="number"
                          value={menuForm.price}
                          onChange={(e) => setMenuForm({ ...menuForm, price: parseFloat(e.target.value) })}
                          placeholder="0.00"
                        />
                      </div>
                    </div>
                    <Button onClick={handleCreateMenuItem}>Crear Ítem</Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {menuItems.map((item) => (
                <Card key={item.id}>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-base font-medium">{item.name}</CardTitle>
                    <Button variant="ghost" size="sm" onClick={() => handleDeleteMenuItem(item.id)}>
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground mb-2">{item.description}</p>
                    <div className="flex justify-between items-center">
                      <Badge variant="outline">{item.category}</Badge>
                      <span className="text-lg font-bold">${item.price}</span>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          <TabsContent value="tables" className="space-y-4">
            <div className="flex justify-end">
              <Dialog>
                <DialogTrigger asChild>
                  <Button>
                    <Plus className="w-4 h-4 mr-2" />
                    Nueva Mesa
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Agregar Mesa</DialogTitle>
                  </DialogHeader>
                  <div className="grid gap-4">
                    <div>
                      <Label>Número de Mesa</Label>
                      <Input
                        value={tableForm.tableNumber}
                        onChange={(e) => setTableForm({ ...tableForm, tableNumber: e.target.value })}
                        placeholder="Ej: 1, A1, etc."
                      />
                    </div>
                    <div>
                      <Label>Capacidad</Label>
                      <Input
                        type="number"
                        value={tableForm.capacity}
                        onChange={(e) => setTableForm({ ...tableForm, capacity: parseInt(e.target.value) })}
                      />
                    </div>
                    <Button onClick={handleCreateTable}>Crear Mesa</Button>
                  </div>
                </DialogContent>
              </Dialog>
            </div>

            <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4">
              {tables.map((table) => (
                <Card key={table.id}>
                  <CardHeader>
                    <CardTitle className="flex items-center justify-between">
                      <span>Mesa {table.tableNumber}</span>
                      <Table className="w-5 h-5" />
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground mb-2">
                      Capacidad: {table.capacity} personas
                    </p>
                    <Select
                      value={table.status}
                      onValueChange={(value) => handleUpdateTableStatus(table.id, value)}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="available">Disponible</SelectItem>
                        <SelectItem value="occupied">Ocupada</SelectItem>
                        <SelectItem value="reserved">Reservada</SelectItem>
                      </SelectContent>
                    </Select>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          <TabsContent value="orders" className="space-y-4">
            <div className="grid gap-4">
              {orders.map((order) => (
                <Card key={order.id}>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <div className="flex items-center space-x-4">
                      <ClipboardList className="w-8 h-8 text-primary" />
                      <div>
                        <CardTitle>Orden #{order.id}</CardTitle>
                        <p className="text-sm text-muted-foreground">Mesa {order.tableNumber}</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="text-lg font-bold">${order.total?.toFixed(2)}</span>
                      <Select
                        value={order.status}
                        onValueChange={(value) => handleUpdateOrderStatus(order.id, value)}
                      >
                        <SelectTrigger className="w-32">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="pending">Pendiente</SelectItem>
                          <SelectItem value="preparing">Preparando</SelectItem>
                          <SelectItem value="ready">Lista</SelectItem>
                          <SelectItem value="delivered">Entregada</SelectItem>
                          <SelectItem value="paid">Pagada</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-1">
                      {order.items?.map((item: any, idx: number) => (
                        <div key={idx} className="flex justify-between text-sm">
                          <span>{item.quantity}x {item.menuItem?.name}</span>
                          <span>${(item.quantity * item.price).toFixed(2)}</span>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      )}
    </div>
  );
};

export default RestaurantPOS;