"use client";

import { useState, useRef, useEffect } from "react";
import type { Repository } from "@/hooks/useRepositories";

interface RepositorySelectorProps {
  repositories: Repository[];
  selectedId: string | null;
  onSelect: (id: string) => void;
  onManage: () => void;
}

export function RepositorySelector({ repositories, selectedId, onSelect, onManage }: RepositorySelectorProps) {
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const selected = repositories.find(r => r.id === selectedId);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    if (open) {
      document.addEventListener("mousedown", handleClickOutside);
      return () => document.removeEventListener("mousedown", handleClickOutside);
    }
  }, [open]);

  return (
    <div ref={containerRef} className="relative">
      <button
        onClick={() => setOpen(o => !o)}
        className="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-lg hover:bg-rp-surface transition-colors text-left"
      >
        <span className="flex-1 min-w-0 truncate text-r-sm font-medium text-rp-text">
          {selected ? selected.name : "Select repository..."}
        </span>
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          className={`shrink-0 text-rp-muted transition-transform ${open ? "rotate-180" : ""}`}
        >
          <path d="M4 5.5L7 8.5L10 5.5" />
        </svg>
      </button>

      {open && (
        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-rp-surface border border-rp-border/40 rounded-lg shadow-lg py-1 max-h-60 overflow-y-auto">
          {repositories.map(r => (
            <button
              key={r.id}
              onClick={() => { onSelect(r.id); setOpen(false); }}
              className={`w-full text-left px-3 py-1.5 text-r-xs transition-colors truncate ${
                r.id === selectedId
                  ? "text-rp-text bg-rp-surface-alt"
                  : "text-rp-muted hover:bg-rp-surface-alt hover:text-rp-text"
              }`}
            >
              {r.name}
            </button>
          ))}
          <div className="border-t border-rp-border/10 mt-1 pt-1">
            <button
              onClick={() => { onManage(); setOpen(false); }}
              className="w-full text-left px-3 py-1.5 text-r-xs text-rp-muted hover:bg-rp-surface-alt hover:text-rp-text transition-colors flex items-center gap-1.5"
            >
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                <path d="M6 2.5V9.5M2.5 6H9.5" />
              </svg>
              Add repository
            </button>
          </div>
        </div>
      )}
    </div>
  );
}