"use client";

import { useEffect, useState } from "react";
import { Plus, Pencil, Trash2, Search, Filter } from "lucide-react";
import { productApi, categoryApi } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface Product {
  id: number; name: string; description: string; price: number; stock_quantity: number;
  image_url: string; is_active: number; is_featured: number; category_id: number; category_name: string;
}
interface Category { id: number; name: string; }

const emptyForm = { name: "", description: "", price: 0, stock_quantity: 0, category_id: 0, image_url: "", is_active: 1, is_featured: 0 };

export default function ProductsPage() {
  const [products, setProducts] = useState<Product[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<Product | null>(null);
  const [form, setForm] = useState(emptyForm);
  const [saving, setSaving] = useState(false);
  const [search, setSearch] = useState("");
  const [filterCat, setFilterCat] = useState<string>("all");

  const fetchData = () => {
    Promise.all([productApi.getAll(), categoryApi.getAll(true)])
      .then(([pRes, cRes]) => { setProducts(pRes.data || []); setCategories(cRes.data || []); setLoading(false); })
      .catch(() => setLoading(false));
  };

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

  const openDialog = (p?: Product) => {
    if (p) {
      setEditing(p);
      setForm({ name: p.name, description: p.description, price: p.price, stock_quantity: p.stock_quantity, category_id: p.category_id, image_url: p.image_url || "", is_active: p.is_active, is_featured: p.is_featured });
    } else {
      setEditing(null);
      setForm({ ...emptyForm, category_id: categories[0]?.id || 0 });
    }
    setDialogOpen(true);
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      if (editing) { await productApi.update(editing.id, form); }
      else { await productApi.create(form); }
      setDialogOpen(false);
      fetchData();
    } catch { /* empty */ }
    setSaving(false);
  };

  const handleDelete = async (id: number) => {
    if (!confirm("Bu ürünü silmek istediğinize emin misiniz?")) return;
    try { await productApi.delete(id); fetchData(); } catch { /* empty */ }
  };

  const handleQuickStock = async (id: number, currentStock: number, delta: number) => {
    const newStock = Math.max(0, currentStock + delta);
    try { await productApi.update(id, { stock_quantity: newStock }); fetchData(); } catch { /* empty */ }
  };

  const filtered = products.filter((p) => {
    const matchSearch = !search || p.name.toLowerCase().includes(search.toLowerCase());
    const matchCat = filterCat === "all" || p.category_id === parseInt(filterCat);
    return matchSearch && matchCat;
  });

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h2 className="text-lg font-bold">Ürünler</h2>
          <p className="text-sm text-muted-foreground">{products.length} ürün</p>
        </div>
        <Button onClick={() => openDialog()} className="gap-2"><Plus className="w-4 h-4" /> Yeni Ürün</Button>
      </div>

      {/* Filters */}
      <div className="flex gap-3 flex-wrap">
        <div className="relative flex-1 min-w-[200px]">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Ürün ara..." className="pl-10" />
        </div>
        <Select value={filterCat} onValueChange={(val) => setFilterCat(val || "all")}>
          <SelectTrigger className="w-[180px]"><Filter className="w-4 h-4 mr-2" /><SelectValue placeholder="Kategori" /></SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Tüm Kategoriler</SelectItem>
            {categories.map((c) => <SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>)}
          </SelectContent>
        </Select>
      </div>

      <div className="bg-card rounded-xl border border-border/50 overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">#</TableHead>
              <TableHead>Ürün</TableHead>
              <TableHead>Kategori</TableHead>
              <TableHead>Fiyat</TableHead>
              <TableHead>Stok</TableHead>
              <TableHead>Durum</TableHead>
              <TableHead className="text-right">İşlemler</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              [...Array(5)].map((_, i) => (
                <TableRow key={i}>{[...Array(7)].map((__, j) => <TableCell key={j}><div className="h-4 bg-muted rounded animate-pulse" /></TableCell>)}</TableRow>
              ))
            ) : filtered.length === 0 ? (
              <TableRow><TableCell colSpan={7} className="text-center py-8 text-muted-foreground">Ürün bulunamadı</TableCell></TableRow>
            ) : (
              filtered.map((p) => (
                <TableRow key={p.id}>
                  <TableCell className="text-muted-foreground">{p.id}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-lg overflow-hidden flex-shrink-0">
                        {p.image_url ? <img src={p.image_url} alt="" className="w-full h-full object-cover" /> : "🍽️"}
                      </div>
                      <div>
                        <p className="font-medium text-sm">{p.name}</p>
                        {p.is_featured ? <Badge variant="outline" className="text-[10px] mt-0.5">⭐ Öne Çıkan</Badge> : null}
                      </div>
                    </div>
                  </TableCell>
                  <TableCell><Badge variant="secondary">{p.category_name}</Badge></TableCell>
                  <TableCell className="font-bold">₺{Number(p.price).toFixed(0)}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <button onClick={() => handleQuickStock(p.id, p.stock_quantity, -1)} className="w-6 h-6 rounded bg-muted flex items-center justify-center text-xs hover:bg-destructive/10">-</button>
                      <span className={`min-w-[2rem] text-center text-sm font-bold ${p.stock_quantity <= 5 ? "text-destructive" : ""}`}>{p.stock_quantity}</span>
                      <button onClick={() => handleQuickStock(p.id, p.stock_quantity, 1)} className="w-6 h-6 rounded bg-muted flex items-center justify-center text-xs hover:bg-emerald/10">+</button>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant={p.is_active ? "default" : "secondary"}>{p.is_active ? "Aktif" : "Pasif"}</Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      <Button variant="ghost" size="icon" onClick={() => openDialog(p)}><Pencil className="w-4 h-4" /></Button>
                      <Button variant="ghost" size="icon" onClick={() => handleDelete(p.id)} className="text-destructive hover:text-destructive"><Trash2 className="w-4 h-4" /></Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* Product Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader><DialogTitle>{editing ? "Ürün Düzenle" : "Yeni Ürün"}</DialogTitle></DialogHeader>
          <div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto">
            <div className="grid grid-cols-2 gap-4">
              <div className="col-span-2 space-y-2">
                <Label>Ürün Adı</Label>
                <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Ör: Adana Kebap" />
              </div>
              <div className="col-span-2 space-y-2">
                <Label>Açıklama</Label>
                <Textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Ürün açıklaması..." rows={3} />
              </div>
              <div className="space-y-2">
                <Label>Kategori</Label>
                <Select value={String(form.category_id)} onValueChange={(v) => setForm({ ...form, category_id: parseInt(v || "0") })}>
                  <SelectTrigger><SelectValue placeholder="Seçin" /></SelectTrigger>
                  <SelectContent>{categories.map((c) => <SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>)}</SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Fiyat (₺)</Label>
                <Input type="number" step="0.01" value={form.price} onChange={(e) => setForm({ ...form, price: parseFloat(e.target.value) || 0 })} />
              </div>
              <div className="space-y-2">
                <Label>Stok Miktarı</Label>
                <Input type="number" value={form.stock_quantity} onChange={(e) => setForm({ ...form, stock_quantity: parseInt(e.target.value) || 0 })} />
              </div>
              <div className="space-y-2">
                <Label>Görsel URL</Label>
                <Input value={form.image_url} onChange={(e) => setForm({ ...form, image_url: e.target.value })} placeholder="https://..." />
              </div>
              <div className="flex items-center justify-between">
                <Label>Aktif</Label>
                <Switch checked={form.is_active === 1} onCheckedChange={(v) => setForm({ ...form, is_active: v ? 1 : 0 })} />
              </div>
              <div className="flex items-center justify-between">
                <Label>Öne Çıkan</Label>
                <Switch checked={form.is_featured === 1} onCheckedChange={(v) => setForm({ ...form, is_featured: v ? 1 : 0 })} />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)}>İptal</Button>
            <Button onClick={handleSave} disabled={saving || !form.name || !form.category_id}>{saving ? "Kaydediliyor..." : "Kaydet"}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}