import { CountryMarkerDot } from '@admin/components/dashboard/country-marker-dot';
import type { DashboardClientsByCountry } from '@admin/types/dashboard';

type CountryBreakdownProps = {
    clientsByCountry: DashboardClientsByCountry;
};

function trendClass(trend: DashboardClientsByCountry['rows'][number]['trend']): string {
    if (trend === 'up') {
        return 'text-success';
    }

    if (trend === 'down') {
        return 'text-warning';
    }

    return 'text-gray-500 dark:text-white/60';
}

export function CountryBreakdown({ clientsByCountry }: CountryBreakdownProps) {
    const { rows } = clientsByCountry;

    if (rows.length === 0) {
        return <p className="px-4 py-8 text-center text-sm text-gray-500 dark:text-white/70">No clients yet.</p>;
    }

    return (
        <div className="max-h-96 overflow-x-auto overflow-y-auto px-4 pb-4">
            <table className="ti-custom-table ti-custom-table-head mb-0 w-full min-w-[16rem]">
                <thead>
                    <tr>
                        <th scope="col" className="!text-start !px-2 !text-xs">
                            Country
                        </th>
                        <th scope="col" className="!text-end !px-2 !text-xs whitespace-nowrap">
                            Clients
                        </th>
                        <th scope="col" className="!text-end !px-2 !text-xs whitespace-nowrap">
                            Share
                        </th>
                        <th scope="col" className="!text-end !px-2 !text-xs whitespace-nowrap w-[4.5rem]">
                            Trend
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {rows.map((row) => (
                        <tr key={row.country}>
                            <td className="!text-start !px-2 font-medium text-gray-800 dark:text-white max-w-[8rem]">
                                <span className="inline-flex min-w-0 items-center gap-2">
                                    <CountryMarkerDot country={row.country} />
                                    <span className="truncate">{row.country}</span>
                                </span>
                            </td>
                            <td className="!text-end !px-2 whitespace-nowrap">{row.total}</td>
                            <td className="!text-end !px-2 whitespace-nowrap text-gray-600 dark:text-white/70">
                                {row.sharePercent}%
                            </td>
                            <td className={`!text-end !px-2 whitespace-nowrap text-xs font-medium ${trendClass(row.trend)}`}>
                                <span className="inline-flex max-w-full items-center justify-end gap-0.5">
                                    {row.trend === 'up' ? <i className="ti ti-trending-up shrink-0" /> : null}
                                    {row.trend === 'down' ? <i className="ti ti-trending-down shrink-0" /> : null}
                                    <span className="truncate">{row.trendLabel}</span>
                                </span>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}