import { TrendingUp, TrendingDown, Minus } from 'lucide-react';

import { formatNumber, formatPercent } from '@/lib/format';
import { cn } from '@/lib/utils';

interface CountryData {
  country: string;
  clicks: number;
  impressions: number;
  ctr: number;
  position: number;
  clicksTrend?: number;
}

interface CountryTableProps {
  data: CountryData[];
  onRowClick?: (country: string) => void;
}

export default function CountryTable({ data, onRowClick }: CountryTableProps) {
  if (data.length === 0) return null;

  const hasTrends = data.some((d) => d.clicksTrend !== undefined);

  return (
    <div>
      <h3 className="text-sm font-medium mb-2">Country Performance</h3>
      <div className="rounded-lg border overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b bg-muted/50">
              <th scope="col" className="text-left p-2 font-medium">
                Country
              </th>
              <th scope="col" className="text-right p-2 font-medium">
                Clicks
              </th>
              <th scope="col" className="text-right p-2 font-medium">
                Impressions
              </th>
              <th scope="col" className="text-right p-2 font-medium">
                CTR
              </th>
              <th scope="col" className="text-right p-2 font-medium">
                Position
              </th>
              {hasTrends && (
                <th scope="col" className="text-right p-2 font-medium">
                  Trend
                </th>
              )}
            </tr>
          </thead>
          <tbody>
            {data.map((country, index) => (
              <tr
                key={`${country.country}-${index}`}
                className={cn(
                  'border-b last:border-0',
                  onRowClick &&
                    'cursor-pointer hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:bg-muted/50',
                )}
                onClick={() => onRowClick?.(country.country)}
                tabIndex={onRowClick ? 0 : undefined}
                onKeyDown={
                  onRowClick
                    ? (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                          e.preventDefault();
                          onRowClick(country.country);
                        }
                      }
                    : undefined
                }
              >
                <td className="p-2">{country.country}</td>
                <td className="text-right p-2">{formatNumber(country.clicks)}</td>
                <td className="text-right p-2">{formatNumber(country.impressions)}</td>
                <td className="text-right p-2">{formatPercent(country.ctr, 2)}</td>
                <td className="text-right p-2">{country.position.toFixed(2)}</td>
                {hasTrends && (
                  <td className="text-right p-2">
                    {country.clicksTrend !== undefined && (
                      <div className="flex items-center justify-end gap-1">
                        {country.clicksTrend > 5 ? (
                          <>
                            <TrendingUp className="h-4 w-4 text-green-600 dark:text-green-400" />
                            <span className="text-green-600 dark:text-green-400">
                              +{country.clicksTrend.toFixed(1)}%
                            </span>
                          </>
                        ) : country.clicksTrend < -5 ? (
                          <>
                            <TrendingDown className="h-4 w-4 text-red-600 dark:text-red-400" />
                            <span className="text-red-600 dark:text-red-400">
                              {country.clicksTrend.toFixed(1)}%
                            </span>
                          </>
                        ) : (
                          <>
                            <Minus className="h-4 w-4 text-muted-foreground" />
                            <span className="text-muted-foreground">
                              {country.clicksTrend.toFixed(1)}%
                            </span>
                          </>
                        )}
                      </div>
                    )}
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}