"use client";

import { useState, useEffect } from "react";
import { useAuth } from "@/lib/auth";
import { Plus, Trash2, Search, Loader2, X, Save, ToggleLeft, ToggleRight, Copy, Check, Ticket, Percent, Calendar, Hash } from "lucide-react";

const API = process.env.NEXT_PUBLIC_API_URL ;

interface VoucherItem {
  id: number; code: string; discount_type: string; discount_value: number;
  max_discount: number; min_transaction: number; max_transaction: number;
  max_usage: number; used_count: number; applicable_games: string[] | null;
  expires_at: string | null; active: boolean; createdAt: string;
}

const emptyForm = {
  code: "", discount_type: "percent",
  discount_value: "", max_discount: "", min_transaction: "", max_transaction: "",
  max_usage: "", applicable_games: "", expires_at: "",
};

/* helper: format "100000" → "100.000" */
function fmtRp(val: string | number) {
  const n = typeof val === "string" ? parseInt(val.replace(/\D/g, ""), 10) : val;
  if (!n && n !== 0) return "";
  return n.toLocaleString("id-ID");
}

/* Parse Rp input back to number string */
function parseRp(val: string) {
  return val.replace(/\D/g, "");
}

export default function AdminVouchersPage() {
  const { token } = useAuth();
  const [items, setItems] = useState<VoucherItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [showForm, setShowForm] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [form, setForm] = useState(emptyForm);
  const [saving, setSaving] = useState(false);
  const [copied, setCopied] = useState<string | null>(null);

  const fetchData = async () => {
    if (!token) return;
    setLoading(true);
    try {
      const params = search ? `?search=${search}` : "";
      const res = await fetch(`${API}/api/admin/vouchers${params}`, { headers: { Authorization: `Bearer ${token}` } });
      const json = await res.json();
      if (json.success) setItems(json.data);
    } catch (e) { console.error(e); } finally { setLoading(false); }
  };

  const handleSave = async () => {
    if (!form.code || !form.discount_value) { alert("Kode dan nilai diskon wajib diisi"); return; }
    setSaving(true);
    const method = editId ? "PUT" : "POST";
    const url = editId ? `${API}/api/admin/vouchers/${editId}` : `${API}/api/admin/vouchers`;
    const body = {
      code: form.code,
      discount_type: form.discount_type,
      discount_value: parseInt(form.discount_value) || 0,
      max_discount: parseInt(parseRp(form.max_discount)) || 0,
      min_transaction: parseInt(parseRp(form.min_transaction)) || 0,
      max_transaction: parseInt(parseRp(form.max_transaction)) || 0,
      max_usage: parseInt(form.max_usage) || 0,
      applicable_games: form.applicable_games ? form.applicable_games.split(",").map(s => s.trim()).filter(Boolean) : null,
      expires_at: form.expires_at || null,
    };
    try {
      const res = await fetch(url, { method, headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, body: JSON.stringify(body) });
      const json = await res.json();
      if (json.success) { setShowForm(false); setEditId(null); setForm(emptyForm); fetchData(); }
      else alert(json.message);
    } catch { alert("Gagal menyimpan"); } finally { setSaving(false); }
  };

  const toggleActive = async (id: number) => {
    await fetch(`${API}/api/admin/vouchers/${id}/toggle`, { method: "PATCH", headers: { Authorization: `Bearer ${token}` } });
    fetchData();
  };

  const handleDelete = async (id: number) => {
    if (!confirm("Hapus voucher ini?")) return;
    await fetch(`${API}/api/admin/vouchers/${id}`, { method: "DELETE", headers: { Authorization: `Bearer ${token}` } });
    fetchData();
  };

  const copyCode = (code: string) => {
    navigator.clipboard.writeText(code);
    setCopied(code);
    setTimeout(() => setCopied(null), 1500);
  };

  const openEdit = (v: VoucherItem) => {
    setEditId(v.id);
    setForm({
      code: v.code, discount_type: v.discount_type,
      discount_value: String(v.discount_value || ""),
      max_discount: v.max_discount ? fmtRp(v.max_discount) : "",
      min_transaction: v.min_transaction ? fmtRp(v.min_transaction) : "",
      max_transaction: v.max_transaction ? fmtRp(v.max_transaction) : "",
      max_usage: v.max_usage ? String(v.max_usage) : "",
      applicable_games: v.applicable_games ? v.applicable_games.join(", ") : "",
      expires_at: v.expires_at ? v.expires_at.slice(0, 10) : "",
    });
    setShowForm(true);
  };

  const openNew = () => {
    setEditId(null);
    setForm(emptyForm);
    setShowForm(true);
  };

  /* Rp input handler — formats with dots while keeping cursor usable */
  const handleRpChange = (field: string, raw: string) => {
    const digits = parseRp(raw);
    setForm(f => ({ ...f, [field]: digits ? fmtRp(digits) : "" }));
  };

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

  const inputClass = "w-full bg-dark-surface/50 border border-dark-border rounded-xl px-4 py-3 text-sm text-white placeholder:text-muted/40 focus:outline-none focus:border-red-500/60 focus:ring-1 focus:ring-red-500/20 transition-all";
  const labelClass = "text-[11px] font-semibold uppercase tracking-wider mb-1.5 block";

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-xl font-bold text-white">Kode Kupon</h1>
          <p className="text-xs text-muted mt-0.5">Kelola kupon diskon untuk pelanggan</p>
        </div>
        <button onClick={openNew}
          className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-r from-red-500 to-red-600 text-white text-xs font-bold hover:from-red-600 hover:to-red-700 transition-all shadow-lg shadow-red-500/25 active:scale-95">
          <Plus size={14} /> Tambah Kupon
        </button>
      </div>

      {/* Search */}
      <div className="relative max-w-sm">
        <Search size={14} className="absolute left-4 top-1/2 -translate-y-1/2 text-muted/50" />
        <input value={search} onChange={(e) => setSearch(e.target.value)} onKeyDown={(e) => e.key === "Enter" && fetchData()}
          placeholder="Pencarian..."
          className="w-full bg-dark-surface border border-dark-border rounded-xl pl-10 pr-4 py-3 text-sm text-white placeholder:text-muted/40 focus:outline-none focus:border-red-500/50 transition-all" />
      </div>

      {/* ═══ Create/Edit Form ═══ */}
      {showForm && (
        <div className="bg-dark-surface rounded-2xl border border-dark-border overflow-hidden">
          {/* Form header */}
          <div className="flex items-center justify-between px-6 py-4 border-b border-dark-border bg-white/[0.01]">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-red-500/10 flex items-center justify-center">
                <Ticket size={14} className="text-red-400" />
              </div>
              <h3 className="text-sm font-bold text-white">{editId ? "Edit Kupon" : "Buat Kupon Baru"}</h3>
            </div>
            <button onClick={() => { setShowForm(false); setEditId(null); }} className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-muted hover:text-white hover:bg-white/10 transition-all">
              <X size={14} />
            </button>
          </div>

          <div className="p-6 space-y-6">
            {/* Row 1: Code */}
            <div>
              <label className={`${labelClass} text-red-400`}>Kode Kupon <span className="text-red-500">*</span></label>
              <input value={form.code} onChange={(e) => setForm({ ...form, code: e.target.value.toUpperCase().replace(/\s/g, "") })}
                placeholder="Contoh: PROMO2026" className={inputClass} maxLength={30} />
              <p className="text-[10px] text-muted/50 mt-1">Kode unik yang akan diinput pelanggan saat checkout</p>
            </div>

            {/* Row 2: Game filter */}
            <div>
              <label className={`${labelClass} text-muted`}>Game / Voucher <span className="text-muted/50 font-normal">(opsional)</span></label>
              <input value={form.applicable_games} onChange={(e) => setForm({ ...form, applicable_games: e.target.value })}
                placeholder="Kosongkan = berlaku untuk semua game" className={inputClass} />
              <p className="text-[10px] text-muted/50 mt-1">Pisahkan dengan koma, contoh: mobile-legends, free-fire, genshin-impact</p>
            </div>

            {/* Row 3: Discount + Max Discount */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div>
                <label className={`${labelClass} text-red-400`}>% Diskon <span className="text-red-500">*</span></label>
                <div className="flex">
                  <input value={form.discount_value}
                    onChange={(e) => {
                      const v = e.target.value.replace(/\D/g, "");
                      setForm({ ...form, discount_value: v });
                    }}
                    placeholder={form.discount_type === "percent" ? "10" : "5000"}
                    className={`${inputClass} rounded-r-none border-r-0`} />
                  <select value={form.discount_type} onChange={(e) => setForm({ ...form, discount_type: e.target.value })}
                    className="bg-dark-surface border border-dark-border rounded-r-xl px-3 text-sm text-white font-bold focus:outline-none cursor-pointer min-w-[60px] text-center">
                    <option value="percent">%</option>
                    <option value="flat">Rp</option>
                  </select>
                </div>
              </div>
              <div>
                <label className={`${labelClass} text-muted`}>Maksimal Diskon</label>
                <div className="relative">
                  <span className="absolute left-4 top-1/2 -translate-y-1/2 text-muted/40 text-xs">Rp</span>
                  <input value={form.max_discount}
                    onChange={(e) => handleRpChange("max_discount", e.target.value)}
                    placeholder="100.000"
                    className={`${inputClass} pl-10`} />
                </div>
                <p className="text-[10px] text-muted/50 mt-1">Batas atas potongan harga. Contoh: diskon 10% tapi maks Rp50.000. Kosongkan = tidak dibatasi</p>
              </div>
            </div>

            {/* Row 4: Min/Max Transaction */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div>
                <label className={`${labelClass} text-muted`}>Total Transaksi Minimal</label>
                <div className="relative">
                  <span className="absolute left-4 top-1/2 -translate-y-1/2 text-muted/40 text-xs">Rp</span>
                  <input value={form.min_transaction}
                    onChange={(e) => handleRpChange("min_transaction", e.target.value)}
                    placeholder="1.000"
                    className={`${inputClass} pl-10`} />
                </div>
                <p className="text-[10px] text-muted/50 mt-1">Harga produk minimal agar voucher bisa dipakai. Contoh: Rp10.000 = hanya untuk produk ≥ Rp10.000</p>
              </div>
              <div>
                <label className={`${labelClass} text-muted`}>Total Transaksi Maksimal</label>
                <div className="relative">
                  <span className="absolute left-4 top-1/2 -translate-y-1/2 text-muted/40 text-xs">Rp</span>
                  <input value={form.max_transaction}
                    onChange={(e) => handleRpChange("max_transaction", e.target.value)}
                    placeholder="1.000.000"
                    className={`${inputClass} pl-10`} />
                </div>
                <p className="text-[10px] text-muted/50 mt-1">Harga produk maksimal agar voucher bisa dipakai. Kosongkan = tidak dibatasi</p>
              </div>
            </div>

            {/* Row 5: Max Usage + Expiry */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div>
                <label className={`${labelClass} text-muted`}>Maksimal Digunakan</label>
                <input value={form.max_usage}
                  onChange={(e) => {
                    const v = e.target.value.replace(/\D/g, "");
                    setForm({ ...form, max_usage: v });
                  }}
                  placeholder="Isi 0 atau kosongkan untuk unlimited"
                  className={inputClass} />
                <p className="text-[10px] text-muted/50 mt-1">Berapa kali voucher ini bisa dipakai total. Kosongkan / 0 = bisa dipakai tanpa batas</p>
              </div>
              <div>
                <label className={`${labelClass} text-muted`}>Masa Berlaku s/d</label>
                <div className="relative">
                  <Calendar size={14} className="absolute left-4 top-1/2 -translate-y-1/2 text-muted/40" />
                  <input type="date" value={form.expires_at} onChange={(e) => setForm({ ...form, expires_at: e.target.value })}
                    className={`${inputClass} pl-10`} />
                </div>
              </div>
            </div>

            {/* Actions */}
            <div className="flex justify-end gap-3 pt-3 border-t border-dark-border">
              <button onClick={() => { setShowForm(false); setEditId(null); }}
                className="px-6 py-2.5 rounded-xl bg-white/5 border border-dark-border text-muted text-xs font-bold hover:text-white hover:bg-white/10 transition-all">
                Batal
              </button>
              <button onClick={handleSave} disabled={saving}
                className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gradient-to-r from-red-500 to-red-600 text-white text-xs font-bold hover:from-red-600 hover:to-red-700 transition-all shadow-lg shadow-red-500/25 active:scale-95 disabled:opacity-50">
                <Save size={14} />{saving ? "Menyimpan..." : "Simpan"}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ═══ Voucher List ═══ */}
      <div className="space-y-3">
        {loading ? (
          <div className="text-center py-16 text-muted"><Loader2 className="inline animate-spin mr-2" size={16} />Memuat...</div>
        ) : items.length === 0 ? (
          <div className="text-center py-20">
            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center mx-auto mb-4">
              <Ticket size={24} className="text-muted/30" />
            </div>
            <p className="text-sm font-bold text-white mb-1">Belum ada kupon</p>
            <p className="text-xs text-muted">Klik &quot;Tambah Kupon&quot; untuk membuat kupon diskon baru</p>
          </div>
        ) : items.map((v) => (
          <div key={v.id}
            className={`bg-dark-surface rounded-2xl border overflow-hidden transition-all hover:border-white/10 ${v.active ? "border-dark-border" : "border-dark-border/50 opacity-60"}`}>
            <div className="p-3.5 sm:p-5 space-y-3">
              {/* Top: Code + Discount */}
              <div className="flex items-center gap-3">
                <div className={`w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center text-lg font-black shrink-0 ${v.discount_type === "percent" ? "bg-red-500/10 text-red-400" : "bg-green-500/10 text-green-400"}`}>
                  {v.discount_type === "percent" ? <Percent size={18} /> : <span className="text-xs">Rp</span>}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <h4 className="text-sm sm:text-lg font-black text-white tracking-wider truncate">{v.code}</h4>
                    <button onClick={() => copyCode(v.code)} className="p-1 rounded-md hover:bg-white/5 text-muted/50 hover:text-white transition-colors shrink-0" title="Copy kode">
                      {copied === v.code ? <Check size={12} className="text-green-400" /> : <Copy size={12} />}
                    </button>
                  </div>
                  <p className={`text-xs sm:text-sm font-bold ${v.discount_type === "percent" ? "text-red-400" : "text-green-400"}`}>
                    {v.discount_type === "percent" ? `${v.discount_value}%` : `Rp${v.discount_value.toLocaleString("id-ID")}`}
                    {v.max_discount > 0 && v.discount_type === "percent" && (
                      <span className="text-muted/60 text-[9px] font-normal ml-1.5">(maks Rp{v.max_discount.toLocaleString("id-ID")})</span>
                    )}
                  </p>
                </div>
              </div>

              {/* Meta info pills */}
              <div className="flex items-center gap-2 flex-wrap">
                <div className="bg-white/[0.03] rounded-lg px-2.5 py-1.5 text-center">
                  <p className="text-[8px] text-muted/50 uppercase tracking-wide">Game</p>
                  <p className="text-[10px] text-white font-medium">{v.applicable_games ? `${v.applicable_games.length} game` : "Semua"}</p>
                </div>
                <div className="bg-white/[0.03] rounded-lg px-2.5 py-1.5 text-center">
                  <p className="text-[8px] text-muted/50 uppercase tracking-wide">Dipakai</p>
                  <p className="text-[10px] text-white font-medium">{v.used_count}{v.max_usage > 0 ? ` / ${v.max_usage}` : " / ∞"}</p>
                </div>
                <div className="bg-white/[0.03] rounded-lg px-2.5 py-1.5 text-center">
                  <p className="text-[8px] text-muted/50 uppercase tracking-wide">Berlaku</p>
                  <p className="text-[10px] text-white font-medium">{v.expires_at ? new Date(v.expires_at).toLocaleDateString("id-ID", { day: "2-digit", month: "short", year: "numeric" }) : "Selamanya"}</p>
                </div>
              </div>

              {/* Actions */}
              <div className="flex items-center gap-2 pt-1 border-t border-dark-border/50">
                <button onClick={() => openEdit(v)}
                  className="px-3 py-1.5 rounded-lg bg-white/5 border border-dark-border text-[10px] sm:text-xs text-muted font-medium hover:text-white hover:bg-white/10 transition-all flex-1 sm:flex-none">
                  Atur Kupon
                </button>
                <button onClick={() => toggleActive(v.id)}
                  className={`p-1.5 rounded-lg transition-all ${v.active ? "text-green-400 hover:bg-green-500/10" : "text-muted/40 hover:bg-white/5"}`}
                  title={v.active ? "Nonaktifkan" : "Aktifkan"}>
                  {v.active ? <ToggleRight size={22} /> : <ToggleLeft size={22} />}
                </button>
                <button onClick={() => handleDelete(v.id)}
                  className="p-1.5 rounded-lg text-muted/30 hover:text-red-400 hover:bg-red-500/10 transition-all" title="Hapus">
                  <Trash2 size={14} />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}