// app/admin/platforms/page.tsx
"use client";

import { useEffect, useMemo, useState } from "react";
import { Plus, Pencil, Trash2, X } from "lucide-react";
import { useAuth } from "@/context/AuthContext";
import {
  createPlatform,
  deletePlatform,
  fetchPlatforms,
  updatePlatform,
  type Platform,
  type CreatePlatformDto,
  type UpdatePlatformDto,
} from "@/lib/api/platforms";

export default function AdminPlatformsPage() {
  const { getAuthHeaders } = useAuth();

  const [platforms, setPlatforms] = useState<Platform[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [showModal, setShowModal] = useState(false);
  const [modalMode, setModalMode] = useState<"create" | "edit">("create");
  const [selected, setSelected] = useState<Platform | null>(null);

  const [form, setForm] = useState<CreatePlatformDto>({
    key: "",
    label: "",
    isActive: true,
  });

  async function load() {
    try {
      setLoading(true);
      setError(null);
      const data = await fetchPlatforms(getAuthHeaders());
      setPlatforms(data);
    } catch (e: any) {
      console.error(e);
      setError(e?.message ?? "Failed to load platforms");
      setPlatforms([]);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const sorted = useMemo(() => {
    return [...platforms].sort((a, b) => a.key.localeCompare(b.key));
  }, [platforms]);

  function openCreate() {
    setModalMode("create");
    setSelected(null);
    setForm({ key: "", label: "", isActive: true });
    setShowModal(true);
  }

  function openEdit(p: Platform) {
    setModalMode("edit");
    setSelected(p);
    setForm({ key: p.key, label: p.label, isActive: p.isActive });
    setShowModal(true);
  }

  async function onDelete(p: Platform) {
    if (!window.confirm(`Delete platform "${p.key}"? This cannot be undone.`))
      return;

    try {
      setSaving(true);
      setError(null);
      await deletePlatform(getAuthHeaders(), p.id);
      await load();
    } catch (e: any) {
      console.error(e);
      setError(e?.message ?? "Failed to delete platform");
    } finally {
      setSaving(false);
    }
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();

    const key = (form.key ?? "").trim();
    const label = (form.label ?? "").trim();

    if (!key || !label) {
      setError("Key and Label are required.");
      return;
    }

    try {
      setSaving(true);
      setError(null);

      if (modalMode === "create") {
        await createPlatform(getAuthHeaders(), { ...form, key, label });
      } else if (selected) {
        const update: UpdatePlatformDto = {};
        if (key !== selected.key) update.key = key;
        if (label !== selected.label) update.label = label;
        if ((form.isActive ?? true) !== selected.isActive)
          update.isActive = form.isActive;

        await updatePlatform(getAuthHeaders(), selected.id, update);
      }

      setShowModal(false);
      await load();
    } catch (e: any) {
      console.error(e);
      setError(e?.message ?? "Failed to save platform");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="flex flex-1 flex-col gap-4">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h1 className="text-base font-semibold text-zinc-100">Platforms</h1>
          <p className="mt-1 text-xs text-zinc-500">
            Manage canonical platforms used across products and filtering.
          </p>
        </div>

        <button
          type="button"
          onClick={openCreate}
          className="inline-flex items-center gap-2 rounded-md bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-50"
          disabled={loading || saving}
        >
          <Plus size={14} />
          Add Platform
        </button>
      </div>

      {error && (
        <div className="rounded-md border border-red-900/60 bg-red-950/40 px-3 py-2 text-xs text-red-200">
          {error}
        </div>
      )}

      {loading ? (
        <div className="text-sm text-zinc-400">Loading…</div>
      ) : sorted.length === 0 ? (
        <div className="rounded-md border border-zinc-900 bg-zinc-950 px-4 py-6 text-sm text-zinc-400">
          No platforms found.
        </div>
      ) : (
        <div className="overflow-hidden rounded-md border border-zinc-900 bg-zinc-950">
          <table className="min-w-full border-separate border-spacing-0 text-xs">
            <thead className="bg-zinc-950/80">
              <tr className="text-left text-[11px] uppercase tracking-[0.16em] text-zinc-500">
                <th className="border-b border-zinc-900 px-3 py-2">ID</th>
                <th className="border-b border-zinc-900 px-3 py-2">Key</th>
                <th className="border-b border-zinc-900 px-3 py-2">Label</th>
                <th className="border-b border-zinc-900 px-3 py-2">Active</th>
                <th className="border-b border-zinc-900 px-3 py-2 text-right">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody>
              {sorted.map((p, idx) => (
                <tr
                  key={p.id}
                  className={idx % 2 === 0 ? "bg-zinc-950" : "bg-zinc-950/60"}
                >
                  <td className="border-b border-zinc-900 px-3 py-2 text-zinc-400">
                    {p.id}
                  </td>
                  <td className="border-b border-zinc-900 px-3 py-2 text-zinc-100">
                    {p.key}
                  </td>
                  <td className="border-b border-zinc-900 px-3 py-2 text-zinc-300">
                    {p.label}
                  </td>
                  <td className="border-b border-zinc-900 px-3 py-2">
                    <span
                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
                        p.isActive
                          ? "border border-emerald-500/40 bg-emerald-500/10 text-emerald-200"
                          : "border border-zinc-700 bg-zinc-900 text-zinc-400"
                      }`}
                    >
                      {p.isActive ? "ACTIVE" : "INACTIVE"}
                    </span>
                  </td>
                  <td className="border-b border-zinc-900 px-3 py-2 text-right">
                    <div className="inline-flex items-center gap-2">
                      <button
                        type="button"
                        onClick={() => openEdit(p)}
                        className="rounded p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
                        title="Edit"
                        disabled={saving}
                      >
                        <Pencil size={14} />
                      </button>
                      <button
                        type="button"
                        onClick={() => void onDelete(p)}
                        className="rounded p-1 text-zinc-400 hover:bg-red-900/50 hover:text-red-400"
                        title="Delete"
                        disabled={saving}
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
          <div className="w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-950 p-6 shadow-xl">
            <div className="mb-4 flex items-center justify-between">
              <h2 className="text-base font-semibold">
                {modalMode === "create" ? "Create Platform" : "Edit Platform"}
              </h2>
              <button
                type="button"
                onClick={() => setShowModal(false)}
                className="rounded p-1 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
              >
                <X size={16} />
              </button>
            </div>

            <form onSubmit={onSubmit} className="space-y-4">
              <div>
                <label className="mb-1 block text-xs font-medium text-zinc-300">
                  Key
                </label>
                <input
                  value={form.key}
                  onChange={(e) =>
                    setForm((s) => ({
                      ...s,
                      key: e.target.value
                        .toUpperCase()
                        .replace(/\s+/g, "") // remove spaces
                        .replace(/-/g, ""),
                    }))
                  }
                  className="w-full rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-amber-400/80 focus:outline-none focus:ring-1 focus:ring-amber-400"
                  placeholder="AR15"
                  required
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium text-zinc-300">
                  Label
                </label>
                <input
                  value={form.label}
                  onChange={(e) =>
                    setForm((s) => ({ ...s, label: e.target.value }))
                  }
                  className="w-full rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-amber-400/80 focus:outline-none focus:ring-1 focus:ring-amber-400"
                  placeholder="AR-15"
                  required
                />
              </div>

              <label className="flex items-center gap-2 text-xs text-zinc-300">
                <input
                  type="checkbox"
                  checked={!!form.isActive}
                  onChange={(e) =>
                    setForm((s) => ({ ...s, isActive: e.target.checked }))
                  }
                  className="h-4 w-4 rounded border-zinc-700 bg-zinc-900 text-amber-400"
                />
                Active
              </label>

              <div className="flex gap-2 pt-2">
                <button
                  type="button"
                  onClick={() => setShowModal(false)}
                  className="flex-1 rounded-md border border-zinc-700 px-4 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800"
                  disabled={saving}
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="flex-1 rounded-md bg-emerald-600 px-4 py-2 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-50"
                  disabled={saving}
                >
                  {saving
                    ? "Saving…"
                    : modalMode === "create"
                    ? "Create"
                    : "Update"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}