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

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

interface DeviceData {
  device: string;
  clicks: number;
  impressions: number;
  ctr: number;
  position: number;
  clicksTrend?: number;
}

interface DeviceTableProps {
  data: DeviceData[];
  onRowClick?: (device: string) => void;
}

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

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

  return (
    <div>
      <h3 className="text-sm font-medium mb-2">Device 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">
                Device
              </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((device, index) => (
              <tr
                key={`${device.device}-${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?.(device.device)}
                tabIndex={onRowClick ? 0 : undefined}
                onKeyDown={
                  onRowClick
                    ? (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                          e.preventDefault();
                          onRowClick(device.device);
                        }
                      }
                    : undefined
                }
              >
                <td className="p-2">{device.device}</td>
                <td className="text-right p-2">{formatNumber(device.clicks)}</td>
                <td className="text-right p-2">{formatNumber(device.impressions)}</td>
                <td className="text-right p-2">{formatPercent(device.ctr, 2)}</td>
                <td className="text-right p-2">{device.position.toFixed(2)}</td>
                {hasTrends && (
                  <td className="text-right p-2">
                    {device.clicksTrend !== undefined && (
                      <div className="flex items-center justify-end gap-1">
                        {device.clicksTrend > 5 ? (
                          <>
                            <TrendingUp className="h-4 w-4 text-green-600 dark:text-green-400" />
                            <span className="text-green-600 dark:text-green-400">
                              +{device.clicksTrend.toFixed(1)}%
                            </span>
                          </>
                        ) : device.clicksTrend < -5 ? (
                          <>
                            <TrendingDown className="h-4 w-4 text-red-600 dark:text-red-400" />
                            <span className="text-red-600 dark:text-red-400">
                              {device.clicksTrend.toFixed(1)}%
                            </span>
                          </>
                        ) : (
                          <>
                            <Minus className="h-4 w-4 text-muted-foreground" />
                            <span className="text-muted-foreground">
                              {device.clicksTrend.toFixed(1)}%
                            </span>
                          </>
                        )}
                      </div>
                    )}
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}