// app/admin/category-mappings/page.tsx
"use client";

import { useEffect, useState } from "react";
import { useAuth } from "@/context/AuthContext";
import {
  fetchAdminCategories,
  fetchPartRoleMappings,
  createPartRoleMapping,
  updatePartRoleMapping,
  deletePartRoleMapping,
  type AdminCategory,
  type AdminPartRoleMapping,
} from "@/lib/api/adminCategoryMappings";

export default function AdminCategoryMappingsPage() {
  const { token } = useAuth();
  const [categories, setCategories] = useState<AdminCategory[]>([]);
  const [mappings, setMappings] = useState<AdminPartRoleMapping[]>([]);
  const [platform, setPlatform] = useState("AR-15");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!token) return;

    const load = async () => {
      try {
        setLoading(true);
        const [cats, maps] = await Promise.all([
          fetchAdminCategories(token),
          fetchPartRoleMappings(token, platform),
        ]);
        setCategories(cats);
        setMappings(maps);
      } catch (e: any) {
        console.error(e);
        setError(e?.message ?? "Failed to load mappings");
      } finally {
        setLoading(false);
      }
    };

    load();
  }, [token, platform]);

  const handleCreate = async () => {
    if (!token) return;
    const defaultCategory = categories[0];
    if (!defaultCategory) return;

    try {
      setSaving(true);
      const created = await createPartRoleMapping(token, {
        platform,
        partRole: "NEW_PART_ROLE",
        categorySlug: defaultCategory.slug,
      });
      setMappings((prev) => [...prev, created]);
    } catch (e: any) {
      console.error(e);
      setError(e?.message ?? "Failed to create mapping");
    } finally {
      setSaving(false);
    }
  };

  const handleUpdate = async (row: AdminPartRoleMapping, updates: Partial<AdminPartRoleMapping>) => {
    if (!token) return;
    try {
      setSaving(true);
      const updated = await updatePartRoleMapping(token, row.id, {
        platform: updates.platform ?? row.platform,
        partRole: updates.partRole ?? row.partRole,
        categorySlug: updates.categorySlug ?? row.categorySlug,
        notes: updates.notes ?? row.notes ?? undefined,
      });
      setMappings((prev) => prev.map((m) => (m.id === row.id ? updated : m)));
    } catch (e: any) {
      console.error(e);
      setError(e?.message ?? "Failed to update mapping");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (row: AdminPartRoleMapping) => {
    if (!token) return;
    if (!confirm(`Delete mapping for ${row.partRole}?`)) return;

    try {
      setSaving(true);
      await deletePartRoleMapping(token, row.id);
      setMappings((prev) => prev.filter((m) => m.id !== row.id));
    } catch (e: any) {
      console.error(e);
      setError(e?.message ?? "Failed to delete mapping");
    } finally {
      setSaving(false);
    }
  };

  if (!token) {
    return <div className="p-6 text-sm text-red-500">You must be logged in to view this page.</div>;
  }

  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-lg font-semibold tracking-tight">
          Part role → category mappings
        </h1>
        <p className="mt-1 text-xs text-zinc-400">
          FOR LATER! Advanced mapping: defines which canonical category each builder part role
          uses for a given platform.
        </p>
        <div className="flex items-center gap-3">
          <select
            value={platform}
            onChange={(e) => setPlatform(e.target.value)}
            className="rounded-md border border-zinc-700 bg-zinc-900 px-3 py-1 text-sm"
          >
            <option value="AR-15">AR-15</option>
            {/* add other platforms later */}
          </select>
          <button
            onClick={handleCreate}
            disabled={saving || loading || categories.length === 0}
            className="rounded-md bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-50"
          >
            + Add mapping
          </button>
        </div>
      </div>

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

      {loading ? (
        <div className="text-sm text-zinc-400">Loading…</div>
      ) : (
        <div className="overflow-x-auto rounded-lg border border-zinc-800 bg-zinc-950/60">
          <table className="min-w-full text-left text-xs">
            <thead className="bg-zinc-900/80 text-zinc-400">
              <tr>
                <th className="px-3 py-2 font-medium">Platform</th>
                <th className="px-3 py-2 font-medium">Part role</th>
                <th className="px-3 py-2 font-medium">Category</th>
                <th className="px-3 py-2 font-medium">Group</th>
                <th className="px-3 py-2 font-medium">Notes</th>
                <th className="px-3 py-2 text-right font-medium">Actions</th>
              </tr>
            </thead>
            <tbody>
              {mappings.map((row) => (
                <tr key={row.id} className="border-t border-zinc-800/70 hover:bg-zinc-900/60">
                  <td className="px-3 py-2 text-zinc-300">{row.platform}</td>
                  <td className="px-3 py-2">
                    <input
                      className="w-full rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs text-zinc-100"
                      defaultValue={row.partRole}
                      onBlur={(e) => {
                        if (e.target.value !== row.partRole) {
                          handleUpdate(row, { partRole: e.target.value });
                        }
                      }}
                    />
                  </td>
                  <td className="px-3 py-2">
                    <select
                      className="w-full rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs text-zinc-100"
                      value={row.categorySlug}
                      onChange={(e) => {
                        handleUpdate(row, { categorySlug: e.target.value });
                      }}
                    >
                      {categories.map((cat) => (
                        <option key={cat.id} value={cat.slug}>
                          {cat.groupName ? `[${cat.groupName}] ` : ""}
                          {cat.name}
                        </option>
                      ))}
                    </select>
                  </td>
                  <td className="px-3 py-2 text-zinc-400 text-[11px]">{row.groupName}</td>
                  <td className="px-3 py-2">
                    <input
                      className="w-full rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs text-zinc-100"
                      defaultValue={row.notes ?? ""}
                      onBlur={(e) => {
                        if (e.target.value !== (row.notes ?? "")) {
                          handleUpdate(row, { notes: e.target.value });
                        }
                      }}
                    />
                  </td>
                  <td className="px-3 py-2 text-right">
                    <button
                      onClick={() => handleDelete(row)}
                      className="rounded border border-red-700/70 px-2 py-1 text-[11px] text-red-300 hover:bg-red-900/40"
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))}

              {mappings.length === 0 && (
                <tr>
                  <td
                    colSpan={6}
                    className="px-3 py-4 text-center text-xs text-zinc-500"
                  >
                    No mappings yet for {platform}. Click “Add mapping” to get started.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}