Epicnabbo-Catalogus-Updated-Daily/src/app/admin/users/_components/create-user-dialog.tsx

'use client'

import { Loader2, UserPlus } from 'lucide-react'
import { useState } from 'react'
import { toast } from 'sonner'
import { createUser } from '@/actions/users'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useServerAction } from '@/hooks/use-server-action'

interface CreateUserDialogProps {
  sessionRank: number
}

const RANK_OPTIONS: { value: number; label: string }[] = [
  { value: 1, label: 'User (1)' },
  { value: 2, label: 'Bronze (2)' },
  { value: 3, label: 'Silver (3)' },
  { value: 4, label: 'Gold (4)' },
  { value: 5, label: 'Moderator (5)' },
  { value: 6, label: 'Admin (6)' },
  { value: 7, label: 'Super Admin (7)' },
]

export function CreateUserDialog({ sessionRank }: CreateUserDialogProps) {
  const { run, isPending } = useServerAction()
  const [open, setOpen] = useState(false)
  const [username, setUsername] = useState('')
  const [mail, setMail] = useState('')
  const [password, setPassword] = useState('')
  const [rank, setRank] = useState('1')
  const [motto, setMotto] = useState('')

  const allowedRanks = RANK_OPTIONS.filter((r) => (sessionRank >= 7 ? true : r.value < sessionRank))

  function reset() {
    setUsername('')
    setMail('')
    setPassword('')
    setRank('1')
    setMotto('')
  }

  function generatePassword() {
    const charset = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ23456789'
    let out = ''
    const buf = new Uint32Array(12)
    crypto.getRandomValues(buf)
    for (let i = 0; i < buf.length; i++) out += charset[buf[i] % charset.length]
    setPassword(out)
    toast.message('Password generated', { description: out })
  }

  function handleCreate() {
    const u = username.trim()
    const m = mail.trim()
    if (!u || !m || !password) {
      toast.error('Username, email and password are required')
      return
    }
    if (u.length < 3 || u.length > 20 || !/^[a-zA-Z0-9_-]+$/.test(u)) {
      toast.error('Invalid username (3-20 chars, letters/digits/_/-)')
      return
    }
    if (password.length < 6) {
      toast.error('Password must be at least 6 characters')
      return
    }

    run(
      () =>
        createUser({
          username: u,
          mail: m,
          password,
          rank: Number(rank),
          motto: motto.trim(),
        }),
      {
        successMessage: `User "${u}" created.`,
        onSuccess: () => {
          setOpen(false)
          reset()
        },
      },
    )
  }

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        setOpen(next)
        if (!next) reset()
      }}
    >
      <DialogTrigger asChild>
        <Button>
          <UserPlus className="mr-2 h-4 w-4" />
          New User
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create User</DialogTitle>
          <DialogDescription>
            Account is created immediately with default look and 5,000 credits/duckets/diamonds.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="cu-username">Username</Label>
            <Input
              id="cu-username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="HabboName"
              autoComplete="off"
              maxLength={20}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="cu-mail">Email</Label>
            <Input
              id="cu-mail"
              type="email"
              value={mail}
              onChange={(e) => setMail(e.target.value)}
              placeholder="[email protected]"
              autoComplete="off"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="cu-password">Password</Label>
            <div className="flex gap-2">
              <Input
                id="cu-password"
                type="text"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Minimum 6 characters"
                autoComplete="new-password"
                className="font-mono"
              />
              <Button type="button" variant="outline" onClick={generatePassword}>
                Generate
              </Button>
            </div>
          </div>
          <div className="space-y-2">
            <Label>Rank</Label>
            <Select value={rank} onValueChange={setRank}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {allowedRanks.map((r) => (
                  <SelectItem key={r.value} value={String(r.value)}>
                    {r.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="cu-motto">Motto (optional)</Label>
            <Input
              id="cu-motto"
              value={motto}
              onChange={(e) => setMotto(e.target.value)}
              maxLength={127}
              placeholder="I'm new here!"
            />
          </div>

          <Button onClick={handleCreate} disabled={isPending} className="w-full">
            {isPending ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : (
              <UserPlus className="mr-2 h-4 w-4" />
            )}
            Create User
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}