import { useNavigate } from "react-router-dom";
import { ArrowRight, FileText, Train, Users } from "lucide-react";
import { Card, Group, SimpleGrid, Stack, Text, ThemeIcon } from "@mantine/core";

import { useAuth } from "@/auth/useAuth";
import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";

const links = [
  {
    title: "Booking requests",
    description: "Review and action incoming freight bookings",
    href: "/dashboard/booking-requests",
    icon: FileText,
    permission: [FREIGHT_PERMS.bookings.view],
  },
  {
    title: "Train scheduling v2",
    description: "Full allocation workflow — assign, pin wagons, finalize",
    href: "/dashboard/operations/train-scheduling-v2",
    icon: Train,
    permission: [FREIGHT_PERMS.trainScheduling.view],
  },
  {
    title: "Trains",
    description: "Manage train master data and fleet status",
    href: "/dashboard/trains",
    icon: Train,
    permission: [FREIGHT_PERMS.fleet.view, FREIGHT_PERMS.trains.view],
  },
  {
    title: "User management",
    description: "Employees, roles, and permissions",
    href: "/user-management",
    icon: Users,
    permission: [
      FREIGHT_PERMS.admin,
      FREIGHT_PERMS.staff.roles.view,
      FREIGHT_PERMS.staff.employeeRegistration.view,
      FREIGHT_PERMS.staff.roleAssignment.view,
    ],
  },
];

export function OverviewQuickLinks() {
  const navigate = useNavigate();
  const { user } = useAuth();

  const visible = links.filter((link) =>
    link.permission.some((key) => hasPermission(user, key)),
  );
  if (!visible.length) return null;

  return (
    <Stack gap="md" h="100%">
      <Text fw={600}>Quick links</Text>
      <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
        {visible.map((link) => {
          const Icon = link.icon;
          return (
            <Card
              key={link.href}
              p="md"
              radius="lg"
              withBorder
              style={{ cursor: "pointer" }}
              onClick={() => navigate(link.href)}
            >
              <Group justify="space-between" align="flex-start" wrap="nowrap">
                <Group align="flex-start" gap="sm" wrap="nowrap">
                  <ThemeIcon variant="light" color="edr-green" size="lg" radius="md">
                    <Icon size={18} />
                  </ThemeIcon>
                  <Stack gap={2}>
                    <Text fw={600} size="sm">
                      {link.title}
                    </Text>
                    <Text size="xs" c="dimmed">
                      {link.description}
                    </Text>
                  </Stack>
                </Group>
                <ArrowRight size={16} color="var(--mantine-color-gray-5)" />
              </Group>
            </Card>
          );
        })}
      </SimpleGrid>
    </Stack>
  );
}