"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";

interface ClassRoom {
  id: string;
  name: string;
}

interface PinRow {
  id: string;
  class: { name: string };
  term: string;
  session: string;
  maxUses: number;
  usesCount: number;
  status: string;
  price: number;
  batchLabel: string | null;
}

const TERMS = [
  { value: "FIRST_TERM", label: "First Term" },
  { value: "SECOND_TERM", label: "Second Term" },
  { value: "THIRD_TERM", label: "Third Term" },
];

export default function AdminPinsPage() {
  const [classes, setClasses] = useState<ClassRoom[]>([]);
  const [pins, setPins] = useState<PinRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState({
    classId: "",
    term: "FIRST_TERM",
    session: "2025/2026",
    quantity: 50,
    price: 500,
    maxUses: 5,
  });
  const [generating, setGenerating] = useState(false);
  const [generatedPins, setGeneratedPins] = useState<string[]>([]);
  const [error, setError] = useState("");

  async function loadPins() {
    setLoading(true);
    try {
      const res = await api.get<PinRow[]>("/result-pins");
      setPins(res.data || []);
    } catch {
      // admin not authenticated / no data yet
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    api.get<ClassRoom[]>("/classes").then((res) => setClasses(res.data || []));
    loadPins();
  }, []);

  async function handleGenerate(e: React.FormEvent) {
    e.preventDefault();
    setGenerating(true);
    setError("");
    setGeneratedPins([]);
    try {
      const res = await api.post<{ pins: { pinCode: string }[] }>("/result-pins/generate", form);
      setGeneratedPins(res.data!.pins.map((p) => p.pinCode));
      loadPins();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to generate PINs");
    } finally {
      setGenerating(false);
    }
  }

  async function handleRevoke(id: string) {
    if (!confirm("Revoke this PIN? This cannot be undone.")) return;
    await api.post(`/result-pins/${id}/revoke`);
    loadPins();
  }

  function downloadCsv() {
    const rows = ["pin_code", ...generatedPins];
    const blob = new Blob([rows.join("\n")], { type: "text/csv" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `pins-${form.session.replace("/", "-")}-${form.term}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  }

  return (
    <div className="space-y-10">
      <div>
        <h1 className="text-2xl font-bold text-[var(--brand-blue)] mb-4">Generate Result PINs</h1>
        <form onSubmit={handleGenerate} className="grid sm:grid-cols-3 gap-4 bg-white border border-[var(--brand-border)] rounded-2xl p-6 shadow-sm">
          <div>
            <label className="text-sm font-medium">Class</label>
            <select required value={form.classId} onChange={(e) => setForm({ ...form, classId: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm">
              <option value="">Select class</option>
              {classes.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
          <div>
            <label className="text-sm font-medium">Term</label>
            <select value={form.term} onChange={(e) => setForm({ ...form, term: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm">
              {TERMS.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
            </select>
          </div>
          <div>
            <label className="text-sm font-medium">Session</label>
            <input value={form.session} onChange={(e) => setForm({ ...form, session: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-sm font-medium">Quantity</label>
            <input type="number" min={1} max={1000} value={form.quantity}
              onChange={(e) => setForm({ ...form, quantity: Number(e.target.value) })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-sm font-medium">Price (₦)</label>
            <input type="number" min={0} value={form.price}
              onChange={(e) => setForm({ ...form, price: Number(e.target.value) })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-sm font-medium">Max Uses Per PIN</label>
            <input type="number" min={1} max={20} value={form.maxUses}
              onChange={(e) => setForm({ ...form, maxUses: Number(e.target.value) })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          {error && <p className="sm:col-span-3 text-sm text-red-600">{error}</p>}
          <div className="sm:col-span-3">
            <button type="submit" disabled={generating}
              className="rounded-full bg-[var(--brand-magenta)] text-white px-6 py-2.5 font-semibold hover:bg-[var(--brand-blue)] transition-colors disabled:opacity-60">
              {generating ? "Generating..." : "Generate Batch"}
            </button>
          </div>
        </form>

        {generatedPins.length > 0 && (
          <div className="mt-4 rounded-lg bg-green-50 border border-green-200 p-4">
            <p className="text-sm text-green-700 mb-2">{generatedPins.length} PIN(s) generated successfully.</p>
            <button onClick={downloadCsv} className="text-sm font-semibold text-[var(--brand-blue)] underline">
              Download as CSV
            </button>
          </div>
        )}
      </div>

      <div>
        <h2 className="text-xl font-bold text-[var(--brand-blue)] mb-4">Existing PIN Batches</h2>
        {loading ? (
          <p className="text-sm text-gray-500">Loading...</p>
        ) : pins.length === 0 ? (
          <p className="text-sm text-gray-500">No PINs generated yet, or you need to sign in as an admin.</p>
        ) : (
          <div className="overflow-x-auto rounded-2xl border border-[var(--brand-border)]">
            <table className="w-full text-sm">
              <thead className="bg-[var(--brand-bg-light)] text-left">
                <tr>
                  <th className="p-3">Class</th>
                  <th className="p-3">Term</th>
                  <th className="p-3">Session</th>
                  <th className="p-3">Uses</th>
                  <th className="p-3">Status</th>
                  <th className="p-3">Price</th>
                  <th className="p-3"></th>
                </tr>
              </thead>
              <tbody>
                {pins.map((p) => (
                  <tr key={p.id} className="border-t border-[var(--brand-border)]">
                    <td className="p-3">{p.class.name}</td>
                    <td className="p-3">{TERMS.find((t) => t.value === p.term)?.label}</td>
                    <td className="p-3">{p.session}</td>
                    <td className="p-3">{p.usesCount} / {p.maxUses}</td>
                    <td className="p-3">
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                        p.status === "ACTIVE" ? "bg-green-100 text-green-700" :
                        p.status === "EXHAUSTED" ? "bg-yellow-100 text-yellow-700" :
                        "bg-red-100 text-red-700"
                      }`}>{p.status}</span>
                    </td>
                    <td className="p-3">₦{p.price}</td>
                    <td className="p-3">
                      {p.status === "ACTIVE" && (
                        <button onClick={() => handleRevoke(p.id)} className="text-red-600 text-xs font-semibold">Revoke</button>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}