"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  ArrowRight,
  Shuffle,
  RefreshCcw,
  Copy,
  LogIn,
  UserPlus,
} from "lucide-react";
import { toast } from "@/hooks/use-toast";
import Link from "next/link";
import "./styles/background-pattern.css";
import Image from "next/image";
import notmeLogo from "./notme.png";

const avatars = [
  "/avatar1.png",
  "/avatar2.png",
  "/avatar3.png",
  "/avatar4.png",
  "/avatar5.png",
];

export default function HomePage() {
  const [username, setUsername] = useState("");
  const [avatarIndex, setAvatarIndex] = useState(0);
  const [isUsernameValid, setIsUsernameValid] = useState(false);

  const generateRandomUsername = () => {
    const adjectives = ["Cool", "Super", "Mega", "Ultra", "Hyper"];
    const nouns = ["Gamer", "Player", "Hero", "Champion", "Warrior"];
    const randomAdjective =
      adjectives[Math.floor(Math.random() * adjectives.length)];
    const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
    const randomNumber = Math.floor(Math.random() * 1000);
    const newUsername = `${randomAdjective}${randomNoun}${randomNumber}`;
    setUsername(newUsername);
    setIsUsernameValid(true);
  };

  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newUsername = e.target.value;
    setUsername(newUsername);
    setIsUsernameValid(newUsername.trim().length > 0);
  };

  const changeAvatar = () => {
    setAvatarIndex((prevIndex) => (prevIndex + 1) % avatars.length);
  };

  const copyInviteLink = () => {
    navigator.clipboard.writeText("https://yourgame.com/invite/123456");
    toast({
      title: "Invitation link copied!",
      description: "The invitation link has been copied to your clipboard.",
    });
  };

  return (
    <div className="min-h-screen relative overflow-hidden">
      <div className="background-pattern" />
      <div className="background-overlay" />
      <div className="background-vignette" />

      <div className="relative z-10">
        <div className="absolute top-4 left-4 space-x-2">
          <Button
            variant="secondary"
            size="sm"
            className="bg-white text-orange-600 hover:bg-orange-100"
          >
            <UserPlus className="mr-2 h-4 w-4" />
            Sign Up
          </Button>
          <Button
            variant="secondary"
            size="sm"
            className="bg-white text-orange-600 hover:bg-orange-100"
          >
            <LogIn className="mr-2 h-4 w-4" />
            Login
          </Button>
        </div>
        <div className="flex items-center justify-center min-h-screen p-4">
          <div className="bg-white bg-opacity-90 backdrop-blur-sm rounded-lg shadow-xl w-full max-w-md p-8 space-y-4">
            <div className="flex flex-col items-center space-y-2">
              <Image
                src={notmeLogo}
                alt="NotMe Logo"
                width={200}
                height={200}
                priority
                className="w-48 h-48"
              />
            </div>

            <div className="flex flex-col items-center space-y-6">
              <Avatar className="w-40 h-40 border-4 border-orange-400">
                <AvatarImage src={avatars[avatarIndex]} alt="Avatar" />
                <AvatarFallback>AV</AvatarFallback>
              </Avatar>
              <Button
                onClick={changeAvatar}
                variant="outline"
                className="border-orange-400 text-orange-600 hover:bg-orange-100"
              >
                <RefreshCcw className="mr-2 h-5 w-5" />
                Change Avatar
              </Button>
            </div>

            <div className="space-y-4">
              <label
                htmlFor="username"
                className="text-lg font-grobold font-normal text-orange-600"
              >
                Choose your username
              </label>
              <div className="flex space-x-2">
                <Input
                  id="username"
                  value={username}
                  onChange={handleUsernameChange}
                  placeholder="Enter your username"
                  className="flex-grow bg-orange-50 text-orange-800 placeholder-orange-300 border-orange-200 focus:border-orange-400 focus:ring-orange-400"
                />
                <Button
                  onClick={generateRandomUsername}
                  variant="outline"
                  className="border-orange-400 text-orange-600 hover:bg-orange-100"
                >
                  <Shuffle className="h-5 w-5" />
                </Button>
              </div>
            </div>

            <div className="flex flex-col space-y-4">
              <Link href="/create-group" className="flex-grow">
                <Button
                  className={`w-full bg-orange-500 hover:bg-orange-600 text-white text-lg py-6 font-grobold font-normal ${
                    !isUsernameValid ? "opacity-50 cursor-not-allowed" : ""
                  }`}
                  disabled={!isUsernameValid}
                >
                  Create Game
                  <ArrowRight className="ml-2 h-6 w-6" />
                </Button>
              </Link>
              <Link href="/join" className="flex-grow">
                <Button className="w-full bg-green-600 hover:bg-green-700 text-white text-lg py-6 font-grobold font-normal">
                  Join Game
                  <ArrowRight className="ml-2 h-6 w-6" />
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}