"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { InputWrapper } from "@/components/ui/input_wrapper";
import Section from "@/components/ui/section";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Spinner } from "@/components/ui/spinner";
import { getRandomThirdPartyCount, getRandomUsername } from "@/lib/utils";
import { useState } from "react";

export default function Apply() {
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");
  const [email2, setEmail2] = useState("");
  const [email3, setEmail3] = useState("");
  const [hours, setHours] = useState("");
  const [experience, setExperience] = useState("");
  const [graduationYear, setGraduationYear] = useState("");
  const [digitOfPi, setDigitOfPi] = useState("");
  const [submitSpinner, setSubmitSpinner] = useState(false);

  const isValidPassword = password.length >= 8

  return (
    <div className="flex flex-col items-center min-h-screen gap-6 mt-8 mb-8">
      <h1 className="text-3xl mb-3">Apply to The Last Tech Job</h1>

      <form className="flex flex-col gap-10">

        <Section>
          <div>
          <p className="text-lg">Enter your personal details</p>
          <p className="text-md text-gray-700">All fields are required. All details will be shared with our {getRandomThirdPartyCount()} third parties.</p>
          </div>

          <InputWrapper name="Name">
            <Input type="text" placeholder="First Name" />
            <Input type="text" placeholder="Last Name" />
          </InputWrapper>

          <InputWrapper name="Email">
            <Input
              type="email"
              placeholder="Email Address"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </InputWrapper>

          <InputWrapper
            name="Confirm Email"
            error={email !== email2 ? "Emails do not match" : ""}
          >
            <Input
              type="email"
              placeholder="Email Address"
              value={email2}
              onChange={(e) => setEmail2(e.target.value)}
            />
          </InputWrapper>

          {email === email2 && email !== "" ? (
          <InputWrapper
            name="Are you 100% sure that's your email?"
            error={email !== email2 || email !== email3 ? "Emails do not match" : ""}
          >
            <Input
              type="email"
              placeholder="Email Address"
              value={email3}
              onChange={(e) => setEmail3(e.target.value)}
            />
          </InputWrapper>
          ) : null}

          <InputWrapper name="Phone Number">
            <Input type="tel" placeholder="Phone Number" />
          </InputWrapper>

          <InputWrapper
            name="Password"
            error={isValidPassword ? "Password already taken by " + getRandomUsername() : ""}>
            <Input
              type="password"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </InputWrapper>

          <InputWrapper name="Bank Details">
            <Input type="text" placeholder="Card Number" />
            <Input type="text" placeholder="Expiration Date" />
            <Input type="text" placeholder="CVV" />
          </InputWrapper>

          <InputWrapper name="Discord Username">
            <Input type="text" placeholder="Username" />
          </InputWrapper>

          <InputWrapper name="Home Address">
            <Input type="text" placeholder="Address" />
          </InputWrapper>

          <InputWrapper name="Date of Birth">
            <Input type="date" placeholder="Date of Birth" />
          </InputWrapper>

          <InputWrapper name="Pet Names">
            <Input type="textarea" placeholder="Sheldon, Casper, Benny, ..." />
          </InputWrapper>

          <InputWrapper name="Favorite Color">
            <Input type="color" placeholder="Favorite Color" />
          </InputWrapper>

          <InputWrapper name="Who did you vote for in the previous election?">
            <Select>
              <SelectTrigger className="w-full max-w-48 override">
                <SelectValue placeholder="Select a party" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Party Name</SelectLabel>
                  <SelectItem value="capitalists">Filthy Capitalists</SelectItem>
                  <SelectItem value="communists">Dirty Communists</SelectItem>
                  <SelectItem value="centrists">Boring Centrists</SelectItem>
                  <SelectItem value="greens">Tree Huggers</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </InputWrapper>

          <InputWrapper
            name="How many hours do you have in Counter Strike and League of Legends?"
            error={Number(hours) < 1 ? "" : "Must be less than 1"}
          >
            <Input
              type="text"
              placeholder="No. of hours"
              value={hours}
              onChange={(e) => setHours(e.target.value)} 
            />
          </InputWrapper>
        </Section>


        <Section>
          <p className="text-lg">Education and Work history</p>
          <p className="text-md">All fields are required. Answer with honesty, we already know everything :)</p>
          
          <InputWrapper name="University/College" description="Only acceptable universities are selectable">
            <div>
              <input id="cambridge" name="university" type="radio" value="Cambridge" />
              <label htmlFor="cambridge"> Cambridge </label>
            </div>

            <div>
              <input id="oxford" name="university" type="radio" value="Oxford" />
              <label htmlFor="oxford"> Oxford </label>
            </div>

            <div>
              <input id="tau" name="university" type="radio" value="TAU" />
              <label htmlFor="tau"> Tel Aviv University</label>
            </div>
          </InputWrapper> 

          <InputWrapper
            name="How many years of experience do you have?"
            error={Number(experience) >= 30 || experience == "" ? "" : "Must be at least 30 years"}
          >
            <Input
              type="number"
              placeholder="Years of experience"
              value={experience}
              onChange={(e) => setExperience(e.target.value)} 
            />
          </InputWrapper>

          <InputWrapper
            name="What year did you graduate?"
            error={Number(graduationYear) < 2025 && graduationYear != "" ? "Must have graduated within the last 12 months." : ""}
          >
            <Input
              type="number"
              placeholder="Year of graduation"
              value={graduationYear}
              onChange={(e) => setGraduationYear(e.target.value)}
            />
          </InputWrapper>
        </Section>

        <Section>
          <p className="text-lg">Additional Questions</p>

          {/* <InputWrapper
            name="As an Evil.AI employee, what is the first country you will visit?"
            error="Must pick another country."
          >
            <Input type="text" placeholder="Israel"/>
          </InputWrapper> */}

          <InputWrapper
            name="What is the 16,331st digit of pi?"
            description={digitOfPi == "8" ? "Correct!" : ""}
          >
            <Input
              type="number"
              placeholder="Type your answer here"
              value={digitOfPi}
              onChange={(e) => setDigitOfPi(e.target.value)}
            />
          </InputWrapper>
        </Section>

        <Button type="submit" className="self-center text-4xl p-6">
          <a href="#submitted" onClick={() => setSubmitSpinner(true)}>Submit Application</a>
          {submitSpinner && <Spinner data-icon="inline-start" />}
        </Button>

      </form>
    </div>
  );
};