import Button from "@/components/Button";
import Input from "@/components/Input";
import Select from "@/components/Select";
import { normalizeLinkUrl } from "@/helpers/func";
import { clx } from "@/helpers/utils";
import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
import { Add, ArrowCircleLeft, ArrowCircleRight, ArrowLeft, ArrowRight, DocumentText, Link } from "iconsax-react";
import { useMemo, useState, type ComponentType } from "react";

type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastPrev";

const linkTypesConfig: Record<LinkType, { icon: ComponentType<{ size?: number; color?: string }>; label: string }> = {
  link: { icon: Link, label: "لینک" },
  nextPage: { icon: ArrowCircleRight, label: "صفحه بعدی" },
  prevPage: { icon: ArrowCircleLeft, label: "صفحه قبلی" },
  page: { icon: DocumentText, label: "صفحه" },
  firstPage: { icon: ArrowLeft, label: "اولین صفحه" },
  lastPrev: { icon: ArrowRight, label: "آخرین صفحه" },
};

const internalLinkUrls: Partial<Record<LinkType, string>> = {
  nextPage: "page://next",
  prevPage: "page://prev",
  firstPage: "page://first",
  lastPrev: "page://last",
};

const LinkInput = () => {
  const [selectedLinkType, setSelectedLinkType] = useState<LinkType>("link");
  const [linkUrl, setLinkUrl] = useState("");
  const [linkTitle, setLinkTitle] = useState("");
  const [targetPageNumber, setTargetPageNumber] = useState("");
  const pages = useEditorStore((state) => state.pages);

  const linkTypes = useMemo(
    () =>
      (Object.entries(linkTypesConfig) as [LinkType, (typeof linkTypesConfig)[LinkType]][]).map(([type, config]) => ({
        type,
        ...config,
      })),
    [],
  );

  const pageOptions = useMemo(
    () =>
      pages.map((page, index) => ({
        value: String(index + 1),
        label: page.name || `صفحه ${index + 1}`,
      })),
    [pages],
  );

  const selectedLinkConfig = linkTypesConfig[selectedLinkType];
  const selectedPage = targetPageNumber ? pageOptions.find((page) => page.value === targetPageNumber) : undefined;
  const resolvedLinkUrl = selectedLinkType === "link" ? normalizeLinkUrl(linkUrl) : (internalLinkUrls[selectedLinkType] ?? (targetPageNumber ? `page://${targetPageNumber}` : ""));
  const defaultLinkText = selectedLinkType === "link" ? resolvedLinkUrl : selectedLinkType === "page" ? selectedPage?.label || selectedLinkConfig.label : selectedLinkConfig.label;
  const isAddDisabled = selectedLinkType === "link" ? !linkUrl.trim() : selectedLinkType === "page" && !targetPageNumber;

  const handleAddLink = () => {
    if (!resolvedLinkUrl) return;

    const newLink = {
      id: `link-${Date.now()}`,
      type: "link" as ToolType,
      x: 100,
      y: 100,
      text: linkTitle.trim() || defaultLinkText,
      linkUrl: resolvedLinkUrl,
      fontSize: 24,
      fill: "#0000ff",
      fontWeight: "normal",
    };
    const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
    addObject(newLink);
    setSelectedObjectId(newLink.id);
    setTool("select");
    setLinkUrl("");
    setLinkTitle("");
    setTargetPageNumber("");
  };

  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold text-right">لینک ها</h2>

      <div className="grid grid-cols-2 gap-3">
        {linkTypes.map((item) => {
          const isSelected = selectedLinkType === item.type;
          const Icon = item.icon;
          return (
            <button
              key={item.type}
              onClick={() => setSelectedLinkType(item.type)}
              className={clx(
                "flex border-transparent flex-col items-center justify-center gap-2 p-4 rounded-xl bg-gray-50 border transition-colors shadow-sm",
                isSelected ? "border-black" : "border-gray-200 hover:border-gray-300",
              )}
            >
              <Icon size={20} color="black" />
              <span className="text-xs text-black">{item.label}</span>
            </button>
          );
        })}
      </div>

      <div className="space-y-4">
        <div className="space-y-2">
          <h3 className="text-sm font-medium text-right">عنوان لینک</h3>
          <Input value={linkTitle} onChange={(e) => setLinkTitle(e.target.value)} placeholder="عنوان لینک" />
        </div>
        {selectedLinkType === "link" ? (
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-right">لینک</h3>
            <Input value={linkUrl} onChange={(e) => setLinkUrl(e.target.value)} placeholder="https://example.com" onEnter={handleAddLink} />
          </div>
        ) : null}
        {selectedLinkType === "page" ? (
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-right">انتخاب صفحه</h3>
            <Select value={targetPageNumber} onChange={(e) => setTargetPageNumber(e.target.value)} placeholder="صفحه مقصد را انتخاب کنید" items={pageOptions} />
          </div>
        ) : null}
        <Button onClick={handleAddLink} disabled={isAddDisabled} className="w-full" leftIcon={<Add size={20} color="white" />}>
          افزودن
        </Button>
      </div>
    </div>
  );
};

export default LinkInput;
