"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useConfirm } from "@/components/shared/use-confirm";

interface PromoCode {
  id: number;
  code: string;
  discount_percent: number | null;
  bonus_credits: number | null;
  max_uses: number | null;
  used_count: number;
  expires_at: string | null;
  is_active: boolean;
  created_at: string;
}

export default function PromoCodeManager({ initialCodes }: { initialCodes: PromoCode[] }) {
  const router = useRouter();
  const [codes, setCodes] = useState(initialCodes);
  const [showForm, setShowForm] = useState(false);
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState({
    code: "",
    discount_percent: "",
    bonus_credits: "",
    max_uses: "",
    expires_at: "",
  });
  const { confirm: askConfirm, dialog: confirmDialog } = useConfirm();

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    try {
      const res = await fetch("/api/admin/promo-codes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          code: form.code.toUpperCase(),
          discount_percent: form.discount_percent ? Number(form.discount_percent) : null,
          bonus_credits: form.bonus_credits ? Number(form.bonus_credits) : null,
          max_uses: form.max_uses ? Number(form.max_uses) : null,
          expires_at: form.expires_at || null,
        }),
      });
      if (res.ok) {
        setForm({ code: "", discount_percent: "", bonus_credits: "", max_uses: "", expires_at: "" });
        setShowForm(false);
        router.refresh();
      }
    } catch {
      // error
    } finally {
      setSaving(false);
    }
  };

  const toggleActive = async (id: number, isActive: boolean) => {
    try {
      await fetch("/api/admin/promo-codes", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id, is_active: !isActive }),
      });
      setCodes((prev) =>
        prev.map((c) => (c.id === id ? { ...c, is_active: !isActive } : c))
      );
    } catch {
      // error
    }
  };

  const handleDelete = async (id: number) => {
    if (!(await askConfirm({ title: "Delete promo code", message: "Are you sure you want to delete this promo code?" }))) return;
    try {
      await fetch("/api/admin/promo-codes", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id }),
      });
      setCodes((prev) => prev.filter((c) => c.id !== id));
    } catch {
      // error
    }
  };

  return (
    <div className="space-y-6">
      {confirmDialog}
      {/* Create button / form */}
      {!showForm ? (
        <button
          onClick={() => setShowForm(true)}
          className="bg-gold hover:bg-gold-light text-black font-semibold px-6 py-2.5 rounded-xl transition-all"
        >
          + Create Promo Code
        </button>
      ) : (
        <form onSubmit={handleCreate} className="bg-surface rounded-xl border border-surface-light p-6 space-y-4">
          <h2 className="text-lg font-semibold text-white">New Promo Code</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm text-text-muted mb-1">Code *</label>
              <input
                type="text"
                required
                value={form.code}
                onChange={(e) => setForm({ ...form, code: e.target.value })}
                placeholder="e.g. SUMMER25"
                className="w-full bg-surface-light border border-white/10 text-white rounded-lg px-4 py-2.5 focus:outline-none focus:border-gold/50"
              />
            </div>
            <div>
              <label className="block text-sm text-text-muted mb-1">Discount %</label>
              <input
                type="number"
                min="0"
                max="100"
                value={form.discount_percent}
                onChange={(e) => setForm({ ...form, discount_percent: e.target.value })}
                placeholder="e.g. 20"
                className="w-full bg-surface-light border border-white/10 text-white rounded-lg px-4 py-2.5 focus:outline-none focus:border-gold/50"
              />
            </div>
            <div>
              <label className="block text-sm text-text-muted mb-1">Bonus Credits</label>
              <input
                type="number"
                min="0"
                value={form.bonus_credits}
                onChange={(e) => setForm({ ...form, bonus_credits: e.target.value })}
                placeholder="e.g. 50"
                className="w-full bg-surface-light border border-white/10 text-white rounded-lg px-4 py-2.5 focus:outline-none focus:border-gold/50"
              />
            </div>
            <div>
              <label className="block text-sm text-text-muted mb-1">Max Uses</label>
              <input
                type="number"
                min="1"
                value={form.max_uses}
                onChange={(e) => setForm({ ...form, max_uses: e.target.value })}
                placeholder="Unlimited"
                className="w-full bg-surface-light border border-white/10 text-white rounded-lg px-4 py-2.5 focus:outline-none focus:border-gold/50"
              />
            </div>
            <div>
              <label className="block text-sm text-text-muted mb-1">Expires</label>
              <input
                type="date"
                value={form.expires_at}
                onChange={(e) => setForm({ ...form, expires_at: e.target.value })}
                className="w-full bg-surface-light border border-white/10 text-white rounded-lg px-4 py-2.5 focus:outline-none focus:border-gold/50"
              />
            </div>
          </div>
          <div className="flex gap-3">
            <button
              type="submit"
              disabled={saving}
              className="bg-gold hover:bg-gold-light text-black font-semibold px-6 py-2.5 rounded-xl transition-all disabled:opacity-50"
            >
              {saving ? "Creating..." : "Create Code"}
            </button>
            <button
              type="button"
              onClick={() => setShowForm(false)}
              className="border border-white/20 text-white px-6 py-2.5 rounded-xl hover:bg-surface-light transition-all"
            >
              Cancel
            </button>
          </div>
        </form>
      )}

      {/* Table */}
      <div className="bg-surface rounded-xl border border-surface-light overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-surface-light">
                <th className="text-left text-text-muted text-xs font-medium uppercase tracking-wider px-4 py-3">Code</th>
                <th className="text-left text-text-muted text-xs font-medium uppercase tracking-wider px-4 py-3">Discount %</th>
                <th className="text-left text-text-muted text-xs font-medium uppercase tracking-wider px-4 py-3">Bonus Credits</th>
                <th className="text-left text-text-muted text-xs font-medium uppercase tracking-wider px-4 py-3">Max Uses</th>
                <th className="text-left text-text-muted text-xs font-medium uppercase tracking-wider px-4 py-3">Used</th>
                <th className="text-left text-text-muted text-xs font-medium uppercase tracking-wider px-4 py-3">Expires</th>
                <th className="text-left text-text-muted text-xs font-medium uppercase tracking-wider px-4 py-3">Active</th>
                <th className="text-left text-text-muted text-xs font-medium uppercase tracking-wider px-4 py-3">Actions</th>
              </tr>
            </thead>
            <tbody>
              {codes.length === 0 && (
                <tr>
                  <td colSpan={8} className="px-4 py-8 text-center text-text-muted">
                    No promo codes found. Create one to get started.
                  </td>
                </tr>
              )}
              {codes.map((code) => (
                <tr key={code.id} className="border-b border-surface-light last:border-0 hover:bg-surface-light/50">
                  <td className="px-4 py-3">
                    <span className="text-gold font-mono font-bold">{code.code}</span>
                  </td>
                  <td className="px-4 py-3 text-white">
                    {code.discount_percent ? `${code.discount_percent}%` : "-"}
                  </td>
                  <td className="px-4 py-3 text-white">
                    {code.bonus_credits ?? "-"}
                  </td>
                  <td className="px-4 py-3 text-white">
                    {code.max_uses ?? "Unlimited"}
                  </td>
                  <td className="px-4 py-3 text-white">{code.used_count}</td>
                  <td className="px-4 py-3 text-white text-sm">
                    {code.expires_at
                      ? new Date(code.expires_at).toLocaleDateString()
                      : "Never"}
                  </td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => toggleActive(code.id, code.is_active)}
                      className={`relative w-10 h-6 rounded-full transition-colors ${
                        code.is_active ? "bg-green-500" : "bg-surface-light"
                      }`}
                    >
                      <span
                        className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform shadow ${
                          code.is_active ? "translate-x-4" : ""
                        }`}
                      />
                    </button>
                  </td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => handleDelete(code.id)}
                      className="text-red-400 hover:text-red-300 text-sm transition-colors"
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}