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

import { useRef } from 'react';

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

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
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 { 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, formatNumber } from '@/lib/format';
import type { PaginatedResponse } from '@/types';

interface WpPublishLogRow {
  id: number;
  site_id: number | null;
  site_name: string | null;
  site_domain: string | null;
  ai_draft_id: number | null;
  wp_post_id: number | null;
  publish_type: string | null;
  status: string;
  error: string | null;
  created_at: string;
}

interface Props {
  logs: PaginatedResponse<WpPublishLogRow>;
  filters: {
    search?: string;
    status?: string;
    publish_type?: string;
    sort?: string;
    dir?: string;
  };
  stats: {
    total: number;
    success: number;
    failed: number;
  };
}

const statusVariant = (
  status: string,
): 'default' | 'secondary' | 'destructive' | 'outline' | 'success' => {
  if (status === 'success') return 'success';
  if (status === 'failed') return 'destructive';
  return 'secondary';
};

export default function AdminWpPublishLogsIndex({ logs, filters, stats }: Props) {
  const searchInputRef = useRef<HTMLInputElement>(null);
  const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({
    route: '/admin/wp-publish-logs',
    filters,
  });
  const isNavigating = useNavigationState();

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

  return (
    <AdminLayout>
      <Head title="Admin - WP Publish Logs" />
      <div className="container pt-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>WP Publish Logs</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <PageHeader
        title="WP Publish Logs"
        subtitle={`${formatNumber(stats.total)} total · ${formatNumber(stats.success)} success · ${formatNumber(stats.failed)} failed`}
        actions={
          <ExportButton
            href={route('admin.wp-publish-logs.export')}
            params={{
              ...(filters.search ? { search: filters.search } : {}),
              ...(filters.status ? { status: filters.status } : {}),
              ...(filters.publish_type ? { publish_type: filters.publish_type } : {}),
            }}
          />
        }
      />

      <div className="container py-8 space-y-4">
        <fieldset className="flex flex-col sm:flex-row gap-3">
          <legend className="sr-only">WP Publish Log Filters</legend>
          <div className="relative flex-1 max-w-sm">
            <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 site name or domain..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
              aria-label="Search WP publish logs"
            />
          </div>
          <Select
            value={filters.status ?? 'all'}
            onValueChange={(v) => updateFilter({ status: v === 'all' ? undefined : v })}
          >
            <SelectTrigger className="w-[160px]" aria-label="Filter by status">
              <SelectValue placeholder="All Statuses" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="success">Success</SelectItem>
              <SelectItem value="failed">Failed</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
            </SelectContent>
          </Select>
        </fieldset>

        <AdminDataTable
          isEmpty={logs.data.length === 0}
          isNavigating={isNavigating}
          pagination={logs}
          onPage={handlePage}
          paginationLabel="publish logs"
          emptyIcon={FileCode}
          emptyTitle="No publish logs found"
          emptyDescription="WordPress publish logs will appear here after content is published."
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-16">ID</TableHead>
                <TableHead>Site</TableHead>
                <TableHead>WP Post</TableHead>
                <TableHead>Draft</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Error</TableHead>
                <SortHeader
                  column="created_at"
                  label="Created"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
              </TableRow>
            </TableHeader>
            <TableBody>
              {logs.data.map((log) => (
                <TableRow key={log.id}>
                  <TableCell className="font-mono text-xs text-muted-foreground">
                    #{log.id}
                  </TableCell>
                  <TableCell>
                    {log.site_id ? (
                      <Link href={`/admin/sites/${log.site_id}`} className="hover:underline">
                        <p className="text-sm font-medium text-primary">{log.site_name ?? '—'}</p>
                        <p className="text-xs text-muted-foreground">{log.site_domain}</p>
                      </Link>
                    ) : (
                      <p className="text-sm text-muted-foreground">—</p>
                    )}
                  </TableCell>
                  <TableCell className="font-mono text-xs text-muted-foreground">
                    {log.wp_post_id ?? '—'}
                  </TableCell>
                  <TableCell className="font-mono text-xs text-muted-foreground">
                    {log.ai_draft_id ? (
                      <Link
                        href={`/admin/ai-drafts/${log.ai_draft_id}`}
                        className="hover:underline text-primary"
                      >
                        #{log.ai_draft_id}
                      </Link>
                    ) : (
                      '—'
                    )}
                  </TableCell>
                  <TableCell className="text-sm">{log.publish_type ?? '—'}</TableCell>
                  <TableCell>
                    <Badge variant={statusVariant(log.status)}>{log.status}</Badge>
                  </TableCell>
                  <TableCell
                    className="max-w-[160px] truncate text-xs text-destructive"
                    title={log.error ?? undefined}
                  >
                    {log.error ?? '—'}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(log.created_at)}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </div>
    </AdminLayout>
  );
}
