"use client";

import { useEffect, useState } from "react";

const API_BASE_URL =
  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";

type PendingBucket = {
  merchantId: number;
  merchantName: string;
  rawCategoryKey: string;
  mappedPartRole: string | null;
  productCount: number;
};

const PART_ROLE_OPTIONS: string[] = [
    // LOWER – receivers
    "LOWER_RECEIVER_STRIPPED",
    "LOWER_RECEIVER_COMPLETE",
    "LOWER_RECEIVER_COMPLETE_PISTOL",
    "LOWER_RECEIVER_COMPLETE_RIFLE",
    "LOWER_RECEIVER_80",
    "LOWER_RECEIVER_BILLET",
    "LOWER_RECEIVER_FORGED",
    "LOWER_RECEIVER_POLYMER",
  
    // LOWER – internals & controls
    "LOWER_PARTS_KIT",
    "LOWER_PARTS_KIT_ENHANCED",

    "TRIGGER",
    "TRIGGER_OTHER",
    "TRIGGER_COMBAT",
    "TRIGGER_MATCH",
    "TRIGGER_DROP_IN",
    "TRIGGER_SINGLE_STAGE",
    "TRIGGER_TWO_STAGE",
    "TRIGGER_GUARD",
    "PISTOL_GRIP",
    "PISTOL_GRIP_ERGO",
    "PISTOL_GRIP_VERTICAL",
    "SAFETY_SELECTOR",
    "SAFETY_SELECTOR_AMBI",
    "SAFETY_SELECTOR_45_DEG",
    "MAG_RELEASE",
    "TAKEDOWN_PINS",
    "SPRINGS_PINS_MISC",
  
    // LOWER – buffer & stock
    "BUFFER_KIT",
    "BUFFER_TUBE",
    "BUFFER_TUBE_MILSPEC",
    "BUFFER_TUBE_COMMERCIAL",
    "BUFFER_SPRING",
    "BUFFER_WEIGHT",
    "STOCK_ADJUSTABLE",
    "STOCK_FIXED",
    "STOCK_FOLDER",
    "STOCK_PRECISION",
    "BRACE_PISTOL",
  
    // UPPER – receivers & BCG
    "UPPER_RECEIVER_STRIPPED",
    "UPPER_RECEIVER_BILLET",
    "UPPER_RECEIVER_MONOLITHIC",
    "UPPER_RECEIVER_COMPLETE",
    "UPPER_RECEIVER_COMPLETE_PISTOL",
    "UPPER_RECEIVER_COMPLETE_RIFLE",
    "BOLT_CARRIER_GROUP",
    "BCG_COMPLETE",
    "BCG_LIGHTWEIGHT",
    "BCG_NICKEL_BORON",
  
    // UPPER – barrel & gas
    "BARREL",
    "BARREL_THREADED",
    "BARREL_PENCIL",
    "BARREL_MATCH",
    "BARREL_HEAVY",
    "BARREL_14_5_PINNED",
    "GAS_BLOCK",
    "GAS_BLOCK_ADJUSTABLE",
    "GAS_BLOCK_LOW_PROFILE",
    "GAS_TUBE_PISTOL",
    "GAS_TUBE_CAR",
    "GAS_TUBE_MID",
    "GAS_TUBE_RIFLE",
  
    // UPPER – front end / muzzle
    "HANDGUARD_MLOK",
    "HANDGUARD_KEYMOD",
    "HANDGUARD_QUAD",
    "HANDGUARD_SLICK",
    "MUZZLE_BRAKE",
    "MUZZLE_COMPENSATOR",

     // 👇 generic / backup muzzle roles
    "MUZZLE_DEVICE",
    "MUZZLE_DEVICE_OTHER",
    
    "FLASH_HIDER",
    "MUZZLE_DEVICE_QD_MOUNT",
    "SUPPRESSOR_DIRECT_THREAD",
    "SUPPRESSOR_QD",
    "SUPPRESSOR_RIFLE",
    "SUPPRESSOR_PISTOL",
    "CHARGING_HANDLE",
    "CHARGING_HANDLE_AMBI",
    "CHARGING_HANDLE_GAS_BUSTER",
  
    // Sights / optics
    "SIGHTS_BACKUP",
    "SIGHTS_IRON_FIXED",
    "SIGHTS_IRON_FLIP",
    "SIGHTS_OFFSET",
    "OPTIC_REDDOT",
    "OPTIC_LPVO",
    "OPTIC_HOLOGRAPHIC",
    "OPTIC_PRISM",
    "OPTIC_MAGNIFIER",
  
    // Accessories
    "MAGAZINE",
    "SLING",
    "BIPOD",
    "MOUNT_SCOPE",
    "MOUNT_OFFSET",
    "LIGHT_WEAPON",
    "LASER_VISIBLE",
    "LASER_IR",
    "TOOL",
  ];

export default function MappingAdminPage() {
  const [rows, setRows] = useState<PendingBucket[]>([]);
  const [loading, setLoading] = useState(true);
  const [savingKey, setSavingKey] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function load() {
      try {
        setLoading(true);
        setError(null);
        const res = await fetch(
          `${API_BASE_URL}/api/admin/mapping/pending-buckets`
        );
        if (!res.ok) {
          throw new Error(`Failed to load pending buckets (${res.status})`);
        }
        const data: PendingBucket[] = await res.json();
        setRows(data);
      } catch (e: any) {
        console.error(e);
        setError(e.message ?? "Failed to load pending buckets");
      } finally {
        setLoading(false);
      }
    }

    load();
  }, []);

  const handleChangeRole = (idx: number, value: string) => {
    setRows((prev) => {
      const next = [...prev];
      next[idx] = { ...next[idx], mappedPartRole: value || null };
      return next;
    });
  };

  const handleSave = async (row: PendingBucket) => {
    if (!row.mappedPartRole) return;

    const key = `${row.merchantId}-${row.rawCategoryKey}`;
    try {
      setSavingKey(key);
      setError(null);

      const res = await fetch(`${API_BASE_URL}/api/admin/mapping/apply`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          merchantId: row.merchantId,
          rawCategoryKey: row.rawCategoryKey,
          mappedPartRole: row.mappedPartRole,
        }),
      });

      if (!res.ok) {
        throw new Error(`Failed to save mapping (${res.status})`);
      }

      // After save, remove this bucket from the list
      setRows((prev) =>
        prev.filter(
          (r) =>
            !(
              r.merchantId === row.merchantId &&
              r.rawCategoryKey === row.rawCategoryKey
            )
        )
      );
    } catch (e: any) {
      console.error(e);
      setError(e.message ?? "Failed to save mapping");
    } finally {
      setSavingKey(null);
    }
  };

  return (
    <main className="min-h-screen bg-black text-zinc-50">
      <div className="mx-auto max-w-6xl px-4 py-6">
        <h1 className="text-xl font-semibold tracking-tight">
          Bulk Mapping – Pending Categories
        </h1>
        <p className="mt-1 text-sm text-zinc-400">
          Bucketed by merchant + raw category. Map each bucket to a part role to
          clean up the builder catalog.
        </p>

        {loading && (
          <p className="mt-4 text-sm text-zinc-400">Loading pending buckets…</p>
        )}

        {error && (
          <p className="mt-4 text-sm text-red-400">Error: {error}</p>
        )}

        {!loading && rows.length === 0 && !error && (
          <p className="mt-4 text-sm text-emerald-400">
            No pending mapping buckets 🎉
          </p>
        )}

        {!loading && rows.length > 0 && (
          <section className="mt-4 rounded-lg border border-zinc-800 bg-zinc-950/80 p-3">
            <div className="mb-2 flex items-center justify-between">
              <h2 className="text-xs font-semibold uppercase tracking-[0.14em] text-zinc-500">
                Pending Buckets
              </h2>
              <span className="text-xs text-zinc-400">
                {rows.length} buckets • {rows.reduce((s, r) => s + r.productCount, 0)}{" "}
                products
              </span>
            </div>

            <div className="mt-1 overflow-x-auto">
              <table className="min-w-full text-xs">
                <thead>
                  <tr className="border-b border-zinc-800 bg-zinc-900/60">
                    <th className="px-2 py-1 text-left text-zinc-400">
                      Merchant
                    </th>
                    <th className="px-2 py-1 text-left text-zinc-400">
                      Raw Category
                    </th>
                    <th className="px-2 py-1 text-left text-zinc-400">
                      Products
                    </th>
                    <th className="px-2 py-1 text-left text-zinc-400">
                      Part Role
                    </th>
                    <th className="px-2 py-1 text-right text-zinc-400">
                      Action
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((row, idx) => {
                    const rowKey = `${row.merchantId}-${row.rawCategoryKey}`;
                    const isSaving = savingKey === rowKey;

                    return (
                      <tr
                        key={rowKey}
                        className="border-b border-zinc-900 hover:bg-zinc-900/40"
                      >
                        <td className="px-2 py-1 text-zinc-100">
                          {row.merchantName}
                        </td>
                        <td className="px-2 py-1 text-zinc-300">
                          {row.rawCategoryKey}
                        </td>
                        <td className="px-2 py-1 text-zinc-200">{row.productCount}</td>
                        <td className="px-2 py-1 text-zinc-100">
                          <select
                            className="w-full rounded-md border border-zinc-700 bg-zinc-950/80 px-2 py-1 text-xs text-zinc-100 outline-none focus:border-amber-400"
                            value={row.mappedPartRole ?? ""}
                            onChange={(e) =>
                              handleChangeRole(idx, e.target.value)
                            }
                          >
                            <option value="">Select part role…</option>
                            {PART_ROLE_OPTIONS.map((pr) => (
                              <option key={pr} value={pr}>
                                {pr}
                              </option>
                            ))}
                          </select>
                        </td>
                        <td className="px-2 py-1 text-right">
                          <button
                            onClick={() => handleSave(row)}
                            disabled={!row.mappedPartRole || isSaving}
                            className="rounded-md bg-emerald-500 px-3 py-1 text-[0.7rem] font-semibold text-black disabled:cursor-not-allowed disabled:bg-zinc-700"
                          >
                            {isSaving ? "Saving…" : "Save"}
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </section>
        )}
      </div>
    </main>
  );
}