import { Button } from "@repo/shadcn-ui/components/button";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { SelectWithAction } from "@repo/shadcn-ui/components/select-with-action";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { companyApi, companyKeys } from "../api/company-api";
import { interventionApi, interventionKeys } from "../interventions/intervention-api";
import { InterventionForm } from "../interventions/intervention-form";
import { ticketApi, ticketKeys } from "../tickets/ticket-api";
import { TicketForm } from "../tickets/ticket-form";

import { CompanyEditorDialog } from "./company-editor-dialog";
import { CompanyForm } from "./company-form";
import type { DashboardNavigation } from "./dashboard-api";
import { BlockState } from "./dashboard-block";

export function DashboardQuickCreate({
  kind,
  companyId,
  csrfToken,
  onClose,
  onNavigate,
}: {
  kind: "company" | "ticket" | "intervention" | "asset" | "resource";
  companyId?: string | undefined;
  csrfToken: string;
  onClose: () => void;
  onNavigate: (destination: DashboardNavigation) => void;
}) {
  const { t } = useTranslation("companies");
  const client = useQueryClient();
  const [selectedCompany, setSelectedCompany] = useState(companyId ?? "");
  const [addingCompany, setAddingCompany] = useState(false);
  const companies = useQuery({ queryKey: companyKeys.list, queryFn: companyApi.list });
  const tickets = useQuery({
    queryKey: ticketKeys.list(companyId),
    queryFn: () => ticketApi.list(companyId),
    enabled: kind === "ticket",
  });
  const interventions = useQuery({
    queryKey: interventionKeys.list(companyId),
    queryFn: () => interventionApi.list(companyId),
    enabled: kind === "intervention",
  });
  const saved = () => {
    client.invalidateQueries({ queryKey: ["dashboard"] }).catch(() => undefined);
    onClose();
  };
  return (
    <>
      <FormDialog
        cancelLabel={t("cancel")}
        formActions={kind !== "asset" && kind !== "resource"}
        onOpenChange={(open) => {
          if (!open) {
            onClose();
          }
        }}
        open
        title={t(`dashboard.create.${kind}`)}
        wide={kind === "ticket" || kind === "intervention"}
      >
        {kind === "company" && (
          <CompanyForm csrfToken={csrfToken} onSaved={saved} showTitle={false} />
        )}
        {kind === "ticket" && (
          <BlockState empty={false} emptyText="" query={tickets}>
            {tickets.data && (
              <TicketForm
                csrfToken={csrfToken}
                data={tickets.data}
                onSaved={saved}
                {...(companyId ? { scope: companyId } : {})}
              />
            )}
          </BlockState>
        )}
        {kind === "intervention" && (
          <BlockState empty={false} emptyText="" query={interventions}>
            {interventions.data && (
              <InterventionForm
                csrfToken={csrfToken}
                data={interventions.data}
                onSaved={saved}
                {...(companyId ? { scope: companyId } : {})}
              />
            )}
          </BlockState>
        )}
        {(kind === "asset" || kind === "resource") && (
          <BlockState empty={false} emptyText="" query={companies}>
            <SelectWithAction
              action={{ label: t("newCompany"), onClick: () => setAddingCompany(true) }}
              id="dashboard-create-company"
              label={t("tickets.company")}
              onValueChange={setSelectedCompany}
              options={
                companies.data?.companies
                  .filter((item) => item.active)
                  .map((item) => ({ value: item.id, label: item.name })) ?? []
              }
              placeholder={t("dashboard.chooseCompany")}
              value={selectedCompany}
            />
            <p className="text-sm text-muted-foreground">{t("dashboard.chooseCompany")}</p>
            <Button
              disabled={!selectedCompany}
              onClick={() =>
                onNavigate({
                  area: "company",
                  id: selectedCompany,
                  section: kind === "asset" ? "inventory" : "resources",
                  create: true,
                })
              }
            >
              {t("dashboard.continue")}
            </Button>
          </BlockState>
        )}
      </FormDialog>
      {addingCompany && (
        <CompanyEditorDialog
          csrfToken={csrfToken}
          onCreated={(id) => {
            setSelectedCompany(id);
            setAddingCompany(false);
          }}
          onOpenChange={setAddingCompany}
          open
        />
      )}
    </>
  );
}