"use client";

import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Check, User } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import { getDrivers } from "@/services/drivers";
import { queryKeys } from "@/lib/query-keys";
import { cn } from "@/lib/cn";
import { friendlyErrorMessage } from "@/lib/errors";
import { useT } from "@/i18n";
import type { Driver } from "@/types/driver";

const RESULTS_PER_PAGE = 8;

/**
 * A searchable approved-captain picker used by the test-push (single) and the
 * broadcast (multiple) dialogs. It searches the drivers API on a 350ms debounce
 * and reports the selected captain uuids up.
 */
export function CaptainPicker({
  value,
  onChange,
  multiple = false,
  max,
}: {
  value: string[];
  onChange: (value: string[]) => void;
  multiple?: boolean;
  max?: number;
}) {
  const t = useT();
  const [query, setQuery] = useState("");
  const [debounced, setDebounced] = useState("");

  useEffect(() => {
    const handle = window.setTimeout(() => setDebounced(query), 350);
    return () => window.clearTimeout(handle);
  }, [query]);

  const filters = { page: 1, rows: RESULTS_PER_PAGE, status: "approved" as const, search: debounced || undefined };
  const queryKey = queryKeys.drivers.list(filters);
  const result = useQuery({
    queryKey,
    queryFn: () => getDrivers(filters),
  });

  const captains = result.data?.Model ?? [];
  const isSelected = (uuid: string) => value.includes(uuid);
  const atCapacity = multiple && max !== undefined && value.length >= max;

  function toggle(driver: Driver) {
    if (isSelected(driver.uuid)) {
      onChange(value.filter((uuid) => uuid !== driver.uuid));
      return;
    }
    if (multiple) {
      if (atCapacity) return;
      onChange([...value, driver.uuid]);
    } else {
      onChange([driver.uuid]);
    }
  }

  return (
    <div className="grid gap-2">
      <Input
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder={t("push.pickCaptain")}
        aria-label={t("push.pickCaptain")}
      />
      <div className="max-h-56 overflow-y-auto rounded-md border">
        {result.isPending ? (
          <div className="grid gap-1 p-2">
            <Skeleton className="h-9 w-full" />
            <Skeleton className="h-9 w-full" />
            <Skeleton className="h-9 w-full" />
          </div>
        ) : result.isError ? (
          <p className="p-3 text-xs text-destructive">{friendlyErrorMessage(result.error, t)}</p>
        ) : captains.length === 0 ? (
          <p className="p-3 text-sm text-muted-foreground">{t("common.noResults")}</p>
        ) : (
          <ul role="list">
            {captains.map((driver) => {
              const selected = isSelected(driver.uuid);
              const disabled = multiple && !selected && atCapacity;
              return (
                <li key={driver.uuid}>
                  <button
                    type="button"
                    onClick={() => toggle(driver)}
                    disabled={disabled}
                    aria-pressed={selected}
                    className={cn(
                      "flex w-full items-center gap-3 px-3 py-2 text-start transition-colors hover:bg-primary-soft",
                      selected && "bg-primary-soft",
                      disabled && "opacity-50",
                    )}
                  >
                    <span
                      className={cn(
                        "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground",
                        selected && "bg-primary text-primary-foreground",
                      )}
                    >
                      {selected ? (
                        <Check className="h-4 w-4" aria-hidden />
                      ) : (
                        <User className="h-4 w-4" aria-hidden />
                      )}
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-sm font-medium text-foreground">
                        {driver.name}
                      </span>
                      <span className="block text-xs text-muted-foreground" dir="ltr">
                        {driver.phone}
                      </span>
                    </span>
                  </button>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}