"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@radix-ui/react-dropdown-menu";
import React, { useState } from "react";

const GenerateKeychip = () => {
  const [serial, setSerial] = useState("");

  const generateRandomSerial = () => {
    let uniqueNumbers = "";
    while (uniqueNumbers.length < 4) {
      const digit = Math.floor(Math.random() * 10);
      if (!uniqueNumbers.includes(digit.toString())) {
        uniqueNumbers += digit;
      }
    }
    const randomNumbers = Math.floor(1000 + Math.random() * 9000);
    const randomSerial = `A69E01A${uniqueNumbers}${randomNumbers}`;
    setSerial(randomSerial);
  };

  return (
    <Card x-chunk="aimecard">
      <CardHeader>
        <CardTitle className="text-2xl">Create Keychip</CardTitle>
      </CardHeader>

      <CardContent>
        <div className="mb-4 text-lg">Current Access Code:</div>
        <form className="grid gap-4">
          <div className="grid gap-2">
            <Label>Arcade Name</Label>
            <Input name="arcadeName" type="text" placeholder="Arcade Name" />
          </div>
          <div className="grid gap-2">
            <Label>Arcade Nickname</Label>
            <Input
              name="arcadeNickname"
              type="text"
              placeholder="Arcade Nickname"
            />
          </div>

          <div className="grid gap-2">
            <Label>Generate Serial</Label>
            <Input
              name="GenerateSerial"
              type="text"
              placeholder="*******************"
              value={serial} // Bind the serial state to the input field
              readOnly
            />
          </div>
          <Button
            type="button"
            className="w-full"
            onClick={generateRandomSerial}
          >
            Generate Random Keychip
          </Button>

          <Button type="submit" className="w-full">
            Finalize Keychip
          </Button>
        </form>
      </CardContent>
    </Card>
  );
};

export default GenerateKeychip;