"use client";

import React, { useState, useTransition, useMemo } from "react";
import Link from "next/link";
import { Plus, Search, Archive, Edit, AlertCircle } from "lucide-react";
import { deleteProduct } from "@/app/admin/actions";

interface ProductItem {
  id: string;
  name: string;
  sku: string | null;
  categoryId: string;
  categoryName: string;
  seriesName: string | null;
  widthCm: number | null;
  surface: string | null;
  status: string;
  order: number;
}

interface DashboardClientProps {
  products: ProductItem[];
  stats: {
    totalProducts: number;
    publishedProducts: number;
    draftProducts: number;
    categoriesCount: number;
  };
  permissions: {
    canCreate: boolean;
    canEdit: boolean;
    canArchive: boolean;
  };
}

export default function DashboardClient({ products: initialProducts, stats, permissions }: DashboardClientProps) {
  const [products, setProducts] = useState<ProductItem[]>(initialProducts);
  const [searchQuery, setSearchQuery] = useState("");
  const [categoryFilter, setCategoryFilter] = useState("all");
  const [statusFilter, setStatusFilter] = useState("all");

  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  const categoriesList = useMemo(() => {
    const map = new Map<string, string>();
    initialProducts.forEach((p) => {
      map.set(p.categoryId, p.categoryName);
    });
    return Array.from(map.entries()).map(([id, name]) => ({ id, name }));
  }, [initialProducts]);

  const filteredProducts = useMemo(() => {
    return products.filter((product) => {
      const matchesSearch =
        product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        (product.sku && product.sku.toLowerCase().includes(searchQuery.toLowerCase())) ||
        (product.seriesName && product.seriesName.toLowerCase().includes(searchQuery.toLowerCase()));

      const matchesCategory = categoryFilter === "all" || product.categoryId === categoryFilter;
      const matchesStatus = statusFilter === "all" || product.status === statusFilter;

      return matchesSearch && matchesCategory && matchesStatus;
    });
  }, [products, searchQuery, categoryFilter, statusFilter]);

  const handleDeleteClick = (id: string) => {
    setDeleteId(id);
    setErrorMsg(null);
  };

  const handleConfirmDelete = () => {
    if (!deleteId) return;

    startTransition(async () => {
      const res = await deleteProduct(deleteId);
      if (res.success) {
        setProducts((prev) => prev.filter((p) => p.id !== deleteId));
        setDeleteId(null);
      } else if (res.error) {
        setErrorMsg(res.error);
      }
    });
  };

  return (
    <div
      className="flex w-full flex-col gap-8"
    >
      {/* Stats Row */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { label: "Toplam Ürün", val: stats.totalProducts, color: "var(--fg-primary)" },
          { label: "Yayındaki Ürünler", val: stats.publishedProducts, color: "#10B981" },
          { label: "Taslak Ürünler", val: stats.draftProducts, color: "var(--fg-muted)" },
          { label: "Kategoriler", val: stats.categoriesCount, color: "var(--ember)" },
        ].map((stat) => (
          <div
            key={stat.label}
            className="liquid-glass p-6 rounded-2xl flex flex-col gap-2"
            style={{ border: "1px solid var(--border)" }}
          >
            <span className="text-[11px] font-mono uppercase tracking-widest" style={{ color: "var(--fg-muted)" }}>
              {stat.label}
            </span>
            <span className="text-3xl font-serif font-light" style={{ color: stat.color }}>
              {stat.val}
            </span>
          </div>
        ))}
      </div>

      {/* Controls & Search */}
      <div className="flex flex-col md:flex-row items-center justify-between gap-4">
        <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
          <div className="relative flex-grow sm:flex-grow-0 sm:w-64">
            <Search size={14} className="absolute left-3.5 top-1/2 -translate-y-1/2" style={{ color: "var(--fg-muted)" }} />
            <input
              type="text"
              placeholder="Ürün adı, SKU veya seri ara..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-9 pr-4 py-2.5 rounded-full text-xs focus:outline-none transition-all"
              style={{
                background: "rgba(128,128,160,0.06)",
                border: "1px solid var(--border)",
                color: "var(--fg-primary)",
              }}
            />
          </div>

          <select
            value={categoryFilter}
            onChange={(e) => setCategoryFilter(e.target.value)}
            className="px-4 py-2.5 rounded-full text-xs focus:outline-none cursor-pointer"
            style={{
              background: "rgba(128,128,160,0.06)",
              border: "1px solid var(--border)",
              color: "var(--fg-primary)",
            }}
          >
            <option value="all">Tüm Kategoriler</option>
            {categoriesList.map((cat) => (
              <option key={cat.id} value={cat.id}>
                {cat.name}
              </option>
            ))}
          </select>

          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="px-4 py-2.5 rounded-full text-xs focus:outline-none cursor-pointer"
            style={{
              background: "rgba(128,128,160,0.06)",
              border: "1px solid var(--border)",
              color: "var(--fg-primary)",
            }}
          >
            <option value="all">Tüm Durumlar</option>
            <option value="published">Yayında</option>
            <option value="draft">Taslak</option>
          </select>
        </div>

        {permissions.canCreate ? (
          <Link
            href="/admin/products/new"
            className="w-full md:w-auto glass-pill px-6 py-3 rounded-full text-xs font-mono uppercase tracking-widest font-semibold flex items-center justify-center gap-2 hover:scale-105 transition-all shadow-lg"
            style={{ color: "var(--ember)" }}
          >
            <Plus size={15} /> Yeni Ürün Ekle
          </Link>
        ) : null}
      </div>

      {/* Data Table */}
      <div className="liquid-glass rounded-3xl overflow-hidden shadow-xl" style={{ border: "1px solid var(--border)" }}>
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs">
            <thead>
              <tr className="border-b font-mono uppercase tracking-wider" style={{ borderColor: "var(--border)", color: "var(--fg-muted)" }}>
                <th className="p-4 font-normal">Ürün</th>
                <th className="p-4 font-normal">Kategori</th>
                <th className="p-4 font-normal">Seri</th>
                <th className="p-4 font-normal">Özellikler</th>
                <th className="p-4 font-normal">Durum</th>
                <th className="p-4 font-normal text-right">İşlemler</th>
              </tr>
            </thead>
            <tbody className="divide-y" style={{ borderColor: "var(--border)" }}>
              {filteredProducts.length > 0 ? (
                filteredProducts.map((product) => (
                  <tr key={product.id} className="transition-colors hover:bg-white/[0.02]">
                    <td className="p-4">
                      <div className="flex flex-col gap-0.5">
                        <span className="font-semibold" style={{ color: "var(--fg-primary)" }}>{product.name}</span>
                        {product.sku && <span className="font-mono text-[10px]" style={{ color: "var(--fg-muted)" }}>{product.sku}</span>}
                      </div>
                    </td>
                    <td className="p-4" style={{ color: "var(--fg-secondary)" }}>{product.categoryName}</td>
                    <td className="p-4" style={{ color: "var(--fg-secondary)" }}>{product.seriesName || "-"}</td>
                    <td className="p-4" style={{ color: "var(--fg-muted)" }}>
                      <div className="flex items-center gap-2 font-mono text-[11px]">
                        {product.widthCm && <span>{product.widthCm}cm</span>}
                        {product.surface && <span>• {product.surface}</span>}
                      </div>
                    </td>
                    <td className="p-4">
                      <span
                        className="px-3 py-1 rounded-full text-[10px] font-mono font-medium uppercase tracking-wider"
                        style={{
                          background: product.status === "published" ? "rgba(16,185,129,0.12)" : "rgba(128,128,160,0.1)",
                          color: product.status === "published" ? "#10B981" : "var(--fg-muted)",
                          border: `1px solid ${product.status === "published" ? "rgba(16,185,129,0.3)" : "var(--border)"}`,
                        }}
                      >
                        {product.status === "published" ? "Yayında" : "Taslak"}
                      </span>
                    </td>
                    <td className="p-4 text-right">
                      <div className="flex items-center justify-end gap-2">
                        {permissions.canEdit ? (
                          <Link
                            href={`/admin/products/${product.id}/edit`}
                            className="px-3 py-1.5 rounded-full text-xs font-mono flex items-center gap-1.5 transition-all hover:scale-105"
                            style={{ border: "1px solid var(--border)", color: "var(--fg-secondary)" }}
                          >
                            <Edit size={13} /> Düzenle
                          </Link>
                        ) : null}
                        {permissions.canArchive ? (
                          <button
                            onClick={() => handleDeleteClick(product.id)}
                            className="px-3 py-1.5 rounded-full text-xs font-mono flex items-center gap-1.5 transition-all hover:scale-105 cursor-pointer"
                            style={{ background: "rgba(239,68,68,0.1)", color: "#EF4444", border: "1px solid rgba(239,68,68,0.2)" }}
                          >
                            <Archive size={13} /> Arşivle
                          </button>
                        ) : null}
                        {!permissions.canEdit && !permissions.canArchive ? <span className="text-fg-muted">—</span> : null}
                      </div>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={6} className="p-12 text-center text-xs font-mono" style={{ color: "var(--fg-muted)" }}>
                    Kriterlere uygun ürün bulunamadı.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Delete Modal */}
      {permissions.canArchive && deleteId && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md" style={{ background: "rgba(0,0,0,0.7)" }}>
          <div className="liquid-glass max-w-md w-full p-8 rounded-3xl flex flex-col gap-6 shadow-2xl" style={{ border: "1px solid var(--border)" }}>
            <h3 className="font-serif text-2xl font-light" style={{ color: "var(--fg-primary)" }}>Ürünü Arşivle?</h3>
            <p className="text-xs leading-relaxed" style={{ color: "var(--fg-secondary)" }}>
              Ürün herkese açık katalogdan kaldırılacak; ürün ve görsel kayıtları silinmeyecek. Daha sonra geri alınabilir.
            </p>

            {errorMsg && (
              <div className="flex items-center gap-2 p-3 rounded-xl text-xs" style={{ background: "rgba(239,68,68,0.1)", color: "#EF4444" }}>
                <AlertCircle size={15} />
                <span>{errorMsg}</span>
              </div>
            )}

            <div className="flex items-center justify-end gap-3 pt-2">
              <button
                onClick={() => setDeleteId(null)}
                disabled={isPending}
                className="px-5 py-2.5 rounded-full text-xs font-mono uppercase tracking-wider"
                style={{ border: "1px solid var(--border)", color: "var(--fg-secondary)" }}
              >
                İptal
              </button>
              <button
                onClick={handleConfirmDelete}
                disabled={isPending}
                className="px-5 py-2.5 rounded-full text-xs font-mono uppercase tracking-wider font-semibold cursor-pointer"
                style={{ background: "#EF4444", color: "#FFF" }}
              >
                {isPending ? "Arşivleniyor..." : "Arşive Al"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}