import React, { useState, useEffect } from "react";
import { Stack, Title, Card, Group, Button, Table, ActionIcon, Tooltip, Breadcrumbs, Anchor, Text } from "@mantine/core";
import { Link, redirect, type LoaderFunctionArgs } from "react-router";
import { useRoleAccess } from "@/hooks/useRoleAccess";
import { checkAccess, getFirstAccessibleRoute } from "@/lib/role-helpers";
import { getManagers, restoreManager, getManagerHistory } from "@/lib/features/points-transfer/query";
import type { Manager } from "@/lib/features/points-transfer/types";
import { IconHistory, IconRefresh, IconArrowLeft } from "@tabler/icons-react";
import { notifications } from "@mantine/notifications";
import { HistoryDrawer } from "../components/HistoryDrawer";

export async function loader({ request }: LoaderFunctionArgs) {
  if (!checkAccess(request, "read", "dashboard")) {
    const fallback = getFirstAccessibleRoute(request);
    if (fallback && fallback !== "/admin/dashboard") {
      return redirect(fallback);
    }
  }
  return null;
}

const DeactivatedManagersPage = () => {
  const { checkClientAccess } = useRoleAccess();
  const canViewDashboard = checkClientAccess("read", "dashboard");

  const [managers, setManagers] = useState<Manager[]>([]);
  
  // History Drawer State
  const [historyDrawerOpened, setHistoryDrawerOpened] = useState(false);
  const [historyManager, setHistoryManager] = useState<Manager | null>(null);
  const [historyData, setHistoryData] = useState<{ received: any[]; sent: any[] } | null>(null);
  const [loadingHistory, setLoadingHistory] = useState(false);

  const fetchManagers = async () => {
    try {
      const res = await getManagers();
      if (res.success && res.data) {
        setManagers(res.data);
      }
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(() => {
    if (canViewDashboard) {
      fetchManagers();
    }
  }, [canViewDashboard]);

  const handleRestoreManager = async (manager: Manager) => {
    try {
      const res = await restoreManager(manager.id);
      if (res.success) {
        notifications.show({ color: "green", message: "Manager restored successfully" });
        fetchManagers();
      } else {
        notifications.show({ color: "red", message: res.message || "Failed to restore manager" });
      }
    } catch (err) {
      notifications.show({ color: "red", message: "Error restoring manager" });
    }
  };

  const handleViewHistory = async (manager: Manager) => {
    setHistoryManager(manager);
    setHistoryDrawerOpened(true);
    setLoadingHistory(true);
    setHistoryData(null);
    try {
      const res = await getManagerHistory(manager.id);
      if (res.success && res.data) {
        setHistoryData(res.data);
      }
    } catch (err) {
      notifications.show({ color: "red", message: "Failed to load manager transaction history" });
    } finally {
      setLoadingHistory(false);
    }
  };

  if (!canViewDashboard) {
    return null;
  }

  const deletedManagers = managers.filter(m => m.is_deleted);

  return (
    <Stack gap="xl" p="md">
      <Breadcrumbs mb="xs">
        <Anchor component={Link} to="/admin/points-transfer">
          Admin Point Transfer
        </Anchor>
        <Text c="dimmed">Deactivated Managers</Text>
      </Breadcrumbs>

      <Group justify="space-between">
        <Group>
          <ActionIcon component={Link} to="/admin/points-transfer" variant="subtle" color="gray">
            <IconArrowLeft size={20} />
          </ActionIcon>
          <Title order={2}>Deactivated Managers</Title>
        </Group>
      </Group>

      <Card shadow="sm" padding="lg" radius="md" withBorder>
        {deletedManagers.length === 0 ? (
          <Text size="sm" c="dimmed" ta="center" py="xl">No deactivated managers found.</Text>
        ) : (
          <Table striped highlightOnHover>
            <Table.Thead>
              <Table.Tr>
                <Table.Th>Name</Table.Th>
                <Table.Th>Email</Table.Th>
                <Table.Th>Service Center</Table.Th>
                <Table.Th>Actions</Table.Th>
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
              {deletedManagers.map((m) => (
                <Table.Tr key={m.id}>
                  <Table.Td>{m.first_name} {m.last_name || ""}</Table.Td>
                  <Table.Td>{m.email}</Table.Td>
                  <Table.Td>{m.service_center || "N/A"}</Table.Td>
                  <Table.Td>
                    <Group gap={8}>
                      <Tooltip label="Restore/Reactivate Manager">
                        <ActionIcon variant="light" color="green" onClick={() => handleRestoreManager(m)}>
                          <IconRefresh size={16} />
                        </ActionIcon>
                      </Tooltip>
                      <Tooltip label="View History">
                        <ActionIcon variant="light" color="violet" onClick={() => handleViewHistory(m)}>
                          <IconHistory size={16} />
                        </ActionIcon>
                      </Tooltip>
                    </Group>
                  </Table.Td>
                </Table.Tr>
              ))}
            </Table.Tbody>
          </Table>
        )}
      </Card>

      <HistoryDrawer
        opened={historyDrawerOpened}
        onClose={() => setHistoryDrawerOpened(false)}
        manager={historyManager}
        loading={loadingHistory}
        data={historyData}
      />
    </Stack>
  );
};

export default DeactivatedManagersPage;