"use client";

import { useState } from "react";

import {
  AdminCompanySearch,
  type AdminCompanyResult,
} from "@/components/admin/AdminCompanySearch";

type InitialCompany = {
  id: string;
  name: string;
  type?: string | null;
} | null;

export function AdminEntityCompanyField({
  initialCompany,
  required = false,
  searchLabel = "Pretraga kompanije",
  placeholder = "Ukucajte najmanje 2 slova naziva kompanije…",
  emptyHint,
}: {
  initialCompany: InitialCompany;
  required?: boolean;
  searchLabel?: string;
  placeholder?: string;
  emptyHint: string;
}) {
  const [selected, setSelected] = useState<AdminCompanyResult | null>(
    initialCompany
      ? {
          ...initialCompany,
          email: null,
          phone: null,
          address: null,
          city: null,
          pib: null,
          maticni: null,
        }
      : null,
  );

  return (
    <div className="space-y-2">
      <input type="hidden" name="companyId" value={selected?.id ?? ""} required={required} />
      <AdminCompanySearch
        endpoint="/api/admin/company-options"
        onSelect={setSelected}
        selectedLabel={selected?.name}
        placeholder={placeholder}
        inputClassName="adminx-input"
        ariaLabel={searchLabel}
      />
      {selected ? (
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3">
          <div>
            <p className="text-sm font-bold text-emerald-900">{selected.name}</p>
            <p className="text-xs text-emerald-700">
              {selected.type === "PLACE" ? "Mesto" : "Kompanija"} je povezano sa objavom.
            </p>
          </div>
          <button
            type="button"
            onClick={() => setSelected(null)}
            className="rounded-lg border border-emerald-300 bg-white px-3 py-1.5 text-xs font-bold text-emerald-800 transition hover:bg-emerald-100"
          >
            Promeni
          </button>
        </div>
      ) : (
        <p className="text-xs leading-5 text-muted-foreground/70">{emptyHint}</p>
      )}
    </div>
  );
}