import {
  Button,
  ScrollArea,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Awaiting,
  SettingsInfoSkeleton,
  SettingsDialogProps,
  SettingsDialog,
} from "@marzneshin/components";
import {
  UserServicesTable,
  useUserUsageResetCmd,
  type UserType,
} from "@marzneshin/features/users";
import { type FC } from "react";
import { useTranslation } from "react-i18next";
import {
  UserStatusEnableButton,
  SubscriptionActions,
  QRCodeSection,
  UserInfoTable,
} from "./user-info";

interface UsersSettingsDialogProps extends SettingsDialogProps {
  entity: UserType | null;
  onClose: () => void;
  isPending: boolean;
}

export const UsersSettingsDialog: FC<UsersSettingsDialogProps> = ({
  onOpenChange,
  open,
  entity,
  onClose,
  isPending,
}) => {
  const { t } = useTranslation();
  const { mutate: resetUsage } = useUserUsageResetCmd();

  return (
    <SettingsDialog open={open} onClose={onClose} onOpenChange={onOpenChange}>
      <Awaiting
        Component={
          entity ? (
            <ScrollArea className="flex flex-col gap-4 h-full">
              <Tabs defaultValue="info" className="w-full h-full">
                <TabsList className="w-full bg-accent">
                  <TabsTrigger className="w-full" value="info">
                    {t("user_info")}
                  </TabsTrigger>
                  <TabsTrigger className="w-full" value="services">
                    {t("services")}
                  </TabsTrigger>
                  <TabsTrigger className="w-full" value="subscription">
                    {t("subscription")}
                  </TabsTrigger>
                </TabsList>
                <TabsContent
                  value="info"
                  className="flex flex-col gap-2 w-full h-full"
                >
                  <UserInfoTable user={entity} />
                  <div className="hstack justify-center items-center gap-2">
                    <Button
                      className="w-1/2"
                      onClick={() => resetUsage(entity)}
                    >
                      {t("page.users.reset_usage")}
                    </Button>
                    <UserStatusEnableButton user={entity} />
                  </div>
                </TabsContent>
                <TabsContent value="services">
                  <UserServicesTable user={entity} />
                </TabsContent>
                <TabsContent value="subscription">
                  <QRCodeSection entity={entity} />
                  <SubscriptionActions entity={entity} />
                </TabsContent>
              </Tabs>
            </ScrollArea>
          ) : (
            <div>Not Found</div>
          )
        }
        Skeleton={<SettingsInfoSkeleton />}
        isFetching={isPending}
      />
    </SettingsDialog>
  );
};