// BEGIN CHANGE: serial staff search no painel admin
"use client";

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

type Found = {
  itemId: number;
  serial: string;
  location: string;
  playerName: string | null;
  accountId: number | null;
  online?: boolean;
  houseName?: string | null;
};

export function AdminSerial({
  token,
  onGoAccountId,
  onGoPlayer,
  labels,
}: {
  token: string;
  onGoAccountId: (accountId: number) => void;
  onGoPlayer: (name: string) => void;
  labels: {
    title: string;
    hint: string;
    findBtn: string;
    failed: string;
    notFound: string;
    openAccount: string;
  };
}) {
  const [serial, setSerial] = useState("");
  const [found, setFound] = useState<Found[] | null>(null);
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setBusy(true);
    setErr("");
    setFound(null);
    try {
      const r = await fetch(
        apiUrl(`admin-panel.php?tool=serial_find&serial=${encodeURIComponent(serial.trim())}`),
        { headers: { Authorization: `Bearer ${token}` } },
      );
      const json = await r.json().catch(() => ({}));
      if (!r.ok) {
        setErr(json.error || labels.failed);
        return;
      }
      setFound(json.data?.found || []);
    } catch {
      setErr(labels.failed);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="space-y-4">
      <h2 className="text-xl font-semibold">{labels.title}</h2>
      <p className="text-sm text-muted">{labels.hint}</p>
      <form onSubmit={onSubmit} className="flex flex-wrap gap-2">
        <input
          className="min-w-[260px] flex-1 rounded-md border border-border bg-background px-3 py-2 font-mono text-sm"
          placeholder="XXXXX-XXXXX-XXXXX-XXXXX"
          value={serial}
          onChange={(e) => setSerial(e.target.value)}
        />
        <button
          type="submit"
          disabled={busy}
          className="rounded-md bg-brand px-4 py-2 text-sm font-medium text-background disabled:opacity-50"
        >
          {labels.findBtn}
        </button>
      </form>
      {err && <p className="text-sm text-red-400">{err}</p>}
      {found && found.length === 0 && <p className="text-sm text-muted">{labels.notFound}</p>}
      {found && found.length > 0 && (
        <div className="overflow-auto rounded-xl border border-border bg-panel">
          <table className="w-full text-left text-sm">
            <thead className="text-muted">
              <tr>
                <th className="px-3 py-2">Item</th>
                <th className="px-3 py-2">Local</th>
                <th className="px-3 py-2">Player</th>
                <th className="px-3 py-2">Acc</th>
              </tr>
            </thead>
            <tbody>
              {found.map((f, i) => (
                <tr key={i} className="border-t border-border/40">
                  <td className="px-3 py-2">{f.itemId}</td>
                  <td className="px-3 py-2">
                    {f.location}
                    {f.houseName ? ` (${f.houseName})` : ""}
                  </td>
                  <td className="px-3 py-2">
                    {f.playerName ? (
                      <button
                        type="button"
                        className="text-brand hover:underline"
                        onClick={() => onGoPlayer(f.playerName!)}
                      >
                        {f.playerName}
                        {f.online ? " ONLINE" : ""}
                      </button>
                    ) : (
                      "-"
                    )}
                  </td>
                  <td className="px-3 py-2">
                    {f.accountId ? (
                      <button
                        type="button"
                        className="text-brand hover:underline"
                        onClick={() => onGoAccountId(f.accountId!)}
                      >
                        {labels.openAccount} #{f.accountId}
                      </button>
                    ) : (
                      "-"
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
// END CHANGE