import { TrendingUp } from 'lucide-react';

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

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import AdminPage from '@/Components/admin/AdminPage';
import { SortHeader } from '@/Components/admin/SortHeader';
import { Badge } from '@/Components/ui/badge';
import { ExportButton } from '@/Components/ui/export-button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import { useAdminFilters } from '@/hooks/useAdminFilters';
import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts';
import { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatRelativeTime, formatNumber } from '@/lib/format';
import type { PaginatedResponse } from '@/types';

interface RoiSnapshotRow {
  id: number;
  recommendation_id: number;
  page_url: string | null;
  action_type: string | null;
  site_id: number | null;
  site_name: string | null;
  site_domain: string | null;
  days_tracked: number | null;
  baseline_clicks: number | null;
  current_clicks: number | null;
  clicks_delta: number | null;
  clicks_delta_pct: string | null;
  is_significant: boolean;
  last_calculated_at: string | null;
  created_at: string;
}

interface Props {
  snapshots: PaginatedResponse<RoiSnapshotRow>;
  filters: {
    significant?: string;
    sort?: string;
    dir?: string;
  };
  stats: {
    total: number;
    significant: number;
  };
}

export default function AdminRecommendationRoiSnapshotsIndex({ snapshots, filters, stats }: Props) {
  const { updateFilter, handleSort, handlePage } = useAdminFilters({
    route: '/admin/recommendation-roi-snapshots',
    filters,
  });
  const isNavigating = useNavigationState();

  useAdminKeyboardShortcuts({
    onNextPage:
      snapshots.current_page < snapshots.last_page
        ? () => handlePage(snapshots.current_page + 1)
        : undefined,
    onPrevPage:
      snapshots.current_page > 1 ? () => handlePage(snapshots.current_page - 1) : undefined,
  });

  const formatDelta = (delta: number | null, pct: string | null) => {
    if (delta === null) return '—';
    const sign = delta >= 0 ? '+' : '';
    const pctStr = pct != null ? ` (${sign}${Number(pct).toFixed(1)}%)` : '';
    return `${sign}${delta}${pctStr}`;
  };

  return (
    <AdminLayout>
      <AdminPage
        title="Recommendation ROI Snapshots"
        subtitle={`${formatNumber(stats.total)} total · ${formatNumber(stats.significant)} significant`}
        breadcrumbs={[{ label: 'Admin', href: '/admin' }, { label: 'ROI Snapshots' }]}
        actions={
          <ExportButton
            href={route('admin.recommendation-roi-snapshots.export')}
            params={{
              ...(filters.significant ? { significant: filters.significant } : {}),
            }}
          />
        }
      >
        <fieldset className="flex flex-col sm:flex-row gap-3">
          <legend className="sr-only">ROI Snapshot Filters</legend>
          <Select
            value={filters.significant ?? 'all'}
            onValueChange={(v) => updateFilter({ significant: v === 'all' ? undefined : v })}
          >
            <SelectTrigger className="w-[200px]" aria-label="Filter by significance">
              <SelectValue placeholder="All snapshots" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Snapshots</SelectItem>
              <SelectItem value="1">Significant Only</SelectItem>
              <SelectItem value="0">Not Significant</SelectItem>
            </SelectContent>
          </Select>
        </fieldset>

        <AdminDataTable
          isEmpty={snapshots.data.length === 0}
          isNavigating={isNavigating}
          pagination={snapshots}
          onPage={handlePage}
          paginationLabel="snapshots"
          emptyIcon={TrendingUp}
          emptyTitle="No ROI snapshots found"
          emptyDescription="ROI tracking snapshots appear when recommendations are marked as applied."
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Page URL</TableHead>
                <TableHead>Site</TableHead>
                <TableHead>Action</TableHead>
                <SortHeader
                  column="days_tracked"
                  label="Days Tracked"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <TableHead>Baseline Clicks</TableHead>
                <SortHeader
                  column="clicks_delta"
                  label="Clicks Δ"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <TableHead>Significant</TableHead>
                <SortHeader
                  column="last_calculated_at"
                  label="Last Calculated"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
              </TableRow>
            </TableHeader>
            <TableBody>
              {snapshots.data.map((snap) => (
                <TableRow key={snap.id}>
                  <TableCell
                    className="max-w-[200px] truncate text-sm font-medium font-mono"
                    title={snap.page_url ?? undefined}
                  >
                    {snap.page_url ?? '—'}
                  </TableCell>
                  <TableCell>
                    {snap.site_id ? (
                      <Link href={`/admin/sites/${snap.site_id}`} className="hover:underline">
                        <p className="text-sm font-medium hover:underline">{snap.site_name ?? '—'}</p>
                        <p className="text-xs text-muted-foreground">{snap.site_domain}</p>
                      </Link>
                    ) : (
                      <p className="text-sm text-muted-foreground">—</p>
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {snap.action_type?.replace(/_/g, ' ') ?? '—'}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">{snap.days_tracked ?? '—'}</TableCell>
                  <TableCell className="text-sm text-muted-foreground">{snap.baseline_clicks ?? '—'}</TableCell>
                  <TableCell
                    className={`text-sm font-medium ${
                      snap.clicks_delta != null && snap.clicks_delta >= 0
                        ? 'text-success-strong'
                        : 'text-destructive'
                    }`}
                  >
                    {formatDelta(snap.clicks_delta, snap.clicks_delta_pct)}
                  </TableCell>
                  <TableCell>
                    <Badge variant={snap.is_significant ? 'default' : 'outline'}>
                      {snap.is_significant ? 'Yes' : 'No'}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {snap.last_calculated_at ? formatRelativeTime(snap.last_calculated_at) : '—'}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </AdminPage>
    </AdminLayout>
  );
}