import PdfIcon from "@/assets/images/PDF.svg";
import Button from "@/components/Button";
import Divider from "@/components/Divider";
import Input from "@/components/Input";
import { toast } from "@/components/Toast";
import { Paths } from "@/config/Paths";
import { clx, extractErrorMessage } from "@/helpers/utils";
import { usePageTitle } from "@/hooks/usePageTitle";
import { useCreateCatalog } from "@/pages/catalogue/hooks/useCatalogueData";
import { ArrowLeft, DocumentText } from "iconsax-react";
import { useState, type FC } from "react";
import { useNavigate } from "react-router-dom";
import DirectLogin from "../auth/components/DirectLogin";

const CATALOG_SIZES = [
  { id: "a4", label: "A4" },
  { id: "a3", label: "A3" },
  { id: "a5", label: "A5" },
] as const;

const Home: FC = () => {
  usePageTitle("ساخت کاتالوگ");

  const navigate = useNavigate();
  const [active, setActive] = useState<string>("a4");
  const [name, setName] = useState<string>("");
  const [slug, setSlug] = useState<string>("");
  const { mutate: createCatalog, isPending } = useCreateCatalog();

  const handleSubmit = () => {
    if (!name) {
      toast("نام کاتالوگ را وارد کنید", "error");
    } else if (!slug) {
      toast("اسلاگ کاتالوگ را وارد کنید", "error");
    } else {
      createCatalog(
        { name, slug, size: active, content: "" },
        {
          onSuccess: (data) => {
            toast("کاتالوگ با موفقیت ساخته شد", "success");
            navigate(Paths.editor + `/${data?.data?.id}`);
          },
          onError: (error) => {
            toast(extractErrorMessage(error), "error");
          },
        },
      );
    }
  };

  return (
    <div className="mt-4 w-full">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h1 className="text-base font-light sm:text-lg">ساخت کاتالوگ به کمک ویرایشگر داناک</h1>
        {import.meta.env.DEV && <DirectLogin />}
      </div>

      <div className="mt-8 rounded-2xl bg-white p-4 sm:mt-12 sm:rounded-3xl sm:p-6 lg:mt-20 lg:rounded-4xl lg:p-10">
        <div className="mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base">سایز و نام مورد نظر را انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک بسازید</div>

        <div>
          <div className="mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8">
            {CATALOG_SIZES.map(({ id, label }) => (
              <button
                key={id}
                type="button"
                onClick={() => setActive(id)}
                className={clx(
                  "flex w-full h-[126px] cursor-pointer items-center justify-center rounded-[20px] border border-border sm:h-[146px] sm:w-[140px] lg:h-[166px] lg:w-[160px]",
                  active === id && "border-black!",
                )}
              >
                <div>
                  <div className="flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]">
                    <DocumentText size={24} color="black" />
                  </div>
                  <div className="mt-3 text-center text-sm">{label}</div>
                </div>
              </button>
            ))}
          </div>

          <div className="mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0">
            <Input label="نام کاتالوگ" value={name} onChange={(e) => setName(e.target.value)} />
            <Input label="اسلاگ" value={slug} onChange={(e) => setSlug(e.target.value)} />
          </div>

          <div className="flex justify-center">
            <Button disabled={isPending} onClick={handleSubmit} className="mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto">
              <div className="flex items-center justify-center gap-2">
                ادامه
                <ArrowLeft size={16} color="white" />
              </div>
            </Button>
          </div>
        </div>

        <Divider label="یا" className="mt-8 sm:mt-10" />

        <div className="mt-12 flex justify-center sm:mt-16 lg:mt-20">
          <div className="flex h-[160px] w-[150px] flex-col items-center justify-center rounded-[18px] border sm:h-[193px] sm:w-[183px]">
            <img src={PdfIcon} alt="upload" className="w-10 sm:w-12" />
            <div className="mt-3 text-sm">آپلود PDF</div>

            <div className="mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]">رایگان</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;
