"use client";

import { useState } from "react";
import { ChevronDown, Search, UserMinus, Loader2 } from "lucide-react";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/presentation/components/ui/popover";
import { Input } from "@/presentation/components/ui/input";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useDebounce } from "@/presentation/hooks/use-debounce";
import { useRepositories } from "@/di/repository-provider";
import { useT } from "@/shared/i18n/client";
import { cn } from "@/shared/lib/utils";
import { displayInitials, displayName } from "@/shared/lib/user-display";
import { MemberAvatar } from "./member-avatar";
import type { TicketAssignee } from "@/domain/entities/ticket";

interface AssigneeSelectProps {
  value: TicketAssignee | null;
  onChange: (userId: number | null) => void;
  disabled?: boolean;
  className?: string;
}

export function AssigneeSelect({ value, onChange, disabled, className }: AssigneeSelectProps) {
  const t = useT();
  const container = useRepositories();
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 250);

  const { data: users, loading } = useApiQuery(
    () => container.ticketRepository.getAssignableUsers(debouncedQuery || undefined),
    { deps: [debouncedQuery], enabled: open },
  );

  function pick(userId: number | null) {
    onChange(userId);
    setOpen(false);
    setQuery("");
  }

  return (
    <Popover open={open} onOpenChange={(o) => { setOpen(o); if (!o) setQuery(""); }}>
      <PopoverTrigger asChild>
        <button
          type="button"
          disabled={disabled}
          className={cn(
            "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none hover:bg-muted/30 disabled:cursor-not-allowed disabled:opacity-50",
            className,
          )}
        >
          {value ? (
            <span className="flex items-center gap-2 min-w-0">
              <MemberAvatar initials={displayInitials(value)} name={displayName(value)} />
              <span className="font-medium truncate">{displayName(value)}</span>
            </span>
          ) : (
            <span className="italic text-muted-foreground">
              {t.ticketDetail.assignee.placeholder}
            </span>
          )}
          <ChevronDown className="h-4 w-4 opacity-60 shrink-0" />
        </button>
      </PopoverTrigger>
      <PopoverContent
        align="start"
        className="p-0 w-[var(--radix-popover-trigger-width)] min-w-64"
      >
        <div className="relative border-b border-border p-2">
          <Search className="pointer-events-none absolute left-4 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
          <Input
            autoFocus
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder={t.ticketDetail.assignee.search}
            className="h-8 pl-7 text-xs"
          />
        </div>
        <div className="max-h-60 overflow-y-auto py-1">
          {loading && (
            <div className="flex items-center justify-center py-4 text-muted-foreground">
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            </div>
          )}
          {!loading && users?.length === 0 && (
            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
              {t.ticketDetail.assignee.empty}
            </div>
          )}
          {!loading && users?.map((u) => (
            <button
              key={u.id}
              type="button"
              onClick={() => pick(u.id)}
              className={cn(
                "flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm hover:bg-muted",
                value?.id === u.id && "bg-muted/60",
              )}
            >
              <span className="flex items-center gap-2 min-w-0">
                <MemberAvatar initials={displayInitials(u)} name={displayName(u)} />
                <span className="font-medium truncate">{displayName(u)}</span>
              </span>
              <span className="text-xs text-muted-foreground shrink-0">
                {t.ticketDetail.assignee.activeCount(u.active_tickets_count)}
              </span>
            </button>
          ))}
        </div>
        {value && (
          <button
            type="button"
            onClick={() => pick(null)}
            className="flex w-full items-center gap-2 border-t border-border px-3 py-2 text-left text-sm text-destructive hover:bg-destructive/5"
          >
            <UserMinus className="h-4 w-4" /> {t.ticketDetail.assignee.unassign}
          </button>
        )}
      </PopoverContent>
    </Popover>
  );
}