import { router } from '@inertiajs/react';
import { ArrowDown, ArrowDownUp, ArrowUp } from 'lucide-react';
import { ReactNode } from 'react';

/**
 * Yeniden kullanılabilir sıralanabilir tablo başlığı.
 * Backend sort + dir query parametrelerini günceller; mevcut filtreleri korur.
 *
 * Hizalama:
 *  - varsayılan: sola yaslı
 *  - sag: sağa yaslı (sayısal kolonlar için)
 *  - orta: ortaya hizalı (rozet/durum kolonları için)
 */
interface Props {
    kolon: string;
    aktif: string;
    dir: 'asc' | 'desc';
    onSort: (kolon: string) => void;
    sag?: boolean;
    orta?: boolean;
    className?: string;
    children: ReactNode;
}

export default function SortableTh({ kolon, aktif, dir, onSort, sag, orta, className = '', children }: Props) {
    const seciliMi = aktif === kolon;
    const Ikon = !seciliMi ? ArrowDownUp : dir === 'asc' ? ArrowUp : ArrowDown;
    const hizaTh   = orta ? 'text-center' : sag ? 'text-right' : 'text-left';
    const hizaBtn  = orta ? 'justify-center' : sag ? 'flex-row-reverse' : '';
    return (
        <th className={`px-4 py-3 ${hizaTh} select-none whitespace-nowrap ${className}`}>
            <button type="button" onClick={() => onSort(kolon)}
                className={`group inline-flex items-center gap-1 ${hizaBtn} ${
                    seciliMi ? 'text-blue-700' : 'text-slate-600 hover:text-slate-900'
                }`}
                title={seciliMi
                    ? (dir === 'asc' ? 'Artan — tıkla azalan yap' : 'Azalan — tıkla artan yap')
                    : 'Bu sütuna göre sırala'}>
                <span className="uppercase">{children}</span>
                <Ikon className={`h-3 w-3 ${seciliMi ? 'opacity-100' : 'opacity-40 group-hover:opacity-70'}`} />
            </button>
        </th>
    );
}

/**
 * Tablo sıralama hook'u — URL'i günceller, mevcut query parametrelerini korur.
 */
export function useTableSort(
    url: string,
    aktifSort: string,
    aktifDir: 'asc' | 'desc',
    ekstraParams: Record<string, any> = {},
) {
    return (kolon: string) => {
        let yeniDir: 'asc' | 'desc' = 'asc';
        if (aktifSort === kolon) yeniDir = aktifDir === 'asc' ? 'desc' : 'asc';
        router.get(url, { ...ekstraParams, sort: kolon, dir: yeniDir }, {
            preserveState: true, replace: true, preserveScroll: true,
        });
    };
}