"use client";

import { useEffect, useState, useCallback } from "react";
import { RefreshCw, Clock, ChefHat, CheckCircle, Truck, XCircle, Eye } from "lucide-react";
import { orderApi } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

interface Order {
  id: number; table_number: number; total_amount: number; status: string;
  customer_note: string; created_at: string; items?: Array<{ product_name: string; quantity: number; unit_price: number }>;
}

const statusConfig: Record<string, { label: string; color: string; icon: React.ElementType; next?: string; nextLabel?: string }> = {
  pending: { label: "Bekliyor", color: "bg-amber/10 text-amber border-amber/30", icon: Clock, next: "preparing", nextLabel: "Hazırla" },
  preparing: { label: "Hazırlanıyor", color: "bg-blue-500/10 text-blue-500 border-blue-500/30", icon: ChefHat, next: "ready", nextLabel: "Hazır" },
  ready: { label: "Hazır", color: "bg-emerald/10 text-emerald border-emerald/30", icon: CheckCircle, next: "delivered", nextLabel: "Teslim Et" },
  delivered: { label: "Teslim Edildi", color: "bg-primary/10 text-primary border-primary/30", icon: Truck },
  cancelled: { label: "İptal", color: "bg-destructive/10 text-destructive border-destructive/30", icon: XCircle },
};

export default function OrdersPage() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState("all");
  const [detailOrder, setDetailOrder] = useState<Order | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);

  const fetchOrders = useCallback(() => {
    setLoading(true);
    const status = activeTab === "all" ? undefined : activeTab;
    orderApi.getAll(status).then((res) => { setOrders(res.data || []); setLoading(false); }).catch(() => setLoading(false));
  }, [activeTab]);

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

  // Auto-refresh every 15 seconds
  useEffect(() => {
    const interval = setInterval(fetchOrders, 15000);
    return () => clearInterval(interval);
  }, [fetchOrders]);

  const handleStatusUpdate = async (id: number, newStatus: string) => {
    try { await orderApi.updateStatus(id, newStatus); fetchOrders(); } catch { /* empty */ }
  };

  const handleCancel = async (id: number) => {
    if (!confirm("Siparişi iptal etmek istediğinize emin misiniz?")) return;
    try { await orderApi.updateStatus(id, "cancelled"); fetchOrders(); } catch { /* empty */ }
  };

  const viewDetail = async (id: number) => {
    try {
      const res = await orderApi.getById(id);
      setDetailOrder(res.data);
      setDetailOpen(true);
    } catch { /* empty */ }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div><h2 className="text-lg font-bold">Siparişler</h2><p className="text-sm text-muted-foreground">Canlı sipariş takibi</p></div>
        <Button variant="outline" onClick={fetchOrders} className="gap-2"><RefreshCw className="w-4 h-4" /> Yenile</Button>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid grid-cols-5 w-full">
          <TabsTrigger value="all">Tümü</TabsTrigger>
          <TabsTrigger value="pending">Bekleyen</TabsTrigger>
          <TabsTrigger value="preparing">Hazırlanan</TabsTrigger>
          <TabsTrigger value="ready">Hazır</TabsTrigger>
          <TabsTrigger value="delivered">Teslim</TabsTrigger>
        </TabsList>
      </Tabs>

      {loading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => <div key={i} className="bg-card rounded-xl border border-border/50 p-5 animate-pulse"><div className="h-20 bg-muted rounded" /></div>)}
        </div>
      ) : orders.length === 0 ? (
        <div className="text-center py-16 text-muted-foreground">
          <p className="text-4xl mb-3">📋</p>
          <p>Bu kategoride sipariş bulunmuyor.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {orders.map((order) => {
            const config = statusConfig[order.status] || statusConfig.pending;
            const StatusIcon = config.icon;
            return (
              <div key={order.id} className="bg-card rounded-xl border border-border/50 p-4 hover:shadow-md transition-shadow">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-bold">#{order.id}</span>
                    <Badge variant="outline" className={config.color}>
                      <StatusIcon className="w-3 h-3 mr-1" />{config.label}
                    </Badge>
                  </div>
                  <span className="text-xs text-muted-foreground">
                    Masa {order.table_number}
                  </span>
                </div>

                <div className="flex items-center justify-between mb-3">
                  <span className="text-xl font-bold text-primary">₺{Number(order.total_amount).toFixed(0)}</span>
                  <span className="text-xs text-muted-foreground">
                    {new Date(order.created_at).toLocaleTimeString("tr-TR", { hour: "2-digit", minute: "2-digit" })}
                  </span>
                </div>

                {order.customer_note && (
                  <p className="text-xs text-muted-foreground bg-muted/50 rounded-lg p-2 mb-3 italic">💬 {order.customer_note}</p>
                )}

                <div className="flex gap-2">
                  <Button variant="outline" size="sm" onClick={() => viewDetail(order.id)} className="flex-1 gap-1">
                    <Eye className="w-3 h-3" /> Detay
                  </Button>
                  {config.next && (
                    <Button size="sm" onClick={() => handleStatusUpdate(order.id, config.next!)} className="flex-1">
                      {config.nextLabel}
                    </Button>
                  )}
                  {order.status !== "cancelled" && order.status !== "delivered" && (
                    <Button variant="outline" size="sm" onClick={() => handleCancel(order.id)} className="text-destructive hover:text-destructive">
                      <XCircle className="w-3 h-3" />
                    </Button>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Order Detail Dialog */}
      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
        <DialogContent>
          <DialogHeader><DialogTitle>Sipariş #{detailOrder?.id}</DialogTitle></DialogHeader>
          {detailOrder && (
            <div className="space-y-4 py-2">
              <div className="grid grid-cols-2 gap-2 text-sm">
                <div><span className="text-muted-foreground">Masa:</span> <strong>{detailOrder.table_number}</strong></div>
                <div><span className="text-muted-foreground">Toplam:</span> <strong className="text-primary">₺{Number(detailOrder.total_amount).toFixed(0)}</strong></div>
                <div><span className="text-muted-foreground">Durum:</span> <Badge variant="outline" className={statusConfig[detailOrder.status]?.color}>{statusConfig[detailOrder.status]?.label}</Badge></div>
                <div><span className="text-muted-foreground">Tarih:</span> <strong>{new Date(detailOrder.created_at).toLocaleString("tr-TR")}</strong></div>
              </div>
              {detailOrder.customer_note && <p className="text-sm bg-muted/50 rounded-lg p-3 italic">💬 {detailOrder.customer_note}</p>}
              <div className="border-t border-border/50 pt-3">
                <h4 className="text-sm font-bold mb-2">Sipariş Kalemleri</h4>
                {detailOrder.items?.map((item, i) => (
                  <div key={i} className="flex justify-between py-1.5 text-sm border-b border-border/30 last:border-0">
                    <span>{item.product_name} x{item.quantity}</span>
                    <span className="font-medium">₺{(Number(item.unit_price) * item.quantity).toFixed(0)}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}