"use client";

import { useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function RandomNumberGenerator() {
  const [min, setMin] = useState("1");
  const [max, setMax] = useState("100");
  const [count, setCount] = useState("5");
  const [numbers, setNumbers] = useState<number[]>([]);

  const valid = useMemo(() => {
    const a = Number(min);
    const b = Number(max);
    const c = Number(count);
    return Number.isFinite(a) && Number.isFinite(b) && b >= a && c > 0 && c <= 100;
  }, [min, max, count]);

  const generate = () => {
    if (!valid) return;
    const a = Math.ceil(Number(min));
    const b = Math.floor(Number(max));
    const c = Math.floor(Number(count));
    const range = b - a + 1;
    const bytes = new Uint32Array(c);
    crypto.getRandomValues(bytes);
    setNumbers(Array.from(bytes, (value) => a + (value % range)));
  };

  return (
    <div className="space-y-5">
      <div className="grid gap-4 sm:grid-cols-3">
        <Field label="Minimum" value={min} onChange={setMin} />
        <Field label="Maximum" value={max} onChange={setMax} />
        <Field label="Anzahl" value={count} onChange={setCount} />
      </div>

      {!valid && <p className="text-sm text-red-500">Bitte gültige Werte eingeben. Anzahl maximal 100.</p>}

      <Button onClick={generate} disabled={!valid}>
        Zufallszahlen erzeugen
      </Button>

      <div className="rounded-lg border bg-gray-50 p-4">
        <p className="text-sm font-medium text-gray-600">Ergebnis</p>
        <p className="mt-3 min-h-[48px] break-words font-mono text-lg font-semibold text-blue-700">
          {numbers.length ? numbers.join(", ") : "Noch kein Ergebnis."}
        </p>
      </div>
    </div>
  );
}

function Field({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
  return (
    <div className="space-y-2">
      <Label>{label}</Label>
      <Input inputMode="numeric" value={value} onChange={(event) => onChange(event.target.value)} />
    </div>
  );
}