import { Clock } from 'lucide-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 {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts';
import { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatDate, formatRelativeTime } from '@/lib/format';

interface ScheduledTask {
  command: string;
  expression: string;
  description: string | null;
  next_run_at: string;
  timezone: string;
  without_overlapping: boolean;
  one_server: boolean;
}

interface Props {
  tasks: ScheduledTask[];
  server_time: string;
  timezone: string;
}

export default function ScheduledTasksIndex({ tasks, server_time, timezone }: Props) {
  const isNavigating = useNavigationState();
  useAdminKeyboardShortcuts({});

  return (
    <AdminLayout>
      <Head title="Scheduled Tasks" />
      <div className="container pt-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Scheduled Tasks</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <PageHeader
        title="Scheduled Task Monitor"
        description={`Server time: ${formatDate(server_time)} (${timezone}) — ${tasks.length} task(s) registered`}
      />

      <div className="container py-8 space-y-4">
        <AdminDataTable
          isEmpty={tasks.length === 0}
          isNavigating={isNavigating}
          emptyIcon={Clock}
          emptyTitle="No scheduled tasks"
          emptyDescription="No tasks are registered in the scheduler."
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Command</TableHead>
                <TableHead>Schedule</TableHead>
                <TableHead>Next Run</TableHead>
                <TableHead>Timezone</TableHead>
                <TableHead>Guards</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {tasks.map((task, idx) => (
                <TableRow key={idx}>
                  <TableCell>
                    <div>
                      <p className="text-sm font-mono">{task.command}</p>
                      {task.description && (
                        <p className="text-xs text-muted-foreground">{task.description}</p>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
                      {task.expression}
                    </code>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(task.next_run_at)}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">{task.timezone}</TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      {task.without_overlapping && (
                        <Badge variant="outline" className="text-xs">
                          No Overlap
                        </Badge>
                      )}
                      {task.one_server && (
                        <Badge variant="outline" className="text-xs">
                          One Server
                        </Badge>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </div>
    </AdminLayout>
  );
}
