"use client";

import type { DashboardUserRole } from "@/components/dashboard/users/users-types";
import { DASHBOARD_USER_ROLE_VALUES } from "@/components/dashboard/users/users-types";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useTranslations } from "next-intl";
import { useState } from "react";

interface UserRoleDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  currentRole: DashboardUserRole | null;
  onConfirmRole: (role: DashboardUserRole) => void;
}

export function UserRoleDialog({
  open,
  onOpenChange,
  currentRole,
  onConfirmRole,
}: UserRoleDialogProps) {
  const t = useTranslations("dashboard.users.dialogs.role");
  const tRoles = useTranslations("dashboard.users.table.roles");
  const [role, setRole] = useState<DashboardUserRole>(currentRole || "viewer");

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="max-w-[620px] gap-0 rounded-2xl border border-border bg-card p-8"
        showCloseButton={false}
      >
        <div className="space-y-6">
          <div className="space-y-3 text-center">
            <DialogTitle className="text-[32px] font-bold leading-tight text-foreground">
              {t("title")}
            </DialogTitle>
            <DialogDescription className="text-base leading-7 text-muted-foreground">
              {t("description")}
            </DialogDescription>
          </div>

          <div className="space-y-2">
            <p className="text-sm font-medium text-foreground">{t("fields.role")}</p>
            <Select value={role} onValueChange={(value) => setRole(value as DashboardUserRole)}>
              <SelectTrigger className="h-12 rounded-xl">
                <SelectValue placeholder={t("placeholders.role")} />
              </SelectTrigger>
              <SelectContent>
                {DASHBOARD_USER_ROLE_VALUES.map((option) => (
                  <SelectItem key={option} value={option}>
                    {tRoles(option)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex w-full items-center justify-center gap-3">
            <Button
              type="button"
              variant="outline"
              className="h-12 min-w-[160px] rounded-xl border-border text-foreground"
              onClick={() => onOpenChange(false)}
            >
              {t("actions.cancel")}
            </Button>
            <Button
              type="button"
              className="h-12 min-w-[160px] rounded-xl"
              onClick={() => onConfirmRole(role)}
            >
              {t("actions.save")}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}