import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useNavigate, useSearchParams } from "react-router-dom";
import { listVehicles } from "@/api/vehicles";
import { Input } from "@/components/ui/input";
import { Card } from "@/components/ui/card";

const ACTION_TITLES: Record<string, string> = {
  inspect: "Осмотр",
  repair: "Ремонт",
};

// Группа цветов по семантике статуса. Палитра подсчитана из Tailwind с
// прозрачностью, чтобы чип не перебивал гос.номер. Tone:
//   ok      — на линии (зелёный)
//   idle    — простой (серый)
//   repair  — в ремонте / ждёт ремонта (янтарный)
//   alert   — ДТП (красный)
//   admin   — выкуп / на продаже / бронь / подготовка к продаже / ждёт доставки
//   sold    — продана (не отображается — отфильтрована из выдачи)
const STATUS_TONE: Record<string, string> = {
  "На линии": "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
  "Простой": "bg-muted text-muted-foreground",
  "Ремонтируется": "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
  "Ждет ремонта": "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
  "ДТП": "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
  "Бронь": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
  "Выкуп": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
  "На продаже": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
  "Подготовка на продажу": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
  "Ждет доставки до офиса": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
};

function StatusChip({ status }: { status: string }) {
  const tone =
    STATUS_TONE[status] ??
    "bg-muted text-muted-foreground";
  return (
    <span className={`inline-flex items-center text-xs font-medium px-2 py-0.5 rounded-full ${tone}`}>
      {status}
    </span>
  );
}

export default function Home() {
  const [q, setQ] = useState("");
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  const action = searchParams.get("action") || undefined;
  const subtitle = action ? ACTION_TITLES[action] : undefined;

  const vehiclesQuery = useQuery({
    queryKey: ["vehicles", q],
    queryFn: () => listVehicles(q || undefined),
  });

  return (
    <div className="min-h-screen bg-background">
      <header className="flex items-center gap-3 p-4 border-b">
        <button
          onClick={() => navigate("/")}
          className="text-sm text-muted-foreground hover:text-foreground"
        >
          ← Меню
        </button>
        <div className="flex-1">
          <h1 className="text-lg font-semibold">
            Машины{subtitle && ` — ${subtitle}`}
          </h1>
        </div>
      </header>

      <main className="p-4">
        <Input
          placeholder="Поиск по госномеру"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          className="mb-4"
        />

        {vehiclesQuery.isLoading ? (
          <div className="text-sm text-muted-foreground">Загружаю…</div>
        ) : vehiclesQuery.isError ? (
          <div className="text-sm text-destructive">Не удалось загрузить.</div>
        ) : (vehiclesQuery.data ?? []).length === 0 ? (
          <div className="text-sm text-muted-foreground">Ничего не найдено.</div>
        ) : (
          <div className="space-y-2">
            {(vehiclesQuery.data ?? []).map((v) => (
              <Card
                key={v.id}
                className="p-4 cursor-pointer hover:shadow-md transition-shadow"
                onClick={() =>
                  navigate(`/vehicles/${v.id}${action ? `?action=${action}` : ""}`)
                }
              >
                <div className="flex items-center gap-2 flex-wrap">
                  <div className="font-semibold text-lg">{v.license_plate}</div>
                  {v.status && <StatusChip status={v.status} />}
                </div>
                <div className="text-sm text-muted-foreground">
                  {[v.make, v.model, v.year].filter(Boolean).join(" ") || "—"}
                </div>
                {v.last_inspection_at && (
                  <div className="text-xs text-muted-foreground mt-1">
                    Последний осмотр:{" "}
                    {new Date(v.last_inspection_at).toLocaleDateString("ru-RU")}
                  </div>
                )}
              </Card>
            ))}
          </div>
        )}
      </main>
    </div>
  );
}
