"use client";
import {usePathname,useRouter,useSearchParams} from 'next/navigation';
import {useTransition} from 'react';

export function InvoiceMonthFilter({selected,current,periods}:{selected:string;current:string;periods:string[]}){
 const router=useRouter(),path=usePathname(),params=useSearchParams();
 const [pending,startTransition]=useTransition();
 const change=(value:string)=>{const query=new URLSearchParams(params.toString());query.set('month',value);startTransition(()=>router.push(`${path}?${query}`));};
 const label=(period:string)=>new Date(`${period}-01T12:00:00Z`).toLocaleDateString('en-ZA',{month:'long',year:'numeric',timeZone:'Africa/Johannesburg'});
 return <div className="mb-5 flex flex-wrap items-end gap-3" aria-busy={pending}>
  <label className="flex min-w-0 flex-col gap-1 text-sm text-gray-600 dark:text-gray-300">Booked month
   <select aria-label="Booked month" value={selected} onChange={e=>change(e.target.value)} className="min-h-[44px] max-w-full rounded-lg border border-gray-200 bg-white px-3 text-sm text-[#003D5B] dark:border-white/10 dark:bg-surface dark:text-white">
    <option value="all">All months</option>
    {periods.map(p=><option key={p} value={p}>{label(p)}{p===current?' (current month)':''}</option>)}
   </select>
  </label>
  <p className="pb-3 text-xs text-gray-500 dark:text-gray-400">{pending?'Updating invoices…':'Totals and booking status follow the selected month.'}</p>
 </div>;
}