import { BarChart3 } from 'lucide-react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { EmptyState } from '@/Components/ui/empty-state';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import type { TierUsageRow } from '@/types/admin';

interface TierUsageTableProps {
  data: TierUsageRow[];
}

function formatPct(value: number): string {
  return `${value}%`;
}

function formatAvg(value: number): string {
  return value % 1 === 0 ? String(value) : value.toFixed(1);
}

export function TierUsageTable({ data }: TierUsageTableProps) {
  const hasUsers = data.some((row) => row.user_count > 0);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Usage by Tier</CardTitle>
        <CardDescription>
          Average feature adoption per user across billing tiers (last 30 days)
        </CardDescription>
      </CardHeader>
      <CardContent>
        {!hasUsers ? (
          <EmptyState
            icon={BarChart3}
            title="No users yet"
            description="Usage data will appear here once users are active."
            size="sm"
          />
        ) : (
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Tier</TableHead>
                  <TableHead className="text-right">Users</TableHead>
                  <TableHead className="text-right">Avg Sites</TableHead>
                  <TableHead className="text-right">Avg Analyses</TableHead>
                  <TableHead className="text-right">Avg Drafts</TableHead>
                  <TableHead className="text-right">Avg Applied</TableHead>
                  <TableHead className="text-right">GSC %</TableHead>
                  <TableHead className="text-right">WP %</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.map((row) => (
                  <TableRow
                    key={row.tier}
                    className={row.user_count === 0 ? 'text-muted-foreground' : 'hover:bg-muted/50'}
                  >
                    <TableCell className="font-medium capitalize">{row.tier}</TableCell>
                    <TableCell className="text-right tabular-nums">{row.user_count}</TableCell>
                    <TableCell className="text-right tabular-nums">
                      {formatAvg(row.avg_sites)}
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {formatAvg(row.avg_analyses_30d)}
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {formatAvg(row.avg_drafts_30d)}
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {formatAvg(row.avg_applied_recommendations_30d)}
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {formatPct(row.pct_gsc_connected)}
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {formatPct(row.pct_wp_connected)}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        )}
      </CardContent>
    </Card>
  );
}