UUID Generator

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Copy, Check, RefreshCw } from "lucide-react";

function generateUUID(): string {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
        const r = (Math.random() * 16) | 0;
        const v = c === "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
    });
}

export default function UuidGenerator() {
    const [count, setCount] = useState(5);
    const [uuids, setUuids] = useState<string[]>(() =>
        Array.from({ length: 5 }, generateUUID)
    );
    const [copied, setCopied] = useState(-1);
    const [copiedAll, setCopiedAll] = useState(false);

    const regenerate = () => {
        setUuids(Array.from({ length: count }, generateUUID));
    };

    const copyOne = async (uuid: string, idx: number) => {
        await navigator.clipboard.writeText(uuid);
        setCopied(idx);
        setTimeout(() => setCopied(-1), 1500);
    };

    const copyAll = async () => {
        await navigator.clipboard.writeText(uuids.join("\n"));
        setCopiedAll(true);
        setTimeout(() => setCopiedAll(false), 1500);
    };

    return (
        <div className="space-y-4">
            <div className="flex flex-wrap items-center gap-3">
                <span className="text-sm text-muted-foreground">Generate</span>
                <Input
                    type="number"
                    min={1}
                    max={50}
                    value={count}
                    onChange={(e) => setCount(Number(e.target.value) || 1)}
                    className="w-20"
                />
                <span className="text-sm text-muted-foreground">UUIDs</span>
                <Button onClick={regenerate}>
                    <RefreshCw className="mr-2 h-4 w-4" />
                    Generate
                </Button>
                <Button variant="outline" onClick={copyAll}>
                    {copiedAll ? (
                        <Check className="mr-2 h-4 w-4" />
                    ) : (
                        <Copy className="mr-2 h-4 w-4" />
                    )}
                    Copy All
                </Button>
            </div>
            <div className="space-y-1">
                {uuids.map((uuid, i) => (
                    <div
                        key={i}
                        className="flex items-center justify-between rounded-lg border px-3 py-2 hover:bg-muted/50 transition-colors"
                    >
                        <code className="text-sm font-mono">{uuid}</code>
                        <Button
                            variant="ghost"
                            size="icon"
                            className="h-7 w-7 shrink-0"
                            onClick={() => copyOne(uuid, i)}
                        >
                            {copied === i ? (
                                <Check className="h-3.5 w-3.5" />
                            ) : (
                                <Copy className="h-3.5 w-3.5" />
                            )}
                        </Button>
                    </div>
                ))}
            </div>
        </div>
    );
}