'use client';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { Building2 } from 'lucide-react';
import { useBranches } from '@/lib/hooks/use-branches';
import { cn } from '@/lib/utils';

interface BranchSelectorProps {
  className?: string;
  /** Dışarıdan kontrol edilmek istenirse */
  value?: string;
  onChange?: (branchId: string) => void;
}

export function BranchSelector({ className, value, onChange }: BranchSelectorProps) {
  const { branches, loading } = useBranches();
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  const currentValue = value ?? searchParams.get('branchId') ?? 'all';

  function handleChange(val: string) {
    if (onChange) {
      onChange(val);
      return;
    }
    const params = new URLSearchParams(searchParams.toString());
    if (val === 'all') {
      params.delete('branchId');
    } else {
      params.set('branchId', val);
    }
    params.delete('page');
    const qs = params.toString();
    router.push(`${pathname}${qs ? `?${qs}` : ''}`);
  }

  if (!loading && branches.length === 0) return null;

  return (
    <div className={cn('flex items-center gap-2', className)}>
      <Building2 size={15} className="shrink-0 text-slate-400" strokeWidth={2} />
      <select
        value={currentValue}
        onChange={(e) => handleChange(e.target.value)}
        disabled={loading}
        className={cn(
          'h-9 min-w-[160px] rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-800 shadow-sm',
          'transition-colors focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/20',
          'disabled:cursor-not-allowed disabled:opacity-60',
          'dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100',
        )}
      >
        <option value="all">Tüm Şubeler</option>
        {branches.map((b) => (
          <option key={b.id} value={b.id}>
            {b.name}
          </option>
        ))}
      </select>
    </div>
  );
}