import { CheckCircle, Lightbulb, Search, Star } from 'lucide-react';

import { useRef, useState } from 'react';

import { Head, Link, router } from '@inertiajs/react';

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import { AdminStatsGrid, type StatCard } from '@/Components/admin/AdminStatsGrid';
import { ChartErrorBoundary } from '@/Components/admin/ChartErrorBoundary';
import { PerPageSelector } from '@/Components/admin/PerPageSelector';
import { SortHeader } from '@/Components/admin/SortHeader';
import PageHeader from '@/Components/layout/PageHeader';
import { Badge } from '@/Components/ui/badge';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/Components/ui/breadcrumb';
import { Button } from '@/Components/ui/button';
import { Checkbox } from '@/Components/ui/checkbox';
import { ExportButton } from '@/Components/ui/export-button';
import { Input } from '@/Components/ui/input';
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 } from '@/lib/format';

interface RecommendationRow {
  id: number;
  site_id: number | null;
  site_name: string | null;
  site_domain: string | null;
  page_url: string;
  action_type: string;
  impact_score: string;
  lifecycle_status: string;
  created_at: string;
}

interface PaginatedRecommendations {
  data: RecommendationRow[];
  current_page: number;
  last_page: number;
  from: number | null;
  to: number | null;
  total: number;
}

interface Stats {
  total: number;
  pending: number;
  applied: number;
  avg_impact_score: number;
}

interface Props {
  recommendations: PaginatedRecommendations;
  filters: {
    search?: string;
    site_id?: string;
    action_type?: string;
    lifecycle_status?: string;
    sort?: string;
    dir?: string;
    per_page?: number;
  };
  stats: Stats;
}

const lifecycleVariant = (status: string): 'default' | 'secondary' | 'outline' | 'destructive' | 'success' => {
  switch (status) {
    case 'applied':
    case 'tracking':
      return 'success';
    case 'approved':
      return 'default';
    case 'rejected':
      return 'destructive';
    case 'reviewed':
      return 'secondary';
    default:
      return 'outline';
  }
};

export default function Index({ recommendations, filters, stats }: Props) {
  const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({
    route: 'admin.recommendations.index',
    filters,
  });
  const isNavigating = useNavigationState();
  const searchInputRef = useRef<HTMLInputElement>(null);
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const [bulkStatus, setBulkStatus] = useState('');
  const [isBulkUpdating, setIsBulkUpdating] = useState(false);

  const statCards: StatCard[] = [
    { title: 'Total', value: stats.total, icon: Lightbulb },
    { title: 'Pending', value: stats.pending, icon: Lightbulb },
    { title: 'Applied', value: stats.applied, icon: CheckCircle },
    { title: 'Avg Impact', value: Math.round((stats.avg_impact_score ?? 0) * 10) / 10, icon: Star },
  ];

  const currentPage = recommendations.current_page;
  const lastPage = recommendations.last_page;
  useAdminKeyboardShortcuts({
    onSearch: () => searchInputRef.current?.focus(),
    onNextPage: currentPage < lastPage ? () => handlePage(currentPage + 1) : undefined,
    onPrevPage: currentPage > 1 ? () => handlePage(currentPage - 1) : undefined,
  });

  const pageIds = recommendations.data.map((r) => r.id);
  const allPageSelected = pageIds.length > 0 && pageIds.every((id) => selectedIds.includes(id));
  const somePageSelected = pageIds.some((id) => selectedIds.includes(id));

  const toggleSelectAll = () => {
    if (allPageSelected) {
      setSelectedIds((prev) => prev.filter((id) => !pageIds.includes(id)));
    } else {
      setSelectedIds((prev) => [...new Set([...prev, ...pageIds])]);
    }
  };

  const toggleSelectRow = (id: number) => {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
    );
  };

  const handleBulkUpdate = () => {
    if (!bulkStatus || selectedIds.length === 0) return;
    setIsBulkUpdating(true);
    router.patch(
      route('admin.recommendations.bulk-status'),
      { recommendation_ids: selectedIds, lifecycle_status: bulkStatus },
      {
        onFinish: () => {
          setIsBulkUpdating(false);
          setSelectedIds([]);
          setBulkStatus('');
        },
      },
    );
  };

  return (
    <AdminLayout>
      <Head title="Recommendations" />
      <div className="container py-6 space-y-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Recommendations</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        <AdminStatsGrid stats={statCards} />

        <PageHeader
          title="Recommendations"
          description="Browse all recommendations across sites"
          actions={
            <ExportButton
              href={route('admin.recommendations.export')}
              params={{
                ...(filters.search ? { search: filters.search } : {}),
                ...(filters.action_type ? { action_type: filters.action_type } : {}),
                ...(filters.lifecycle_status ? { lifecycle_status: filters.lifecycle_status } : {}),
              }}
            />
          }
        />

        {selectedIds.length > 0 && (
          <div className="flex items-center gap-3 rounded-md border bg-muted/50 px-4 py-2">
            <span className="text-sm font-medium">{selectedIds.length} selected</span>
            <Select value={bulkStatus} onValueChange={setBulkStatus}>
              <SelectTrigger className="w-[160px] h-8 text-sm" aria-label="Bulk status">
                <SelectValue placeholder="Set status…" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="reviewed">Reviewed</SelectItem>
                <SelectItem value="approved">Approved</SelectItem>
                <SelectItem value="rejected">Rejected</SelectItem>
                <SelectItem value="applied">Applied</SelectItem>
                <SelectItem value="tracking">Tracking</SelectItem>
              </SelectContent>
            </Select>
            <Button
              size="sm"
              disabled={!bulkStatus || isBulkUpdating}
              onClick={handleBulkUpdate}
            >
              {isBulkUpdating ? 'Updating…' : 'Apply'}
            </Button>
            <Button
              size="sm"
              variant="ghost"
              onClick={() => setSelectedIds([])}
            >
              Clear
            </Button>
          </div>
        )}

        <div className="flex items-center gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              ref={searchInputRef}
              placeholder="Search by page URL..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
            />
          </div>
          <Select
            value={filters.action_type ?? 'all'}
            onValueChange={(val) => updateFilter({ action_type: val === 'all' ? undefined : val })}
          >
            <SelectTrigger className="w-[180px]" aria-label="Filter by action type">
              <SelectValue placeholder="All types" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Types</SelectItem>
              <SelectItem value="content_rewrite">Content Rewrite</SelectItem>
              <SelectItem value="meta_tag_optimization">Meta Tag</SelectItem>
              <SelectItem value="internal_linking">Internal Linking</SelectItem>
              <SelectItem value="thin_content">Thin Content</SelectItem>
              <SelectItem value="noindex">Noindex</SelectItem>
              <SelectItem value="eeat_improvement">E-E-A-T</SelectItem>
              <SelectItem value="geo_improvement">GEO</SelectItem>
            </SelectContent>
          </Select>
          <Select
            value={filters.lifecycle_status ?? 'all'}
            onValueChange={(val) => updateFilter({ lifecycle_status: val === 'all' ? undefined : val })}
          >
            <SelectTrigger className="w-[160px]" aria-label="Filter by status">
              <SelectValue placeholder="All statuses" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="reviewed">Reviewed</SelectItem>
              <SelectItem value="approved">Approved</SelectItem>
              <SelectItem value="rejected">Rejected</SelectItem>
              <SelectItem value="applied">Applied</SelectItem>
              <SelectItem value="tracking">Tracking</SelectItem>
            </SelectContent>
          </Select>
          <div className="sm:ml-auto">
            <PerPageSelector
              value={filters.per_page ?? 25}
              onChange={(perPage) => updateFilter({ per_page: perPage })}
            />
          </div>
        </div>

        <ChartErrorBoundary label="Unable to load recommendations table">
          <AdminDataTable
            isEmpty={recommendations.data.length === 0}
            isNavigating={isNavigating}
            pagination={recommendations}
            onPage={handlePage}
            paginationLabel="recommendations"
            emptyIcon={Lightbulb}
            emptyTitle="No recommendations found"
            emptyDescription="No recommendations match your filters."
          >
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-10">
                    <Checkbox
                      checked={allPageSelected}
                      data-state={somePageSelected && !allPageSelected ? 'indeterminate' : undefined}
                      onCheckedChange={toggleSelectAll}
                      aria-label="Select all on page"
                    />
                  </TableHead>
                  <TableHead>Site</TableHead>
                  <TableHead>Page URL</TableHead>
                  <TableHead>Action Type</TableHead>
                  <SortHeader
                    column="impact_score"
                    label="Impact"
                    currentSort={filters.sort}
                    currentDir={filters.dir}
                    onSort={handleSort}
                  />
                  <TableHead>Status</TableHead>
                  <SortHeader
                    column="created_at"
                    label="Created"
                    currentSort={filters.sort}
                    currentDir={filters.dir}
                    onSort={handleSort}
                  />
                  <TableHead className="w-16" />
                </TableRow>
              </TableHeader>
              <TableBody>
                {recommendations.data.map((rec) => (
                  <TableRow key={rec.id} data-state={selectedIds.includes(rec.id) ? 'selected' : undefined}>
                    <TableCell>
                      <Checkbox
                        checked={selectedIds.includes(rec.id)}
                        onCheckedChange={() => toggleSelectRow(rec.id)}
                        aria-label={`Select recommendation ${rec.id}`}
                      />
                    </TableCell>
                    <TableCell>
                      {rec.site_id ? (
                        <a
                          href={route('admin.sites.show', { site: rec.site_id })}
                          className="text-primary hover:underline text-sm"
                        >
                          {rec.site_name ?? '—'}
                        </a>
                      ) : (
                        <span className="text-sm text-muted-foreground">—</span>
                      )}
                    </TableCell>
                    <TableCell
                      className="max-w-[200px] truncate text-xs font-mono"
                      title={rec.page_url}
                    >
                      {rec.page_url}
                    </TableCell>
                    <TableCell className="text-sm">
                      {rec.action_type.replace(/_/g, ' ')}
                    </TableCell>
                    <TableCell className="text-sm font-mono">{rec.impact_score}</TableCell>
                    <TableCell>
                      <Badge variant={lifecycleVariant(rec.lifecycle_status)}>
                        {rec.lifecycle_status}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-sm text-muted-foreground">
                      {formatRelativeTime(rec.created_at)}
                    </TableCell>
                    <TableCell>
                      <Button variant="ghost" size="sm" asChild>
                        <Link href={route('admin.recommendations.show', { recommendation: rec.id })}>
                          View
                        </Link>
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </AdminDataTable>
        </ChartErrorBoundary>
      </div>
    </AdminLayout>
  );
}