"use client";

import { useEffect, useState } from "react";
import { Loader2 } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useT } from "@/shared/i18n/client";
import { displayName } from "@/shared/lib/user-display";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { Button } from "@/presentation/components/ui/button";
import { Badge } from "@/presentation/components/ui/badge";
import { Switch } from "@/presentation/components/ui/switch";
import { Skeleton } from "@/presentation/components/ui/skeleton";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/presentation/components/ui/dialog";
import type { InternalUser } from "@/domain/entities/internal-user";

interface UserPermissionsDialogProps {
  /** null = closed. */
  user: InternalUser | null;
  onOpenChange: (open: boolean) => void;
}

export default function UserPermissionsDialog({ user, onOpenChange }: UserPermissionsDialogProps) {
  const t = useT();
  const container = useRepositories();

  // Retain the last user so the title/role survive the close animation.
  const [displayUser, setDisplayUser] = useState<InternalUser | null>(null);
  useEffect(() => {
    if (user) setDisplayUser(user);
  }, [user]);

  const { data: matrix, loading } = useApiQuery(
    () => container.internalUserRepository.getPermissions(user!.id),
    { enabled: !!user, deps: [user?.id] }
  );

  // Local toggle state (code -> effective), seeded from the fetched matrix.
  const [states, setStates] = useState<Record<string, boolean>>({});
  useEffect(() => {
    if (!matrix) return;
    const next: Record<string, boolean> = {};
    for (const p of matrix.permissions) next[p.code] = p.effective;
    setStates(next);
  }, [matrix]);

  const saveMutation = useApiMutation(
    ({ id, permissions }: { id: number; permissions: Record<string, boolean> }) =>
      container.internalUserRepository.savePermissions(id, permissions),
    {
      successMessage: t.internalUsers.toasts.permissionsSaved,
      onSuccess: () => onOpenChange(false),
    }
  );

  const handleSave = () => {
    if (!user) return;
    saveMutation.mutate({ id: user.id, permissions: states });
  };

  const roleName = matrix?.role.name ?? displayUser?.role_label ?? "";

  return (
    <Dialog open={!!user} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>
            {t.internalUsers.permissionsDialog.title(
              displayUser
                ? displayName({ name: displayUser.full_name, email: displayUser.email })
                : ""
            )}
          </DialogTitle>
          <DialogDescription>
            {t.internalUsers.permissionsDialog.baseRole(roleName)}
          </DialogDescription>
        </DialogHeader>

        <div className="-mr-1 max-h-[55vh] space-y-2 overflow-y-auto pr-1">
          {loading
            ? Array.from({ length: 6 }).map((_, i) => (
                <Skeleton key={i} className="h-[58px] w-full rounded-lg" />
              ))
            : matrix?.permissions.map((perm) => {
                const label = t.internalUsers.permissionLabels[perm.code] ?? perm.code;
                const checked = states[perm.code] ?? perm.effective;
                const modified = checked !== perm.from_role;
                return (
                  <div
                    key={perm.code}
                    className="flex items-center justify-between gap-3 rounded-lg border border-border px-4 py-3"
                  >
                    <div className="min-w-0">
                      <div className="flex items-center gap-2">
                        <p className="text-sm font-medium text-foreground">{label}</p>
                        {modified && (
                          <Badge
                            variant="outline"
                            className="h-4 px-1.5 text-[10px] font-medium text-amber-700 border-amber-200 bg-amber-50 dark:bg-amber-950/40 dark:text-amber-400"
                          >
                            {t.internalUsers.permissionsDialog.modified}
                          </Badge>
                        )}
                      </div>
                      <p className="font-mono text-xs text-muted-foreground">{perm.code}</p>
                    </div>
                    <Switch
                      checked={checked}
                      onCheckedChange={(v) => setStates((prev) => ({ ...prev, [perm.code]: v }))}
                    />
                  </div>
                );
              })}
        </div>

        <DialogFooter>
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
            {t.common.cancel}
          </Button>
          <Button type="button" onClick={handleSave} disabled={saveMutation.loading || loading}>
            {saveMutation.loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
            {t.common.save}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}