"use client";

import { useEffect, useState, useCallback } from "react";
import { Banknote, RefreshCw } from "lucide-react";
import { tableApi } from "@/lib/api";

interface OrderItem {
  product_name: string;
  quantity: number;
  unit_price: number;
}

interface Order {
  id: number;
  total_amount: number;
  status: string;
  created_at: string;
  items: OrderItem[];
}

interface TableData {
  table_number: number;
  status: "empty" | "occupied";
  total_amount: number;
  orders: Order[];
}

export default function AdminTablesPage() {
  const [tables, setTables] = useState<TableData[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [selectedTable, setSelectedTable] = useState<TableData | null>(null);
  const [paying, setPaying] = useState(false);

  const fetchTables = useCallback(async (isRefresh = false) => {
    if (isRefresh) setRefreshing(true);
    else setLoading(true);

    try {
      const res = await tableApi.getAll();
      setTables(res.data || []);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, []);

  useEffect(() => {
    fetchTables();
    const interval = setInterval(() => fetchTables(true), 15000);
    return () => clearInterval(interval);
  }, [fetchTables]);

  const handlePay = useCallback(async () => {
    if (!selectedTable) return;

    setPaying(true);
    try {
      const res = await tableApi.payAll(selectedTable.table_number);
      console.log("Ödeme sonucu:", res);
      setSelectedTable(null);
      fetchTables();
    } catch (err) {
      console.error("Hesap kapatılırken hata oluştu:", err);
    } finally {
      setPaying(false);
    }
  }, [selectedTable, fetchTables]);

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold">Aktif Masalar</h1>
          <p className="text-muted-foreground mt-1">Masa durumlarını ve hesaplarını yönetin.</p>
        </div>
        <button
          onClick={() => fetchTables(true)}
          disabled={refreshing || loading}
          className="flex items-center gap-2 bg-muted text-foreground px-4 py-2 rounded-xl text-sm font-semibold hover:bg-accent transition-colors disabled:opacity-50"
        >
          <RefreshCw className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`} />
          Yenile
        </button>
      </div>

      {loading && !refreshing ? (
        <div className="text-center py-20">
          <div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin mx-auto mb-4" />
          <p className="text-muted-foreground">Masalar yükleniyor...</p>
        </div>
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-5 gap-4">
          {tables.map((table) => {
            const isOccupied = table.status === "occupied";
            return (
              <button
                key={table.table_number}
                onClick={() => { if (isOccupied) setSelectedTable(table); }}
                disabled={!isOccupied}
                className={`relative p-5 rounded-2xl border text-left transition-all duration-300 ${
                  isOccupied
                    ? "bg-primary/10 border-primary/30 hover:border-primary/60 hover:shadow-lg hover:shadow-primary/10"
                    : "bg-card border-border/50 opacity-60 cursor-default"
                }`}
              >
                <div className="flex justify-between items-start mb-4">
                  <h3 className={`text-2xl font-black ${isOccupied ? "text-primary" : "text-muted-foreground"}`}>
                    {table.table_number}
                  </h3>
                  {isOccupied && (
                    <div className="w-2.5 h-2.5 rounded-full bg-destructive animate-pulse" />
                  )}
                </div>
                
                <div className="space-y-1">
                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                    {isOccupied ? "Dolu" : "Boş"}
                  </p>
                  {isOccupied && (
                    <p className="text-lg font-bold text-foreground">
                      ₺{Number(table.total_amount).toFixed(2)}
                    </p>
                  )}
                </div>
              </button>
            );
          })}
        </div>
      )}

      {/* Table Details Modal */}
      {selectedTable && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm"
          onClick={(e) => { if (e.target === e.currentTarget) setSelectedTable(null); }}
        >
          <div className="bg-card w-full max-w-lg rounded-3xl border border-border/50 shadow-2xl flex flex-col max-h-[90vh]">
            <div className="flex items-center justify-between p-6 border-b border-border/50">
              <div>
                <h2 className="text-2xl font-bold">Masa {selectedTable.table_number}</h2>
                <p className="text-sm text-muted-foreground">Adisyon Detayı</p>
              </div>
              <button
                onClick={() => setSelectedTable(null)}
                className="w-10 h-10 rounded-full bg-muted flex items-center justify-center hover:bg-accent transition-colors"
              >
                ✕
              </button>
            </div>

            <div className="flex-1 overflow-y-auto p-6 space-y-6">
              {selectedTable.orders.map((order) => (
                <div key={order.id} className="bg-muted/50 rounded-2xl p-4 border border-border/50">
                  <div className="flex justify-between items-center mb-3">
                    <span className="text-xs font-semibold text-muted-foreground">Sipariş #{order.id}</span>
                    <span className="text-xs font-bold px-2 py-1 bg-background rounded-full border border-border/50">
                      {new Date(order.created_at).toLocaleTimeString("tr-TR", { hour: "2-digit", minute: "2-digit" })}
                    </span>
                  </div>
                  <div className="space-y-2">
                    {order.items.map((item, idx) => (
                      <div key={idx} className="flex justify-between text-sm">
                        <span>{item.quantity}x {item.product_name}</span>
                        <span className="font-semibold">₺{(item.quantity * item.unit_price).toFixed(2)}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            <div className="p-6 border-t border-border/50 bg-muted/20">
              <div className="flex justify-between items-center mb-6">
                <span className="text-lg text-muted-foreground font-medium">Genel Toplam</span>
                <span className="text-3xl font-black text-primary">₺{Number(selectedTable.total_amount).toFixed(2)}</span>
              </div>
              
              <button
                type="button"
                onClick={handlePay}
                disabled={paying}
                className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-emerald to-emerald-dark hover:from-emerald-dark hover:to-emerald text-white py-4 rounded-xl font-bold shadow-lg shadow-emerald/25 transition-all disabled:opacity-50"
              >
                <Banknote className="w-5 h-5" />
                {paying ? "İşleniyor..." : "Hesabı Kapat (Ödeme Alındı)"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}