/**
 * Блок «Механики» формы ремонта — чипы работавших механиков + кнопка
 * «Добавить механика» (пикер из ростера) + удаление чипа.
 *
 * Делёж оплаты — поровну (1/N): доля каждого механика = total_sum / N.
 * Здесь показывается информативно (сумма на чел.), если передан totalSum.
 *
 * Состояние выбора живёт в родителе (как у WorksPickerModal): сюда
 * приходит value + onChange. Ростер компонент тянет сам при первом
 * открытии пикера (лениво) и кэширует на время жизни.
 */
import { useState } from "react";
import { Plus, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { fmtMoney } from "@/lib/repairsFeed";
import { getMechanicsRoster, type MechanicRosterItem } from "@/api/repairsCreate";

export interface SelectedMechanic {
  mechanic_id: number;
  name: string;
}

interface Props {
  value: SelectedMechanic[];
  onChange: (next: SelectedMechanic[]) => void;
  // Если задан и механиков >0 — показываем долю (1/N · totalSum).
  totalSum?: number;
  disabled?: boolean;
}

export default function MechanicsField({ value, onChange, totalSum, disabled }: Props) {
  const [pickerOpen, setPickerOpen] = useState(false);
  const [roster, setRoster] = useState<MechanicRosterItem[] | null>(null);
  const [rosterError, setRosterError] = useState<string | null>(null);
  const [q, setQ] = useState("");

  const openPicker = async () => {
    setPickerOpen(true);
    if (roster) return;
    try {
      const list = await getMechanicsRoster();
      setRoster(list);
      setRosterError(null);
    } catch (e) {
      setRosterError((e as Error).message || "Не удалось загрузить список механиков");
    }
  };

  const addMechanic = (m: MechanicRosterItem) => {
    // Дедуп: один механик один раз (UNIQUE на бэке).
    if (!value.some((v) => v.mechanic_id === m.id)) {
      onChange([...value, { mechanic_id: m.id, name: m.full_name }]);
    }
    setPickerOpen(false);
    setQ("");
  };

  const removeMechanic = (mechanicId: number) =>
    onChange(value.filter((v) => v.mechanic_id !== mechanicId));

  const share =
    totalSum != null && value.length > 0 ? Math.round(totalSum / value.length) : null;

  const filtered = (roster ?? []).filter((m) =>
    q.trim() ? m.full_name.toLowerCase().includes(q.trim().toLowerCase()) : true,
  );

  return (
    <section>
      <div className="flex items-baseline justify-between">
        <Label className="text-sm">Механики</Label>
        {!disabled && (
          <Button variant="outline" size="sm" onClick={openPicker}>
            <Plus className="h-3 w-3 mr-1" />
            Добавить механика
          </Button>
        )}
      </div>

      {value.length === 0 ? (
        <div className="text-xs text-muted-foreground mt-2">Минимум один механик</div>
      ) : (
        <div className="mt-2 flex flex-wrap gap-2">
          {value.map((m) => (
            <span
              key={m.mechanic_id}
              className="inline-flex items-center gap-1.5 rounded-full border bg-muted/50 pl-3 pr-1.5 py-1 text-sm"
            >
              <span className="leading-none">{m.name}</span>
              {!disabled && (
                <button
                  type="button"
                  onClick={() => removeMechanic(m.mechanic_id)}
                  className="rounded-full p-0.5 hover:bg-accent text-muted-foreground"
                  aria-label={`Убрать ${m.name}`}
                >
                  <X className="h-3.5 w-3.5" />
                </button>
              )}
            </span>
          ))}
        </div>
      )}

      {share != null && value.length > 1 && (
        <div className="mt-2 text-xs text-muted-foreground">
          Делёж поровну: {fmtMoney(share)} ₽ на каждого ({value.length} мех.)
        </div>
      )}

      {/* Пикер механиков из ростера */}
      {pickerOpen && (
        <div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
          <header className="border-b p-3 flex items-center gap-2">
            <button
              type="button"
              onClick={() => {
                setPickerOpen(false);
                setQ("");
              }}
              className="rounded-full px-3 py-2 text-sm hover:bg-accent"
            >
              Закрыть
            </button>
            <Input
              autoFocus
              placeholder="Поиск механика…"
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
          </header>
          <div className="flex-1 overflow-auto">
            {rosterError && (
              <div className="text-sm text-destructive bg-destructive/10 m-3 rounded-md p-3">
                {rosterError}
              </div>
            )}
            {roster === null && !rosterError && (
              <div className="text-center text-muted-foreground p-8 text-sm">Загрузка…</div>
            )}
            {filtered.map((m) => {
              const already = value.some((v) => v.mechanic_id === m.id);
              return (
                <button
                  type="button"
                  key={m.id}
                  disabled={already}
                  onClick={() => addMechanic(m)}
                  className="w-full text-left p-3 border-b hover:bg-accent/40 flex items-center justify-between gap-3 disabled:opacity-50"
                >
                  <span className="text-sm">{m.full_name}</span>
                  {already && <span className="text-xs text-muted-foreground">уже добавлен</span>}
                </button>
              );
            })}
            {roster !== null && !rosterError && filtered.length === 0 && (
              <div className="text-center text-muted-foreground p-8 text-sm">
                Ничего не найдено
              </div>
            )}
          </div>
        </div>
      )}
    </section>
  );
}
