import { BarChart2 } from 'lucide-react';

import MetricDelta from '@/Components/Shared/MetricDelta';
import { Badge } from '@/Components/ui/badge';
import { EmptyState } from '@/Components/ui/empty-state';

interface SegmentFinding {
  id: number;
  segment_value: string;
  delta_percent: number;
  direction: string;
}

interface SegmentBreakdownProps {
  segments: {
    countries: SegmentFinding[];
    devices: SegmentFinding[];
    searchTypes: SegmentFinding[];
  };
}

function SegmentTable({ title, items }: { title: string; items: SegmentFinding[] }) {
  if (items.length === 0) return null;

  return (
    <div>
      <h3 className="text-sm font-medium mb-2">{title}</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">Segment</th>
              <th scope="col" className="text-right p-2 font-medium">Change</th>
              <th scope="col" className="text-right p-2 font-medium">Direction</th>
            </tr>
          </thead>
          <tbody>
            {items.map((item) => (
              <tr key={item.id} className="border-b last:border-0">
                <td className="p-2">{item.segment_value}</td>
                <td className="text-right p-2">
                  <MetricDelta value={item.delta_percent} format="percent" />
                </td>
                <td className="text-right p-2">
                  <Badge variant={item.direction === 'positive' ? 'success' : 'destructive'}>
                    {item.direction}
                  </Badge>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default function SegmentBreakdown({ segments }: SegmentBreakdownProps) {
  const hasData =
    segments.countries.length > 0 || segments.devices.length > 0 || segments.searchTypes.length > 0;

  if (!hasData) {
    return (
      <div>
        <h2 className="text-lg font-semibold mb-4">Segment Breakdown</h2>
        <EmptyState
          icon={BarChart2}
          title="No segment data"
          description="Segment breakdown will appear once analysis data is available for this time period."
          size="sm"
        />
      </div>
    );
  }

  return (
    <div>
      <h2 className="text-lg font-semibold mb-4">Segment Breakdown</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <SegmentTable title="Countries" items={segments.countries} />
        <SegmentTable title="Devices" items={segments.devices} />
        <SegmentTable title="Search Types" items={segments.searchTypes} />
      </div>
    </div>
  );
}