update in link

src/pages/editor/components/sidebar/instructions/LinkInput.tsx

@@ -1,7 +1,8 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, type ComponentType } from "react";
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
 import Input from "@/components/Input";
 import Button from "@/components/Button";
+import Select from "@/components/Select";
 import {
     Link,
     ArrowCircleRight,
@@ -17,20 +18,29 @@ type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastP
 
 const linkTypesConfig: Record<
     LinkType,
-    { icon: React.ComponentType<{ size?: number; color?: string }>; label: string }
+    { 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: "آخرین قبلی" },
+    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(
         () =>
@@ -42,15 +52,44 @@ const LinkInput = () => {
         []
     );
 
+    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"
+            ? linkUrl.trim()
+            : 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 (linkUrl.trim()) {
+        if (!resolvedLinkUrl) return;
+
         const newLink = {
             id: `link-${Date.now()}`,
             type: "link" as ToolType,
             x: 100,
             y: 100,
-                text: linkTitle.trim() || linkUrl,
+            text: linkTitle.trim() || defaultLinkText,
-                linkUrl: linkUrl,
+            linkUrl: resolvedLinkUrl,
             fontSize: 24,
             fill: "#0000ff",
             fontWeight: "normal",
@@ -61,7 +100,7 @@ const LinkInput = () => {
         setTool("select");
         setLinkUrl("");
         setLinkTitle("");
-        }
+        setTargetPageNumber("");
     };
 
     return (
@@ -99,6 +138,7 @@ const LinkInput = () => {
                         placeholder="عنوان لینک"
                     />
                 </div>
+                {selectedLinkType === "link" ? (
                     <div className="space-y-2">
                         <h3 className="text-sm font-medium text-right">لینک</h3>
                         <Input
@@ -108,9 +148,21 @@ const LinkInput = () => {
                             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={!linkUrl.trim()}
+                    disabled={isAddDisabled}
                     className="w-full"
                     leftIcon={<Add size={20} color="white" />}
                 >