/**
 * Модалка выбора работы из каталога. Раньше была продублирована почти один-в-один
 * в CreateRepairPage и EditRepairPage — вынесена в общий презентационный компонент.
 *
 * Состояние (открыта/запрос/результаты) живёт в родителе; здесь только UI +
 * колбэки. Это сознательно: формы создания и правки ремонта разошлись по UX
 * (inline-разблокировка цены против модалки-override, фото против их отсутствия),
 * поэтому единая «форма ремонта» была бы хуже — общим является именно этот пикер.
 */
import { ChevronLeft } from "lucide-react";
import { Input } from "@/components/ui/input";
import { fmtMoney } from "@/lib/repairsFeed";
import type { MechWork } from "@/api/repairsCreate";

interface Props {
  query: string;
  results: MechWork[];
  onQuery: (q: string) => void;
  onPick: (work: MechWork) => void;
  onClose: () => void;
}

export default function WorksPickerModal({ query, results, onQuery, onPick, onClose }: Props) {
  return (
    <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={onClose}
          className="rounded-full p-2 hover:bg-accent"
          aria-label="Закрыть"
        >
          <ChevronLeft className="h-5 w-5" />
        </button>
        <Input
          autoFocus
          placeholder="Поиск работы…"
          value={query}
          onChange={(e) => onQuery(e.target.value)}
        />
      </header>
      <div className="flex-1 overflow-auto">
        {results.map((mw) => (
          <button
            type="button"
            key={mw.id}
            onClick={() => onPick(mw)}
            className="w-full text-left p-3 border-b hover:bg-accent/40 flex items-start justify-between gap-3"
          >
            <span
              className="flex-1 min-w-0 text-sm leading-snug break-words"
              style={{
                display: "-webkit-box",
                WebkitLineClamp: 2,
                WebkitBoxOrient: "vertical",
                overflow: "hidden",
              }}
            >
              {mw.name}
            </span>
            <span className="text-sm text-muted-foreground font-mono whitespace-nowrap shrink-0 mt-0.5">
              {fmtMoney(Number(mw.price))} ₽
            </span>
          </button>
        ))}
        {results.length === 0 && (
          <div className="text-center text-muted-foreground p-8 text-sm">
            Ничего не найдено
          </div>
        )}
      </div>
    </div>
  );
}
