"use client";

import { useState, useEffect } from "react";
import { useAuth } from "@/lib/auth";
import { Search, Loader2, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";

const API = process.env.NEXT_PUBLIC_API_URL ;

export default function AdminProductsPage() {
  const { token } = useAuth();
  const [products, setProducts] = useState<any[]>([]);
  const [pagination, setPagination] = useState({ total: 0, page: 1, totalPages: 1 });
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [syncing, setSyncing] = useState(false);

  const fetchProducts = async (page = 1) => {
    if (!token) return;
    setLoading(true);
    const params = new URLSearchParams({ page: String(page), limit: "50" });
    if (search) params.set("search", search);
    if (statusFilter) params.set("status", statusFilter);
    try {
      const res = await fetch(`${API}/api/admin/products?${params}`, { headers: { Authorization: `Bearer ${token}` } });
      const json = await res.json();
      if (json.success) { setProducts(json.data); setPagination(json.pagination); }
    } catch (err) { console.error(err); }
    finally { setLoading(false); }
  };

  const syncProducts = async () => {
    setSyncing(true);
    try {
      const res = await fetch(`${API}/api/admin/sync-products`, { method: "POST", headers: { Authorization: `Bearer ${token}` } });
      const json = await res.json();
      alert(json.message || "Done");
      fetchProducts();
    } catch { alert("Gagal sync"); }
    finally { setSyncing(false); }
  };

  useEffect(() => { fetchProducts(); }, [token, statusFilter]);

  const statusBadge = (s: string) => {
    if (s === "available") return "text-green-400 bg-green-500/10";
    if (s === "empty") return "text-yellow-400 bg-yellow-500/10";
    return "text-red-400 bg-red-500/10";
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold text-white">Produk</h1>
        <button onClick={syncProducts} disabled={syncing} className="flex items-center gap-2 px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-xs font-bold hover:bg-red-500/20 transition-all">
          <RefreshCw size={14} className={syncing ? "animate-spin" : ""} />
          {syncing ? "Syncing..." : "Sync dari VIPayment"}
        </button>
      </div>

      <div className="flex flex-wrap gap-3">
        <div className="relative flex-1 min-w-[200px]">
          <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
          <input value={search} onChange={(e) => setSearch(e.target.value)} onKeyDown={(e) => e.key === "Enter" && fetchProducts()}
            placeholder="Cari produk, game, kode..."
            className="w-full bg-dark-surface border border-dark-border rounded-lg pl-9 pr-4 py-2 text-sm text-white placeholder:text-muted focus:outline-none focus:border-red-500/50" />
        </div>
        <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} className="bg-dark-surface border border-dark-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none">
          <option value="">Semua Status</option>
          <option value="available">Available</option>
          <option value="empty">Empty</option>
          <option value="disabled">Disabled</option>
        </select>
      </div>

      <div className="bg-dark-surface rounded-xl border border-dark-border overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs whitespace-nowrap">
            <thead className="bg-white/[0.02] text-muted border-b border-dark-border">
              <tr>
                <th className="px-4 py-3 font-medium">Kode VIP</th>
                <th className="px-4 py-3 font-medium">Game</th>
                <th className="px-4 py-3 font-medium">Produk</th>
                <th className="px-4 py-3 font-medium">Harga Modal</th>
                <th className="px-4 py-3 font-medium">Harga Jual</th>
                <th className="px-4 py-3 font-medium">Margin</th>
                <th className="px-4 py-3 font-medium text-center">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-dark-border">
              {loading ? (
                <tr><td colSpan={7} className="px-4 py-12 text-center text-muted"><Loader2 className="inline animate-spin mr-2" size={16} />Memuat...</td></tr>
              ) : products.length === 0 ? (
                <tr><td colSpan={7} className="px-4 py-12 text-center text-muted">Tidak ada produk</td></tr>
              ) : products.map((p) => {
                const margin = p.sell_price - p.price_basic;
                const marginPct = p.price_basic > 0 ? ((margin / p.price_basic) * 100).toFixed(1) : "0";
                return (
                  <tr key={p.id} className="hover:bg-white/[0.02] transition-colors">
                    <td className="px-4 py-3 font-mono text-muted">{p.vip_code}</td>
                    <td className="px-4 py-3 text-white">{p.game_name}</td>
                    <td className="px-4 py-3 text-white">{p.product_name}</td>
                    <td className="px-4 py-3 text-muted">Rp {Number(p.price_basic).toLocaleString("id-ID")}</td>
                    <td className="px-4 py-3 text-primary font-bold">Rp {Number(p.sell_price).toLocaleString("id-ID")}</td>
                    <td className="px-4 py-3 text-green-400">+Rp {margin.toLocaleString("id-ID")} ({marginPct}%)</td>
                    <td className="px-4 py-3 text-center">
                      <span className={`inline-block px-2 py-0.5 rounded text-[10px] font-bold ${statusBadge(p.status)}`}>{p.status}</span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        {pagination.totalPages > 1 && (
          <div className="flex items-center justify-between px-4 py-3 border-t border-dark-border">
            <p className="text-xs text-muted">Total: {pagination.total} produk</p>
            <div className="flex items-center gap-2">
              <button onClick={() => fetchProducts(pagination.page - 1)} disabled={pagination.page <= 1} className="p-1.5 rounded bg-white/5 text-muted hover:text-white disabled:opacity-30"><ChevronLeft size={14} /></button>
              <span className="text-xs text-white">{pagination.page} / {pagination.totalPages}</span>
              <button onClick={() => fetchProducts(pagination.page + 1)} disabled={pagination.page >= pagination.totalPages} className="p-1.5 rounded bg-white/5 text-muted hover:text-white disabled:opacity-30"><ChevronRight size={14} /></button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}