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


import { Link } from '@inertiajs/react';

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import AdminPage from '@/Components/admin/AdminPage';
import { ChartErrorBoundary } from '@/Components/admin/ChartErrorBoundary';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { CardHeader, CardTitle } from '@/Components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts';
import { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { EMPTY_TITLE } from '@/lib/emptyStateMessages';
import { formatNumber } from '@/lib/format';

interface AggregateRoi {
  total_clicks_delta: number;
  total_impressions_delta: number;
  avg_position_delta: number;
  recommendations_applied: number;
}

interface ImpactUser {
  user_id: number;
  user_email: string;
  user_name: string;
  sites_count?: number;
  aggregate_roi?: AggregateRoi;
}

interface Props {
  users: ImpactUser[];
}

const DeltaCell = ({ value, invert = false }: { value: number; invert?: boolean }) => {
  const isPositive = invert ? value < 0 : value > 0;
  const isNegative = invert ? value > 0 : value < 0;

  return (
    <span
      className={`inline-flex items-center gap-1 font-mono text-sm ${
        isPositive
          ? 'text-success'
          : isNegative
            ? 'text-destructive'
            : 'text-muted-foreground'
      }`}
    >
      {isPositive && <TrendingUp className="size-3" />}
      {isNegative && <TrendingDown className="size-3" />}
      {value > 0 ? '+' : ''}
      {formatNumber(value)}
    </span>
  );
};

export default function Index({ users }: Props) {
  const hasRoiData = users.some((u) => u.aggregate_roi);
  const isNavigating = useNavigationState();

  useAdminKeyboardShortcuts({});

  return (
    <AdminLayout>
      <AdminPage
        title="Customer Impact Reports"
        subtitle="ROI data for users with applied recommendations"
        breadcrumbs={[{ label: 'Admin', href: '/admin' }, { label: 'Impact Reports' }]}
        actions={
          <Button variant="outline" size="sm" asChild>
            <a href={route('admin.impact-reports.export')}>Export CSV</a>
          </Button>
        }
      >

        <ChartErrorBoundary label="Unable to load impact reports table">
          <CardHeader className="px-0 pt-0">
            <CardTitle className="text-base">
              Users with Applied Recommendations ({users.length})
            </CardTitle>
          </CardHeader>
          <AdminDataTable
            isEmpty={users.length === 0}
            isNavigating={isNavigating}
            emptyTitle={EMPTY_TITLE.adminImpactData}
            emptyDescription="No users with applied recommendations yet."
          >
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>User</TableHead>
                  {hasRoiData && (
                    <>
                      <TableHead>Sites</TableHead>
                      <TableHead>Applied Recs</TableHead>
                      <TableHead>Click Delta</TableHead>
                      <TableHead>Impression Delta</TableHead>
                      <TableHead>Avg Position</TableHead>
                    </>
                  )}
                </TableRow>
              </TableHeader>
              <TableBody>
                {users.map((u) => (
                  <TableRow key={u.user_id}>
                    <TableCell>
                      <div>
                        <Link
                          href={route('admin.users.show', u.user_id)}
                          className="text-sm font-medium hover:underline"
                        >
                          {u.user_name}
                        </Link>
                        <p className="text-xs text-muted-foreground">{u.user_email}</p>
                      </div>
                    </TableCell>
                    {hasRoiData && u.aggregate_roi && (
                      <>
                        <TableCell>
                          <Badge variant="outline">{u.sites_count ?? 0}</Badge>
                        </TableCell>
                        <TableCell>
                          <Badge variant="secondary">
                            {u.aggregate_roi.recommendations_applied}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <DeltaCell value={u.aggregate_roi.total_clicks_delta} />
                        </TableCell>
                        <TableCell>
                          <DeltaCell value={u.aggregate_roi.total_impressions_delta} />
                        </TableCell>
                        <TableCell>
                          <DeltaCell value={u.aggregate_roi.avg_position_delta} invert={true} />
                        </TableCell>
                      </>
                    )}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </AdminDataTable>
        </ChartErrorBoundary>
      </AdminPage>
    </AdminLayout>
  );
}