import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@repo/shadcn-ui/components/button";
import { FormActions } from "@repo/shadcn-ui/components/form-dialog";
import { Input } from "@repo/shadcn-ui/components/input";
import { Label } from "@repo/shadcn-ui/components/label";
import { Textarea } from "@repo/shadcn-ui/components/textarea";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useId } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";

import type { SiteDTO, SiteRequestDTO } from "../../common";
import { SiteRequestSchema } from "../../common";
import { EntityHelp } from "../access/entity-help";
import { companyApi, companyKeys } from "../api/company-api";

import { CompanyFeedback } from "./company-feedback";

export function SiteForm({
  site,
  companyId,
  csrfToken,
  onSaved,
  showTitle = true,
}: {
  site?: SiteDTO;
  companyId: string;
  csrfToken: string;
  onSaved?: (id: string) => void;
  showTitle?: boolean;
}) {
  const { t } = useTranslation("companies");
  const id = useId();
  const client = useQueryClient();
  const form = useForm<SiteRequestDTO>({
    resolver: zodResolver(SiteRequestSchema),
    defaultValues: { name: site?.name ?? "", address: site?.address ?? "" },
  });
  const mutation = useMutation({
    mutationFn: (values: SiteRequestDTO) =>
      companyApi.site(
        companyId,
        site?.id,
        { ...values, address: values.address?.trim() ? values.address : null },
        csrfToken
      ),
    onSuccess: (response) => {
      client.setQueryData(companyKeys.detail(companyId), response);
      if (!site) {
        form.reset();
      }
      const saved = site
        ? response.company.sites.find((item) => item.id === site.id)
        : response.company.sites.at(-1);
      if (saved) {
        onSaved?.(saved.id);
      }
    },
  });
  return (
    <form className="space-y-4" onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
      {showTitle && <h3 className="text-lg font-semibold">{t(site ? "editSite" : "newSite")}</h3>}
      <div className="space-y-2">
        <Label htmlFor={`${id}-name`}>{t("name")}</Label>
        <Input id={`${id}-name`} maxLength={100} required {...form.register("name")} />
      </div>
      <div className="space-y-2">
        <Label htmlFor={`${id}-address`}>{t("addressOptional")}</Label>
        <Textarea
          className="min-h-40"
          id={`${id}-address`}
          maxLength={10000}
          rows={6}
          {...form.register("address")}
        />
        <p className="text-xs text-muted-foreground">{t("addressHelp")}</p>
      </div>
      <CompanyFeedback
        error={mutation.error}
        invalid={Object.keys(form.formState.errors).length > 0}
        success={mutation.isSuccess}
      />

      <EntityHelp kind="site" />
      <FormActions>
        <Button disabled={mutation.isPending} type="submit">
          {t(mutation.isPending ? "saving" : "save")}
        </Button>
      </FormActions>
    </form>
  );
}