"use client";

import { MedReportLogo } from "@/components/med-report-title";
import React from "react";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import { companySchema } from "@/lib/validations/companySchema";
import { CompanySubmitData } from "@/lib/types/company";
import { submitCompanyRegistration } from "@/lib/services/register-company.service";
import { useRouter } from "next/navigation";
import { Label } from "@kit/ui/label";
import { Input } from "@kit/ui/input";
import { SubmitButton } from "@/components/ui/submit-button";
import { FormItem } from "@kit/ui/form";
import { Trans } from "@kit/ui/trans";

export default function RegisterCompany() {
  const router = useRouter();
  const {
    register,
    handleSubmit,
    formState: { errors, isValid, isSubmitting },
  } = useForm({
    resolver: yupResolver(companySchema),
    mode: "onChange",
  });

  async function onSubmit(data: CompanySubmitData) {
    const formData = new FormData();
    Object.entries(data).forEach(([key, value]) => {
      if (value !== undefined) formData.append(key, value);
    });

    try {
      await submitCompanyRegistration(formData);
      router.push("/register-company/success");
    } catch (err: unknown) {
      if (err instanceof Error) {
        alert("Server validation error: " + err.message);
      }
      alert("Server validation error");
    }
  }

  return (
    <div className="flex flex-row border rounded-3xl border-border max-w-5xl  overflow-hidden">
      <div className="flex flex-col text-center py-14 px-12 w-1/2">
        <MedReportLogo />
        <h1 className="pt-8">Ettevõtte andmed</h1>
        <p className="pt-2 text-muted-foreground text-sm">
          Pakkumise saamiseks palun sisesta ettevõtte andmed millega MedReport
          kasutada kavatsed.
        </p>
        <form
          onSubmit={handleSubmit(onSubmit)}
          noValidate
          className="flex gap-6 flex-col text-left pt-8 px-6"
        >
          <FormItem>
            <Label>Ettevõtte nimi</Label>
            <Input {...register("companyName")} />
          </FormItem>
          <FormItem>
            <Label>Kontaktisik</Label>
            <Input {...register("contactPerson")} />
          </FormItem>
          <FormItem>
            <Label>E-mail</Label>
            <Input type="email" {...register("email")}></Input>
          </FormItem>
          <FormItem>
            <Label>Telefon</Label>
            <Input type="tel" {...register("phone")} />
          </FormItem>
          <SubmitButton
            disabled={!isValid || isSubmitting}
            pendingText="Saatmine..."
            type="submit"
            formAction={submitCompanyRegistration}
          >
            <Trans i18nKey={'account:requestCompanyAccount'} />
          </SubmitButton>
        </form>
      </div>
      <div className="w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat">
      </div>
    </div>
  );
}