import { CalendarDays, Search } from 'lucide-react';

import { useRef } from 'react';

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

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
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 { 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 SeoCalendarEntryRow {
  id: number;
  site_id: number;
  site_name: string | null;
  site_domain: string | null;
  title: string;
  status: string;
  source_type: string | null;
  scheduled_date: string | null;
  completed_at: string | null;
  created_at: string;
}

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

interface Props {
  entries: PaginatedEntries;
  filters: { status: string; search?: string };
}

export default function SeoCalendarIndex({ entries, filters }: Props) {
  const isNavigating = useNavigationState();
  const searchRef = useRef<HTMLInputElement>(null);

  const { search, setSearch, updateFilter, handlePage } = useAdminFilters({
    route: route('admin.seo-calendar.index'),
    filters,
  });

  useAdminKeyboardShortcuts({
    onSearch: () => searchRef.current?.focus(),
    onNextPage: entries.current_page < entries.last_page ? () => handlePage(entries.current_page + 1) : undefined,
    onPrevPage: entries.current_page > 1 ? () => handlePage(entries.current_page - 1) : undefined,
  });

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

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

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <PageHeader
            title="SEO Calendar"
            description="Scheduled SEO tasks and content deadlines across all sites."
            actions={
              <ExportButton
                href={route('admin.seo-calendar.export')}
                params={{
                  ...(filters.status ? { status: filters.status } : {}),
                }}
              />
            }
          />
          <div className="flex flex-wrap items-center gap-2">
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                ref={searchRef}
                placeholder="Search entries…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="pl-9 w-52"
                aria-label="Search SEO calendar entries"
              />
            </div>
            <Select
              value={filters.status || 'all'}
              onValueChange={(value) => updateFilter({ status: value === 'all' ? '' : value })}
            >
              <SelectTrigger className="w-40">
                <SelectValue placeholder="Filter status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                <SelectItem value="scheduled">Scheduled</SelectItem>
                <SelectItem value="completed">Completed</SelectItem>
                <SelectItem value="overdue">Overdue</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <AdminDataTable
          isEmpty={entries.data.length === 0}
          isNavigating={isNavigating}
          pagination={entries}
          onPage={handlePage}
          paginationLabel="SEO calendar entries"
          emptyIcon={CalendarDays}
          emptyTitle="No SEO calendar entries found"
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Title</TableHead>
                <TableHead>Site</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Source</TableHead>
                <TableHead>Scheduled</TableHead>
                <TableHead>Completed</TableHead>
                <TableHead>Created</TableHead>
                <TableHead className="w-16" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {entries.data.map((entry) => (
                <TableRow key={entry.id}>
                  <TableCell className="font-medium">{entry.title}</TableCell>
                  <TableCell>
                    <div className="text-sm">
                      <div>{entry.site_name}</div>
                      <div className="text-muted-foreground">{entry.site_domain}</div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        entry.status === 'completed'
                          ? 'default'
                          : entry.status === 'overdue'
                            ? 'destructive'
                            : 'secondary'
                      }
                    >
                      {entry.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {entry.source_type ?? '—'}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {entry.scheduled_date ? formatRelativeTime(entry.scheduled_date) : '—'}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {entry.completed_at ? formatRelativeTime(entry.completed_at) : '—'}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(entry.created_at)}
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm" asChild>
                      <Link href={route('admin.sites.show', { site: entry.site_id })}>
                        Site
                      </Link>
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </div>
    </AdminLayout>
  );
}
