import React, { useState } from "react";
import { Tabs } from "@mantine/core";
import { redirect, useLoaderData, type LoaderFunctionArgs } from "react-router";
import { checkAccess, getFirstAccessibleRoute } from "@/lib/role-helpers";
import { IconArrowsRightLeft, IconGift } from "@tabler/icons-react";
import { ManagerAdminTab } from "./components/ManagerAdminTab";
import { MyPointsTab } from "./components/MyPointsTab";

export async function loader({ request }: LoaderFunctionArgs) {
  const canViewManagerAdmin = checkAccess(request, "read", "points-transfer");
  const canViewMyPoints = checkAccess(request, "read", "my-points");

  if (!canViewManagerAdmin && !canViewMyPoints) {
    const fallback = getFirstAccessibleRoute(request);
    if (fallback && fallback !== "/admin/points-transfer") {
      return redirect(fallback);
    }
  }
  return { canViewManagerAdmin, canViewMyPoints };
}

export default function PointsTransferContainer() {
  const loaderData = useLoaderData<typeof loader>();
  const { canViewManagerAdmin, canViewMyPoints } = loaderData;

  const defaultTab = canViewManagerAdmin ? "manager-admin" : "my-points";
  const [activeTab, setActiveTab] = useState<string | null>(defaultTab);

  return (
    <Tabs value={activeTab} onChange={setActiveTab} keepMounted={false}>
      <Tabs.List mb="md" style={{ flexWrap: "nowrap", overflowX: "auto", overflowY: "hidden" }}>
        {canViewManagerAdmin && (
          <Tabs.Tab
            value="manager-admin"
            leftSection={<IconArrowsRightLeft size={16} />}
            style={{ whiteSpace: "nowrap" }}
          >
            Manager Administration
          </Tabs.Tab>
        )}
        {canViewMyPoints && (
          <Tabs.Tab
            value="my-points"
            leftSection={<IconGift size={16} />}
            style={{ whiteSpace: "nowrap" }}
          >
            My Points
          </Tabs.Tab>
        )}
      </Tabs.List>

      {canViewManagerAdmin && (
        <Tabs.Panel value="manager-admin">
          <ManagerAdminTab />
        </Tabs.Panel>
      )}

      {canViewMyPoints && (
        <Tabs.Panel value="my-points">
          <MyPointsTab />
        </Tabs.Panel>
      )}
    </Tabs>
  );
}