"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 CarOwnerCompanyField({ initialCompany }: { initialCompany: InitialCompany }) {
  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 ?? ""} />
      <AdminCompanySearch
        endpoint="/api/admin/company-options"
        onSelect={setSelected}
        selectedLabel={selected?.name}
        placeholder="Ukucajte najmanje 2 slova naziva kompanije…"
        inputClassName="adminx-input"
        ariaLabel="Pretraga vlasnika vozila"
      />
      {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 oglasom.
            </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"
          >
            Ukloni vezu
          </button>
        </div>
      ) : (
        <p className="text-xs leading-5 text-muted-foreground/70">
          Pretraga učitava najviše 20 rezultata, pa forma ostaje brza i sa desetinama hiljada profila. Za fizičko lice ostavite prazno.
        </p>
      )}
    </div>
  );
}