"use client";

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { UserX } from "lucide-react";
import { toast } from "sonner";
import { EmptyState, ErrorState, TableSkeleton } from "@/components/shared/states";
import { StoreUserRoleBadge, StoreUserStatusBadge } from "@/components/shared/store-badges";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useI18n, useT } from "@/i18n";
import { useCan } from "@/features/auth/use-can";
import { formatDateTime } from "@/lib/format";
import { friendlyErrorMessage } from "@/lib/errors";
import { queryKeys } from "@/lib/query-keys";
import { getStoreClientUsers, setStoreUserActive } from "@/services/store-clients";
import type { StoreClient } from "@/types/store";

/**
 * The people who can sign in to this store's portal.
 *
 * Worth checking right after an approval: **"approved store, nobody can sign in"** is the
 * onboarding failure that looks like nothing at all from our side, so the empty state here says
 * so rather than shrugging.
 *
 * Turning somebody off is normally the shop's own job. We step in for the two cases it cannot
 * cover: the owner *is* the person who left, or the shop has been asked and has not acted.
 */
export function StorePeople({ store }: { store: StoreClient }) {
  const t = useT();
  const { locale } = useI18n();
  const { can } = useCan();
  const queryClient = useQueryClient();

  const filters = { page: 1, rows: 25 };

  const { data, isLoading, isError, error, refetch } = useQuery({
    queryKey: queryKeys.storeClients.users(store.uuid, filters),
    queryFn: () => getStoreClientUsers(store.uuid, filters),
  });

  const toggle = useMutation({
    mutationFn: ({ uuid, isActive }: { uuid: string; isActive: boolean }) =>
      setStoreUserActive(store.uuid, uuid, isActive),
    onSuccess: () => {
      toast.success(t("stores.userUpdated"));
      void queryClient.invalidateQueries({
        queryKey: queryKeys.storeClients.users(store.uuid, filters),
      });
    },
    onError: (err) => toast.error(friendlyErrorMessage(err, t)),
  });

  const people = data?.Model ?? [];
  const canManage = can("store_clients.manage");

  return (
    <Card>
      <div className="border-b p-4">
        <h3 className="text-sm font-semibold text-foreground">{t("stores.people")}</h3>
        <p className="mt-1 text-xs text-muted-foreground">{t("stores.peopleHint")}</p>
      </div>

      {isLoading ? (
        <TableSkeleton rows={4} cols={5} />
      ) : isError ? (
        <ErrorState message={friendlyErrorMessage(error, t)} onRetry={() => refetch()} />
      ) : people.length === 0 ? (
        <EmptyState
          title={t("stores.noUsers")}
          description={t("stores.noUsersHint")}
          icon={UserX}
        />
      ) : (
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>{t("stores.personName")}</TableHead>
                <TableHead>{t("stores.personRole")}</TableHead>
                <TableHead>{t("common.status")}</TableHead>
                <TableHead>{t("stores.lastLogin")}</TableHead>
                <TableHead aria-label={t("common.actions")} />
              </TableRow>
            </TableHeader>
            <TableBody>
              {people.map((person) => (
                <TableRow key={person.uuid}>
                  <TableCell>
                    <p className="font-medium text-foreground">{person.name}</p>
                    <p className="text-xs text-muted-foreground">{person.email}</p>
                    <p className="text-xs text-muted-foreground">{person.phone}</p>
                  </TableCell>
                  <TableCell>
                    <StoreUserRoleBadge role={person.role} label={person.role_label} />
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <StoreUserStatusBadge status={person.status} label={person.status_label} />
                      {!person.is_active ? (
                        <span className="text-[0.7rem] text-muted-foreground">
                          {t("common.disabled")}
                        </span>
                      ) : null}
                    </div>
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">
                    {person.last_login_at
                      ? formatDateTime(person.last_login_at, locale)
                      : t("stores.neverSignedIn")}
                  </TableCell>
                  <TableCell>
                    {canManage ? (
                      <Button
                        size="sm"
                        variant="ghost"
                        disabled={toggle.isPending}
                        onClick={() =>
                          toggle.mutate({ uuid: person.uuid, isActive: !person.is_active })
                        }
                      >
                        {person.is_active ? t("stores.disableUser") : t("stores.enableUser")}
                      </Button>
                    ) : null}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </Card>
  );
}