import { Layers } from 'lucide-react';

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

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import AdminPage from '@/Components/admin/AdminPage';
import { PerPageSelector } from '@/Components/admin/PerPageSelector';
import { SortHeader } from '@/Components/admin/SortHeader';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/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 { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatRelativeTime } from '@/lib/format';
import type { AdminCannibalizationCasesIndexProps } from '@/types/admin';

export default function CannibalizationCasesIndex({
  cases,
  filters,
  statuses,
  lifecycle_statuses,
}: AdminCannibalizationCasesIndexProps) {
  const { updateFilter, handleSort, handlePage, clearFilters } = useAdminFilters({
    route: '/admin/cannibalization-cases',
    filters,
  });
  const isNavigating = useNavigationState();

  const hasFilters = !!(filters.status || filters.lifecycle_status || filters.run_id);

  return (
    <AdminLayout>
      <AdminPage
        title="Cannibalization Cases"
        subtitle="Keyword cannibalization detected across all sites"
        breadcrumbs={[{ label: 'Admin', href: '/admin' }, { label: 'Cannibalization Cases' }]}
      >
        <fieldset className="flex flex-col sm:flex-row gap-3">
          <legend className="sr-only">Case Filters</legend>
          <Select
            value={filters.status ?? 'all'}
            onValueChange={(value) => updateFilter({ status: value === 'all' ? undefined : value })}
          >
            <SelectTrigger className="w-[160px]" aria-label="Filter by status">
              <SelectValue placeholder="Status: All" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Status: All</SelectItem>
              {statuses.map((s) => (
                <SelectItem key={s} value={s}>
                  {s.charAt(0).toUpperCase() + s.slice(1)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select
            value={filters.lifecycle_status ?? 'all'}
            onValueChange={(value) =>
              updateFilter({ lifecycle_status: value === 'all' ? undefined : value })
            }
          >
            <SelectTrigger className="w-[180px]" aria-label="Filter by lifecycle status">
              <SelectValue placeholder="Lifecycle: All" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Lifecycle: All</SelectItem>
              {lifecycle_statuses.map((s) => (
                <SelectItem key={s} value={s}>
                  {s.charAt(0).toUpperCase() + s.slice(1)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {hasFilters && (
            <Button variant="ghost" size="sm" onClick={clearFilters}>
              Clear filters
            </Button>
          )}
          <div className="sm:ml-auto">
            <PerPageSelector
              value={filters.per_page ?? 25}
              onChange={(perPage) => updateFilter({ per_page: perPage })}
            />
          </div>
        </fieldset>

        <AdminDataTable
          isEmpty={cases.data.length === 0}
          isNavigating={isNavigating}
          pagination={cases}
          onPage={handlePage}
          paginationLabel="cases"
          emptyVariant={hasFilters ? 'filtered' : undefined}
          emptyIcon={Layers}
          emptyTitle={hasFilters ? 'No cases match your filters' : 'No cannibalization cases detected yet'}
          emptyDescription={
            hasFilters ? undefined : 'Cases appear after analysis detects competing pages targeting the same queries.'
          }
          emptyPrimaryAction={
            hasFilters ? { label: 'Clear filters', onClick: clearFilters } : undefined
          }
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Site</TableHead>
                <TableHead>Query Cluster</TableHead>
                <TableHead>Pages</TableHead>
                <SortHeader
                  column="impact_score"
                  label="Impact"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <SortHeader
                  column="confidence_score"
                  label="Confidence"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <TableHead>Status</TableHead>
                <SortHeader
                  column="created_at"
                  label="Detected"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
              </TableRow>
            </TableHeader>
            <TableBody>
              {cases.data.map((c) => (
                <TableRow key={c.id}>
                  <TableCell>
                    {c.site_name ? (
                      <div>
                        <div className="font-medium text-sm">{c.site_name}</div>
                        <div className="text-xs text-muted-foreground">{c.site_domain}</div>
                      </div>
                    ) : (
                      <span className="text-muted-foreground">—</span>
                    )}
                  </TableCell>
                  <TableCell>
                    <Link
                      href={route('admin.cannibalization-cases.show', c.id)}
                      className="font-medium hover:underline"
                    >
                      {c.query_cluster}
                    </Link>
                  </TableCell>
                  <TableCell className="text-sm">{c.competing_pages_count}</TableCell>
                  <TableCell className="text-sm">
                    {c.impact_score !== null ? c.impact_score.toFixed(1) : '—'}
                  </TableCell>
                  <TableCell className="text-sm">
                    {c.confidence_score !== null ? c.confidence_score.toFixed(1) : '—'}
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-col gap-1">
                      <Badge variant={c.status === 'open' ? 'warning' : 'success'}>
                        {c.status}
                      </Badge>
                      {c.lifecycle_status !== 'active' && (
                        <Badge variant="outline">{c.lifecycle_status}</Badge>
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(c.created_at)}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </AdminPage>
    </AdminLayout>
  );
}