import { useGetList, useTranslate } from "ra-core";
import { matchPath, useLocation, Link } from "react-router";
import type { ReactNode } from "react";
import { CreateButton } from "@/components/ds/admin/create-button";
import { Progress } from "@/components/ds/ui/progress";

import useAppBarHeight from "../misc/useAppBarHeight";
import type { Contact } from "../types";
import { DealCreate } from "./DealCreate";

export const DealEmpty = ({ children }: { children?: ReactNode }) => {
  const location = useLocation();
  const matchCreate = matchPath("/deals/create", location.pathname);
  const appbarHeight = useAppBarHeight();
  const translate = useTranslate();

  // get Contact data
  const { data: contacts, isPending: contactsLoading } = useGetList<Contact>(
    "contacts",
    {
      pagination: { page: 1, perPage: 1 },
    },
  );

  if (contactsLoading) return <Progress value={50} />;

  return (
    <div
      className="flex flex-col justify-center items-center gap-12"
      style={{
        height: `calc(100dvh - ${appbarHeight}px)`,
      }}
    >
      <img src="./img/empty.svg" alt={translate("crm.deal.empty.title")} />
      {contacts && contacts.length > 0 ? (
        <>
          <div className="flex flex-col items-center gap-0">
            <h3 className="text-lg font-bold">
              {translate("crm.deal.empty.title")}
            </h3>
            <p className="text-sm text-center text-muted-foreground mb-4">
              {translate("crm.deal.empty.description")}
            </p>
          </div>
          <div className="flex space-x-8">
            <CreateButton label={translate("crm.deal.action.create")} />
          </div>
          <DealCreate open={!!matchCreate} />
          {children}
        </>
      ) : (
        <div className="flex flex-col items-center gap-0">
          <h3 className="text-lg font-bold">
            {translate("crm.deal.empty.title")}
          </h3>
          <p className="text-sm text-center text-muted-foreground mb-4">
            {translate("crm.deal.empty.no_contacts")}
            <br />
            <Link to="/contacts/create" className="hover:underline">
              {translate("crm.deal.empty.add_contact")}
            </Link>{" "}
            {translate("crm.deal.empty.before_creating")}
          </p>
        </div>
      )}
    </div>
  );
};