1var st=Object.defineProperty,at=Object.defineProperties;var rt=Object.getOwnPropertyDescriptors;var Oe=Object.getOwnPropertySymbols;var lt=Object.prototype.hasOwnProperty,nt=Object.prototype.propertyIsEnumerable;var Ge=(c,m,n)=>m in c?st(c,m,{enumerable:!0,configurable:!0,writable:!0,value:n}):c[m]=n,M=(c,m)=>{for(var n in m||(m={}))lt.call(m,n)&&Ge(c,n,m[n]);if(Oe)for(var n of Oe(m))nt.call(m,n)&&Ge(c,n,m[n]);return c},$=(c,m)=>at(c,rt(m));var G=(c,m,n)=>new Promise((D,h)=>{var d=k=>{try{v(n.next(k))}catch(o){h(o)}},S=k=>{try{v(n.throw(k))}catch(o){h(o)}},v=k=>k.done?D(k.value):Promise.resolve(k.value).then(d,S);v((n=n.apply(c,m)).next())});import{r,j as e,a as Te,k as it,h as ot,u as dt,b as ct}from"./react-vendor-Bmj5VlNT.js";import{M as xt}from"./MainLayout-oGL5Yymk.js";import{D as ht,a as Ke,b as ut,c as mt,d as bt,e as pt,f as ft}from"./DiagramSettingsModal-CVsGYAyw.js";import{d as ee,S as Ue}from"./diagramStore-Dx5BbwtG.js";import{w as Ve,m as Xe,aG as Fe,aE as ve,as as Ae,bF as ze,aJ as Ee,ax as $e,i as pe,a8 as gt,q as kt,$ as We,s as jt,aT as vt,aK as wt,c as Re,a2 as fe,P as _e,n as Be,ae as ce,a6 as je,aL as yt,M as Je,Q as Nt,H as xe,a4 as Ct,ak as Qe,an as Ye,bx as St,a as Et,O as Tt,a5 as qe,j as Pe,bM as Dt,bN as It,a3 as Lt,ac as Ht,bO as Mt}from"./icons-hi2-BN_j_nRP.js";import{P as ne}from"./PortalTooltip-DrK6VQ4R.js";import{t as Ze}from"./index-BwOmBdR_.js";import{a as we,m as et,u as At,g as zt}from"./study-modes-C76nMQ3U.js";import{A as te,m as H}from"./motion-vendor-C7r_-Z0p.js";import{d as le}from"./diagramSubjectStore-DDsWD2tB.js";import{m as $t}from"./mediaService-Bdrah2bc.js";import{C as tt}from"./ConfirmModal-uQWeSxck.js";import{d as K}from"./diagramCloudService-CoCSOAtc.js";import{u as _t}from"./index-D7Jrz-4v.js";import"./icons-other-DiipBQ7p.js";import"./useUnreadChat-CB0hL16I.js";import"./data-vendor-BOVf-I-t.js";import"./charts-vendor-Lc4STq0H.js";import"./effects-vendor-B04Tb7nA.js";import"./index-9Ke3qMkg.js";import"./sentry-vendor-ikJ5QM32.js";const Pt=[{id:"explore",label:"Khám phá",icon:e.jsx(We,{className:"w-3.5 h-3.5"})},{id:"match",label:"Ghép thẻ",icon:e.jsx(jt,{className:"w-3.5 h-3.5"})},{id:"quiz",label:"Trắc nghiá»m",icon:e.jsx(vt,{className:"w-3.5 h-3.5"})},{id:"write",label:"Gõ từ",icon:e.jsx(ve,{className:"w-3.5 h-3.5"})}
1],Rt=({diagram:c,currentMode:m,onChangeMode:n,onOpenSettings:D,onOpenPrint:h,onOpenExportPng:d,onBackToLibrary:S,onOpenShare:v})=>{const k=we(),[o,y]=r.useState(!1),[g,w]=r.useState(!1),[x,l]=r.useState(!1),[,f]=r.useState(!1),E=r.useRef(null);r.useEffect(()=>{if(!g)return;const I=_=>{E.current&&!E.current.contains(_.target)&&w(!1)};return document.addEventListener("mousedown",I),()=>document.removeEventListener("mousedown",I)},[g]),r.useEffect(()=>{if(!o)return;const I=_=>{_.key==="Escape"&&y(!1)};return window.addEventListener("keydown",I),()=>window.removeEventListener("keydown",I)},[o]),r.useEffect(()=>{const I=()=>{l(!!document.fullscreenElement)};return document.addEventListener("fullscreenchange",I),()=>document.removeEventListener("fullscreenchange",I)},[]);const A=()=>{document.fullscreenElement?document.exitFullscreen().catch(I=>{}):document.documentElement.requestFullscreen().catch(I=>{})},q=()=>G(null,null,function*(){w(!1);const I=document.getElementById("diagram-pure-canvas")||document.getElementById("diagram-canvas-wrapper")||document.querySelector(".diagram-canvas-container");if(!I){k.error("Không tìm thấy vùng sÆ¡ Äá» Äá» xuất ảnh");return}try{f(!0),k.info("Äang kết xuất ảnh PNG chất lượng cao...");const _=yield Ze(I,{quality:.98,pixelRatio:2,backgroundColor:"#ffffff",filter:X=>{var W;return!(X instanceof HTMLElement&&(X.hasAttribute("data-export-ignore")||X.classList.contains("diagram-export-ignore")||X.tagName==="BUTTON"&&((W=X.textContent)!=null&&W.includes("Phóng to"))))}}),J=c.title.trim().replace(/[\\/:*?"<>|]/g,"_"),U=document.createElement("a");U.download=`${J}_diagram.png`,U.href=_,U.click(),k.success("Äã xuất ảnh sÆ¡ Äá» PNG thà nh công!")}catch(_){k.error("Không thá» xuất ảnh sÆ¡ Äá». Vui lòng thá» lại.")}finally{f(!1)}});return o?e.jsxs("div",{className:"fixed top-0 left-0 right-0 z-50 pointer-events-none group",children:[e.jsx("div",{className:"h-4 w-full pointer-events-auto"}),e.jsx("div",{className:"absolute top-1.5 left-1/2 -translate-x-1/2 pointer-events-auto transition-all duration-200 transform -translate-y-4 opacity-80 sm:opacity-0 group-hover:translate-y-0 group-hover:opacity-100 focus-within:translate-y-0 focus-within:opacity-100",children:e.jsxs("button",{type:"button",onClick:()=>y(!1),className:"inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-slate-900/95 dark:bg-slate-800/95 text-white text-xs font-bold backdrop-blur-md shadow-xl hover:bg-blue-600 dark:hover:bg-blue-600 cursor-pointer transition-all border border-slate-700/60 active:scale-95",title:"Nhấn phÃm Esc hoặc click Äá» hiá»n thanh công cụ",children:[e.jsx(Ve,{className:"w-4 h-4 text-blue-400"}),e.jsx("span",{children:"Hiá»n thanh công cụ"}),e.jsx("kbd",{className:"hidden sm:inline-block px-1.5 py-0.5 bg-slate-800 dark:bg-slate-700 text-[10px] rounded text-slate-300 font-mono",children:"Esc"})]})})]}):e.jsx("header",{className:"sticky top-0 z-30 w-full bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border-b border-slate-200/80 dark:border-slate-800 px-2.5 sm:px-4 py-1.5 sm:py-2 shadow-2xs transition-all",children:e.jsxs("div",{className:"max-w-7xl mx-auto flex flex-col md:flex-row md:items-center justify-between gap-2 md:gap-3",children:[e.jsxs("div",{className:"flex items-center justify-between gap-2 min-w-0 w-full md:w-auto",children:[e.jsxs("div",{className:"flex items-center gap-2 min-w-0 flex-1",children:[e.jsx(ne,{content:"Quay lại ThÆ° viá»n sÆ¡ Äá»",children:e.jsx("button",{type:"button",onClick:S,className:"inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 transition-colors shrink-0 cursor-pointer active:scale-95",children:e.jsx(Xe,{className:"w-4 h-4"})})}),e.jsxs("div",{className:"flex items-center gap-1.5 sm:gap-2 min-w-0",children:[e.jsx("h1",{className:"text-xs sm:text-sm md:text-base font-extrabold text-slate-900 dark:text-white truncate max-w-[170px] xs:max-w-[210px] sm:max-w-xs md:max-w-md tracking-tight antialiased",children:c.title}),c.subject&&e.jsx("span",{className:"hidden sm:inline-flex items-center px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-950/60 text-blue-700 dark:text-blue-300 text-[11px] font-bold shrink-0 border border-blue-200/80 dark:border-blue-900/60 antialiased",children:c.subject}),e.jsxs("span",{className:"hidden lg:inline-block text-[11px] text-slate-700 dark:text-slate-300 font-extrabold shrink-0",children:["⢠",c.hotspots.length," vá» trÃ"]})]})]}),e.jsxs("div",{className:"flex md:hidden items-center gap-1 shrink-0",children:[v&&e.jsx("button",{type:"button",onClick:v,className:"inline-flex items-center justify-center w-8 h-8 rounded-full text-slate-600 dar
1k:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 active:scale-95 cursor-pointer",title:"Chia sẻ sÆ¡ Äá»","aria-label":"Chia sẻ sÆ¡ Äá»",children:e.jsx(Fe,{className:"w-4 h-4 stroke-[2]"})}),c.accessRole!=="viewer"&&e.jsx("button",{type:"button",onClick:()=>n("edit"),className:"inline-flex items-center justify-center w-8 h-8 rounded-full text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/60 border border-blue-200 dark:border-blue-800 active:scale-95 cursor-pointer shadow-2xs",title:"Chá»nh sá»a sÆ¡ Äá»","aria-label":"Chá»nh sá»a sÆ¡ Äá»",children:e.jsx(ve,{className:"w-4 h-4 stroke-[2]"})}),e.jsxs("div",{className:"relative",children:[e.jsx("button",{type:"button",onClick:()=>w(I=>!I),className:`inline-flex items-center justify-center w-8 h-8 rounded-full text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer active:scale-95 ${g?"bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white":""}`,"aria-label":"Tùy chá»n khác",children:e.jsx(Ae,{className:"w-4 h-4"})}),e.jsx(te,{children:g&&e.jsxs(H.div,{initial:{opacity:0,scale:.95,y:-4},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.95,y:-4},transition:{duration:.15},className:"absolute right-0 top-10 w-52 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl py-1.5 z-40",children:[e.jsxs("button",{type:"button",onClick:()=>{w(!1),d?d():q()},className:"w-full px-3.5 py-2 text-left text-xs font-medium text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(ze,{className:"w-3.5 h-3.5 text-slate-500 shrink-0"}),e.jsx("span",{children:"Xem trÆ°á»c & Tải PNG"})]}),e.jsxs("button",{type:"button",onClick:()=>{w(!1),h()},className:"w-full px-3.5 py-2 text-left text-xs font-medium text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(Ee,{className:"w-3.5 h-3.5 text-slate-500 shrink-0"}),e.jsx("span",{children:"Xuất / In bà i táºp PDF"})]}),e.jsxs("button",{type:"button",onClick:()=>{w(!1),D()},className:"w-full px-3.5 py-2 text-left text-xs font-medium text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx($e,{className:"w-3.5 h-3.5 text-slate-500 shrink-0"}),e.jsx("span",{children:"Cà i Äặt sÆ¡ Äá»"})]}),e.jsx("div",{className:"h-[1px] bg-slate-100 dark:bg-slate-800 my-1"}),e.jsxs("button",{type:"button",onClick:()=>{w(!1),y(!0)},className:"w-full px-3.5 py-2 text-left text-xs font-medium text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(pe,{className:"w-3.5 h-3.5 text-slate-500 shrink-0"}),e.jsx("span",{children:"Ẩn thanh công cụ (Zen)"})]})]},"diagram-header-menu-mobile")})]})]})]}),e.jsx("nav",{"aria-label":"Chế Äá» há»c sÆ¡ Äá»",className:"flex items-center justify-between p-1 rounded-full bg-slate-100 dark:bg-slate-800/90 border border-slate-200/80 dark:border-slate-700/60 shrink-0 w-full md:w-auto overflow-x-auto scrollbar-none",children:Pt.map(I=>{const _=m===I.id;return e.jsxs("button",{type:"button",onClick:()=>n(I.id),className:`relative flex-1 md:flex-initial inline-flex items-center justify-center gap-1 sm:gap-1.5 px-2 sm:px-3.5 h-8 sm:h-7 rounded-full text-xs font-bold whitespace-nowrap transition-colors duration-150 cursor-pointer antialiased active:scale-95 ${_?"text-blue-600 dark:text-blue-400 font-bold":"text-slate-700 dark:text-slate-300 hover:text-slate-950 dark:hover:text-white font-bold"}`,children:[_&&e.jsx(H.div,{layoutId:"diagramActiveStudyMode",className:"absolute inset-0 rounded-full bg-white dark:bg-slate-900 shadow-xs border border-slate-200/60 dark:border-slate-700/60",transition:{type:"spring",stiffness:500,damping:35}}),e.jsxs("span",{className:"relative z-10 flex items-center gap-1 sm:gap-1.5",children:[I.icon,e.jsx("span",{className:"text-[11px] sm:text-xs",children:I.label})]})]},I.id)})}),e.jsxs("div",{className:"hidden md:flex items-center gap-1 sm:gap-1.5 shrink-0",children:[v&&e.jsx(ne,{content:"Chia sẻ & cá»ng tác",children:e.jsxs("button",{type:"button",onClick:v,className:"inline-flex items-center gap-1.5 px-3 sm:px-3.5 h-8 rounded-full text-xs font-bold text-slate-700 dark:text-slate-200 bg-slate-100 dar
1k:bg-slate-800 hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-950/60 dark:hover:text-blue-300 border border-slate-200 dark:border-slate-700 transition-all cursor-pointer",children:[e.jsx(Fe,{className:"w-3.5 h-3.5 stroke-[2]"}),e.jsx("span",{className:"hidden lg:inline",children:"Chia sẻ"})]})}),e.jsx(ne,{content:x?"Thoát toà n mà n hình":"Trình chiếu toà n mà n hình",children:e.jsx("button",{type:"button",onClick:A,className:"inline-flex items-center justify-center w-8 h-8 rounded-full text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer",children:x?e.jsx(gt,{className:"w-4 h-4"}):e.jsx(kt,{className:"w-4 h-4"})})}),c.accessRole!=="viewer"?e.jsx(ne,{content:"Chá»nh sá»a vá» trà và nhãn sÆ¡ Äá»",children:e.jsxs("button",{type:"button",onClick:()=>n("edit"),className:"inline-flex items-center gap-1.5 px-3 sm:px-3.5 h-8 rounded-full text-xs font-bold text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/60 hover:bg-blue-100 dark:hover:bg-blue-900/60 border border-blue-200 dark:border-blue-800 transition-all cursor-pointer shadow-2xs antialiased",children:[e.jsx(ve,{className:"w-3.5 h-3.5 stroke-[2]"}),e.jsx("span",{className:"hidden sm:inline",children:"Chá»nh sá»a"})]})}):e.jsx("span",{className:"hidden sm:inline-flex items-center gap-1 px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 text-xs font-bold",children:"Chá» xem"}),e.jsxs("div",{className:"relative",ref:E,children:[e.jsx(ne,{content:"Tùy chá»n khác",children:e.jsx("button",{type:"button",onClick:()=>w(I=>!I),className:`inline-flex items-center justify-center w-8 h-8 rounded-full text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer ${g?"bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white":""}`,children:e.jsx(Ae,{className:"w-4 h-4"})})}),e.jsx(te,{children:g&&e.jsxs(H.div,{initial:{opacity:0,scale:.95,y:-4},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.95,y:-4},transition:{duration:.15},className:"absolute right-0 top-10 w-52 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl py-1.5 z-40",children:[e.jsxs("button",{type:"button",onClick:()=>{w(!1),d?d():q()},className:"w-full px-3.5 py-2 text-left text-xs font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(ze,{className:"w-4 h-4 text-slate-500"}),e.jsx("span",{children:"Xem trÆ°á»c & Tải PNG"})]}),e.jsxs("button",{type:"button",onClick:()=>{w(!1),h()},className:"w-full px-3.5 py-2 text-left text-xs font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(Ee,{className:"w-4 h-4 text-slate-500"}),e.jsx("span",{children:"Xuất / In bà i táºp PDF"})]}),e.jsxs("button",{type:"button",onClick:()=>{w(!1),D()},className:"w-full px-3.5 py-2 text-left text-xs font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx($e,{className:"w-4 h-4 text-slate-500"}),e.jsx("span",{children:"Cà i Äặt sÆ¡ Äá»"})]}),e.jsx("div",{className:"h-[1px] bg-slate-100 dark:bg-slate-800 my-1"}),e.jsxs("button",{type:"button",onClick:()=>{w(!1),y(!0)},className:"w-full px-3.5 py-2 text-left text-xs font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(pe,{className:"w-4 h-4 text-slate-500"}),e.jsx("span",{children:"Ẩn thanh công cụ (Zen)"})]})]},"diagram-header-menu-desktop")})]})]})]})})},Ot=20*1024*1024,Gt=900,Kt=({diagram:c,settings:m,onSave:n,onCancel:D,onBackToLibrary:h,onOpenSettings:d,onOpenPrint:S,onAutoSave:v})=>{var ke,Se;const k=we(),[o,y]=r.useState(c),[g,w]=r.useState(null),[x,l]=r.useState("point"),[f,E]=r.useState("hotspots"),[A,q]=r.useState(!1),[I,_]=r.useState(!1),[J,U]=r.useState(!1),[X,W]=r.useState(!1),[Y,F]=r.useState("saved"),[O,b]=r.useState(null),j=r.useRef(null),R=r.useRef(null),P=r.useRef(null),ie=r.useRef(JSON.stringify(c)),se=JSON.stringify(o)!==ie.current,ye=r.useMemo(()=>le.getAllSubjects([o]),[o]);r.useEffect(()=>{if(!J)return;const s=i=>{j.current&&!j.current.contains(i.target)&&U(!1)};return document.addEventListener("mousedown",s),()=>document.removeEventListener("mousedown",s)},[J]),r.useEffect(()=>{if(!I)return;const s=i=>{i.key==="Escape"&&_(!1)};return window.addEventListener("keydown",s),()=>window.removeEventListener("keydown",s)},[I]);const ge=c.id;r.useEffect(()=>{y(c),ie.current=JSON.stringify(c),F("saved"),b(null),c.hotspots.length>0&&w(c.hotspots[0].id)},[ge]),r.useEffect(()=>{if(!se)return;F(u=>u==="saving"?u:"pending");const s=JSON.stringify(o),i=o;return P.current=setTimeout(()=>G(null,null,function*(){F("saving");try{yield ee.saveDiagram(i),ie.current=s,yield v==null?void 0:v(i),b(new Date),F("saved")}catch(u){F("error"),k.error("Không thá» tá»± Äá»ng lÆ°u sÆ¡ Äá». Vui lòng thá» lÆ°u lại.")}}),Gt),()=>{P.current&&(clearTimeout(P.current),P.current=null)}},[o,se,v,k]),r.useEffect(()=>{if(!se)return;const s=i=>{i.preventDefault(),i.returnValue=""};return window.addEventListener("beforeunload",s),()=>window.removeEventListener("beforeunload",s)},[se]);const oe=r.useCallback(s=>{if(!s.type.startsWith("image/")){k.error("Vui lòng chá»n tá»p hình ảnh hợp lá» (PNG, JPG, SVG, WebP)");return}if(s.size>Ot){k.error("Ảnh vượt giá»i hạn 20 MB. Vui lòng chá»n tá»p nhá» hÆ¡n.");return}const i=new FileReader;i.onload=u=>{var a;const C=(a=u.target)==null?void 0:a.result,t=new Image;t.onload=()=>{y(p=>$(M({}
1,p),{imageUrl:C,imageWidth:t.naturalWidth||800,imageHeight:t.naturalHeight||600})),k.success("Äã tải ảnh lên thà nh công!")},t.src=C},i.readAsDataURL(s),$t.uploadSingleImage(s,"generic").then(u=>{u!=null&&u.url&&y(C=>$(M({},C),{imageUrl:u.url}))}).catch(()=>{})},[k]);r.useEffect(()=>{const s=i=>{var C;const u=(C=i.clipboardData)==null?void 0:C.items;if(u){for(let t=0;t<u.length;t++)if(u[t].type.startsWith("image/")){const a=u[t].getAsFile();if(a){oe(a);break}}}};return window.addEventListener("paste",s),()=>window.removeEventListener("paste",s)},[oe]);const ae=(s,i)=>{const u=o.hotspots.length+1,C={id:`h-${Date.now()}-${Math.random().toString(36).substring(2,7)}`,index:u,x:Number(s.toFixed(2)),y:Number(i.toFixed(2)),shape:"point",term:`Vá» trà ${u}`,definition:"",hint:""};y(t=>$(M({},t),{hotspots:[...t.hotspots,C]})),w(C.id),E("hotspots")},de=(s,i,u,C)=>{const t=o.hotspots.length+1,a={id:`h-${Date.now()}-${Math.random().toString(36).substring(2,7)}`,index:t,x:Number(s.toFixed(2)),y:Number(i.toFixed(2)),shape:"rectangle",width:Number(u.toFixed(2)),height:Number(C.toFixed(2)),term:`Khu vá»±c ${t}`,definition:"",hint:""};y(p=>$(M({},p),{hotspots:[...p.hotspots,a]})),w(a.id),E("hotspots"),k.success(`Äã thêm khu vá»±c hình chữ nháºt #${t}`)},De=(s,i,u,C)=>{const t=o.hotspots.length+1,a={id:`h-${Date.now()}-${Math.random().toString(36).substring(2,7)}`,index:t,x:Number(s.toFixed(2)),y:Number(i.toFixed(2)),hasLine:!0,targetX:Number(u.toFixed(2)),targetY:Number(C.toFixed(2)),lineStyle:"arrow",lineOffset:50,shape:"point",term:`Vá» trà ${t}`,definition:"",hint:""};y(p=>$(M({},p),{hotspots:[...p.hotspots,a]})),w(a.id),E("hotspots"),k.success(`Äã thêm ÄÆ°á»ng chá» dẫn #${t}`)},Q=(s,i)=>{y(u=>$(M({},u),{hotspots:u.hotspots.map(C=>C.id===s?M(M({},C),i):C)}))},he=(s,i,u,C)=>{const t={id:`mask-${Date.now()}-${Math.random().toString(36).substring(2,7)}`,x:Number(s.toFixed(2)),y:Number(i.toFixed(2)),width:Number(u.toFixed(2)),height:Number(C.toFixed(2))};y(a=>$(M({},a),{blurMasks:[...a.blurMasks||[],t]})),E("masks"),k.success("Äã thêm lá»p che nhãn (Blur Mask)")},ue=s=>{y(i=>$(M({},i),{blurMasks:(i.blurMasks||[]).filter(u=>u.id!==s)})),k.info("Äã xóa lá»p che nhãn")},Ie=(s,i,u)=>{y(C=>$(M({},C),{hotspots:C.hotspots.map(t=>t.id===s?$(M({},t),{x:i,y:u}):t)}))},Ne=(s,i,u)=>{y(C=>$(M({},C),{hotspots:C.hotspots.map(t=>t.id===s?i>0&&u>0?$(M({},t),{width:i,height:u}):$(M({},t),{width:void 0,height:void 0}):t)}))},B=(s,i,u)=>{y(C=>$(M({},C),{hotspots:C.hotspots.map(t=>t.id===s?$(M({},t),{[i]:u}):t)}))},me=s=>{if(y(i=>{const C=i.hotspots.filter(t=>t.id!==s).map((t,a)=>$(M({},t),{index:a+1}));return $(M({},i),{hotspots:C})}),g===s){const i=o.hotspots.filter(u=>u.id!==s);w(i.length>0?i[0].id:null)}k.info("Äã xóa Äiá»m vá» trÃ")},V=(s,i)=>{const u=i==="up"?s-1:s+1;if(u<0||u>=o.hotspots.length)return;const C=[...o.hotspots],t=C[s];C[s]=C[u],C[u]=t;const a=C.map((p,z)=>$(M({},p),{index:z+1}));y(p=>$(M({},p),{hotspots:a}))},be=()=>G(null,null,function*(){var s;if(!o.title.trim()){k.error("Vui lòng nháºp tiêu Äá» cho sÆ¡ Äá»");return}if(o.hotspots.length===0){k.error("Vui lòng thả Ãt nhất 1 Äiá»m ghim lên sÆ¡ Äá»");return}try{q(!0),P.current&&(clearTimeout(P.current),P.current=null),(s=o.subject)!=null&&s.trim()&&le.addSubject(o.subject.trim()),yield n(o),ie.current=JSON.stringify(o),k.success("Äã lÆ°u sÆ¡ Äá» thà nh công!")}catch(i){k.error("Lá»i khi lÆ°u sÆ¡ Äá»")}finally{q(!1)}}),Ce=s=>{if(!se){s();return}R.current=s,W(!0)},Le=()=>G(null,null,function*(){const s=R.current;if(s){P.current&&(clearTimeout(P.current),P.current=null);try{F("saving"),yield ee.saveDiagram(o),ie.current=JSON.stringify(o),yield v==null?void 0:v(o),b(new Date),F("saved"),R.current=null,W(!1),s()}catch(i){F("error"),k.error("Không thá» lÆ°u sÆ¡ Äá» trÆ°á»c khi rá»i. Vui lòng thá» lại.")}}}),He=()=>{R.current=null,W(!1)},N=o.hotspots.find(s=>s.id===g)||null;return e.jsxs("div",{className:"flex flex-col w-full",children:[I?e.jsxs("div",{className:"fixed top-0 left-0 right-0 z-50 pointer-events-none group",children:[e.jsx("div",{className:"h-4 w-full pointer-events-auto"}),e.jsx("div",{className:"absolute top-1.5 left-1/2 -translate-x-1/2 pointer-events-auto transition-all duration-200 transform -translate-y-4 opacity-30 sm:opacity-0 group-hover:translate-y-0 group-hover:opacity-100 focus-within:translate-y-0 focus-within:opacity-100",children:e.jsxs("button",{type:"button",onClick:()=>_(!1),className:"inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-900/90 dark:bg-slate-800/95 text-white text-xs font-semibold backdrop-blur-md shadow-xl hover:bg-blue-600 dar
1k:hover:bg-blue-600 cursor-pointer transition-all border border-slate-700/60",title:"Nhấn phÃm Esc hoặc click Äá» hiá»n thanh công cụ",children:[e.jsx(Ve,{className:"w-3.5 h-3.5 text-blue-400"}),e.jsx("span",{children:"Hiá»n thanh công cụ"}),e.jsx("kbd",{className:"hidden sm:inline-block px-1.5 py-0.5 bg-slate-800 dark:bg-slate-700 text-[10px] rounded text-slate-300 font-mono",children:"Esc"})]})})]}):e.jsx("header",{className:"sticky top-0 z-30 w-full bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border-b border-slate-200/80 dark:border-slate-800 px-3 sm:px-4 py-2 shadow-2xs transition-all mb-3",children:e.jsxs("div",{className:"max-w-7xl mx-auto flex items-center justify-between gap-2.5 sm:gap-4",children:[e.jsxs("div",{className:"flex items-center gap-2 min-w-0 flex-1 max-w-xl",children:[h&&e.jsx(ne,{content:"Quay lại ThÆ° viá»n sÆ¡ Äá»",children:e.jsx("button",{type:"button",onClick:()=>Ce(h),className:"inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 transition-colors shrink-0 cursor-pointer",children:e.jsx(Xe,{className:"w-4 h-4"})})}),e.jsx("div",{className:"flex-1 min-w-[140px] max-w-sm",children:e.jsx("input",{type:"text",value:o.title,onChange:s=>y(i=>$(M({},i),{title:s.target.value})),placeholder:"Tiêu Äá» sÆ¡ Äá» *",className:"w-full h-8 px-2.5 rounded-lg bg-slate-100/80 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white font-bold text-xs sm:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white dark:focus:bg-slate-900 transition-all",title:"Tiêu Äá» sÆ¡ Äá»"})}),e.jsxs("div",{className:"hidden sm:block w-32 md:w-36 shrink-0 relative",children:[e.jsx("input",{type:"text",list:"diagram-editor-subjects",value:o.subject||"",onChange:s=>y(i=>$(M({},i),{subject:s.target.value})),placeholder:"Môn há»c",className:"w-full h-8 px-2.5 rounded-lg bg-slate-100/80 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white dark:focus:bg-slate-900 transition-all",title:"Môn há»c / Chủ Äá» (chá»n từ danh sách hoặc tá»± nháºp)"}),e.jsx("datalist",{id:"diagram-editor-subjects",children:ye.map(s=>e.jsx("option",{value:s},s))})]}),e.jsxs("span",{className:"hidden md:inline-block text-[11px] text-slate-400 dark:text-slate-500 font-semibold shrink-0 whitespace-nowrap",children:["⢠",o.hotspots.length," vá» trÃ"]})]}),e.jsx("div",{className:"hidden md:flex items-center justify-center shrink-0",children:e.jsxs("span",{className:"inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-950/60 border border-blue-200/80 dark:border-blue-900/50 text-blue-600 dark:text-blue-400 text-xs font-bold shadow-2xs",children:[e.jsx(ve,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Chế Äá» Soạn thảo"})]})}),e.jsxs("div",{className:"flex items-center gap-1.5 sm:gap-2 shrink-0",children:[e.jsx(ne,{content:"Tải ảnh má»i thay thế",children:e.jsxs("label",{className:"h-8 inline-flex items-center justify-center gap-1.5 px-3 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 text-xs font-bold cursor-pointer transition-colors shadow-2xs shrink-0",children:[e.jsx(wt,{className:"w-3.5 h-3.5 text-blue-600 dark:text-blue-400"}),e.jsx("span",{className:"hidden sm:inline",children:"Äá»i ảnh"}),e.jsx("input",{type:"file",accept:"image/*",className:"hidden",onChange:s=>{var u;const i=(u=s.target.files)==null?void 0:u[0];i&&oe(i),s.target.value=""}})]})}),D&&e.jsx("button",{type:"button",onClick:()=>Ce(D),className:"h-8 inline-flex items-center justify-center px-3 rounded-full text-xs font-bold text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 active:scale-95 transition-all duration-150 cursor-pointer",children:"Thoát"}),e.jsxs("button",{type:"button",disabled:A,onClick:be,"aria-label":se?"LÆ°u các thay Äá»i chÆ°a lÆ°u":"LÆ°u sÆ¡ Äá»",className:"h-8 inline-flex items-center justify-center gap-1.5 px-3.5 sm:px-4 roun
1ded-full bg-blue-600 hover:bg-blue-700 active:scale-95 text-white text-xs font-bold shadow-xs transition-all duration-150 cursor-pointer disabled:opacity-50 shrink-0",children:[e.jsx(Re,{className:"w-3.5 h-3.5 stroke-[2.5]"}),Y==="pending"&&e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-amber-300","aria-hidden":"true"}),Y==="saving"&&e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-sky-200 animate-pulse","aria-hidden":"true"}),e.jsx("span",{children:A?"Äang lÆ°u...":Y==="saving"?"Äang tá»± lÆ°u...":Y==="pending"?"Sắp tá»± lÆ°u...":"LÆ°u SÆ¡ Äá»"})]}),O&&Y==="saved"&&e.jsx("span",{className:"hidden lg:inline text-[10px] font-semibold text-emerald-600 dark:text-emerald-400 whitespace-nowrap","aria-live":"polite",children:"Äã tá»± lÆ°u"}),e.jsxs("div",{className:"relative",ref:j,children:[e.jsx(ne,{content:"Tùy chá»n khác",children:e.jsx("button",{type:"button",onClick:()=>U(s=>!s),className:`inline-flex items-center justify-center w-8 h-8 rounded-full text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer ${J?"bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white":""}`,children:e.jsx(Ae,{className:"w-4 h-4"})})}),e.jsx(te,{children:J&&e.jsxs(H.div,{initial:{opacity:0,scale:.95,y:-4},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.95,y:-4},transition:{duration:.15},className:"absolute right-0 top-10 w-44 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl py-1.5 z-40",children:[S&&e.jsxs("button",{type:"button",onClick:()=>{U(!1),S()},className:"w-full px-3.5 py-2 text-left text-xs font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(Ee,{className:"w-4 h-4 text-slate-500"}),e.jsx("span",{children:"In bà i táºp"})]}),d&&e.jsxs("button",{type:"button",onClick:()=>{U(!1),d()},className:"w-full px-3.5 py-2 text-left text-xs font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx($e,{className:"w-4 h-4 text-slate-500"}),e.jsx("span",{children:"Cà i Äặt sÆ¡ Äá»"})]}),e.jsxs("button",{type:"button",onClick:()=>{U(!1),_(!0)},className:"w-full px-3.5 py-2 text-left text-xs font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(pe,{className:"w-4 h-4 text-slate-500"}),e.jsx("span",{children:"Ẩn thanh công cụ"})]})]},"diagram-editor-menu")})]})]})]})}),e.jsx("div",{className:"max-w-7xl mx-auto w-full px-2 sm:px-4",children:e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-5 items-start",children:[e.jsxs("div",{className:"lg:col-span-8 flex flex-col gap-3",children:[e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 px-1",children:[e.jsxs("div",{className:"flex items-center gap-1.5 p-1 bg-white dark:bg-slate-900 rounded-full border border-slate-200 dark:border-slate-800 shadow-2xs",children:[e.jsxs("button",{type:"button",onClick:()=>l("point"),className:`relative h-8 inline-flex items-center justify-center gap-1.5 px-3.5 rounded-full text-xs font-bold transition-colors duration-150 cursor-pointer active:scale-95 ${x==="point"?"text-white":"text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white"}`,children:[x==="point"&&e.jsx(H.div,{layoutId:"diagramEditorActiveTool",className:"absolute inset-0 rounded-full bg-blue-600 shadow-xs",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx(fe,{className:"w-4 h-4 relative z-10"}),e.jsx("span",{className:"relative z-10",children:"Ghim Äiá»m"})]}),e.jsxs("button",{type:"button",onClick:()=>l("rectangle"),className:`relative h-8 inline-flex items-center justify-center gap-1.5 px-3.5 rounded-full text-xs font-bold transition-colors duration-150 cursor-pointer active:scale-95 ${x==="rectangle"?"text-white":"text-slate-600 dar
1k:text-slate-400 hover:text-slate-900 dark:hover:text-white"}`,children:[x==="rectangle"&&e.jsx(H.div,{layoutId:"diagramEditorActiveTool",className:"absolute inset-0 rounded-full bg-blue-600 shadow-xs",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx(_e,{className:"w-4 h-4 relative z-10"}),e.jsx("span",{className:"relative z-10",children:"Khoanh vùng"})]}),e.jsxs("button",{type:"button",onClick:()=>l("line"),className:`relative h-8 inline-flex items-center justify-center gap-1.5 px-3.5 rounded-full text-xs font-bold transition-colors duration-150 cursor-pointer active:scale-95 ${x==="line"?"text-white":"text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white"}`,children:[x==="line"&&e.jsx(H.div,{layoutId:"diagramEditorActiveTool",className:"absolute inset-0 rounded-full bg-blue-600 shadow-xs",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx(Be,{className:"w-4 h-4 relative z-10"}),e.jsx("span",{className:"relative z-10",children:"ÄÆ°á»ng chá» dẫn"})]}),e.jsxs("button",{type:"button",onClick:()=>{l("blur"),E("masks")},className:`relative h-8 inline-flex items-center justify-center gap-1.5 px-3.5 rounded-full text-xs font-bold transition-colors duration-150 cursor-pointer active:scale-95 ${x==="blur"?"text-white":"text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white"}`,children:[x==="blur"&&e.jsx(H.div,{layoutId:"diagramEditorActiveTool",className:"absolute inset-0 rounded-full bg-rose-600 shadow-xs",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx(pe,{className:"w-4 h-4 relative z-10"}),e.jsx("span",{className:"relative z-10",children:"Che chữ có sẵn"})]})]}),e.jsxs("div",{className:"text-xs font-semibold text-slate-500 dark:text-slate-400 flex items-center gap-2",children:[x==="point"&&e.jsxs("span",{className:"text-blue-600 dark:text-blue-400 inline-flex items-center gap-1.5 font-bold",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-blue-500 animate-pulse"}),"ð Nhấp chuá»t lên ảnh Äá» ghim Äiá»m tiếp theo"]}),x==="rectangle"&&e.jsxs("span",{className:"text-blue-600 dark:text-blue-400 inline-flex items-center gap-1.5 font-bold",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-blue-500 animate-pulse"}),"ð Kéo thả chuá»t trên ảnh Äá» vẽ vùng chữ nháºt"]}),x==="line"&&e.jsxs("span",{className:"text-blue-600 dark:text-blue-400 inline-flex items-center gap-1.5 font-bold",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-blue-500 animate-pulse"}),"ð Kéo thả chuá»t trên ảnh Äá» vẽ ÄÆ°á»ng chá» dẫn"]}
1),x==="blur"&&e.jsxs("span",{className:"text-rose-600 dark:text-rose-400 inline-flex items-center gap-1.5 font-bold",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-rose-500 animate-pulse"}),"ð Kéo thả chuá»t Äá» che các từ/Äáp án có sẵn"]})]})]}),e.jsx("div",{className:"flex flex-col items-center bg-slate-50 dark:bg-slate-900/50 p-2 sm:p-5 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-inner",children:e.jsx(ht,{diagram:o,mode:"edit",settings:m,activeHotspotId:g,currentTool:x,onAddHotspot:ae,onAddRectangleHotspot:de,onAddLineHotspot:De,onUpdateHotspotLine:Q,onAddBlurMask:he,onDeleteBlurMask:ue,onSelectHotspot:s=>{w(s.id),E("hotspots")},onUpdateHotspotCoords:Ie,onUpdateHotspotDimensions:Ne,onDeleteHotspot:me})})]}),e.jsxs("div",{className:"lg:col-span-4 flex flex-col gap-3",children:[e.jsxs("div",{className:"flex items-center p-1 bg-slate-100 dark:bg-slate-900 rounded-full border border-slate-200/80 dark:border-slate-800",children:[e.jsxs("button",{type:"button",onClick:()=>E("hotspots"),className:`relative flex-1 h-8 inline-flex items-center justify-center gap-1.5 rounded-full text-xs font-bold transition-colors duration-150 cursor-pointer active:scale-95 ${f==="hotspots"?"text-blue-600 dark:text-blue-400":"text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white"}`,children:[f==="hotspots"&&e.jsx(H.div,{layoutId:"diagramEditorSidebarTab",className:"absolute inset-0 rounded-full bg-white dark:bg-slate-800 shadow-2xs",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx(fe,{className:"w-3.5 h-3.5 relative z-10"}),e.jsxs("span",{className:"relative z-10",children:["Äiá»m ghim (",o.hotspots.length,")"]})]}),e.jsxs("button",{type:"button",onClick:()=>E("masks"),className:`relative flex-1 h-8 inline-flex items-center justify-center gap-1.5 rounded-full text-xs font-bold transition-colors duration-150 cursor-pointer active:scale-95 ${f==="masks"?"text-rose-600 dar
1k:text-rose-400":"text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white"}`,children:[f==="masks"&&e.jsx(H.div,{layoutId:"diagramEditorSidebarTab",className:"absolute inset-0 rounded-full bg-white dark:bg-slate-800 shadow-2xs",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx(pe,{className:"w-3.5 h-3.5 relative z-10"}),e.jsxs("span",{className:"relative z-10",children:["Lá»p che (",((ke=o.blurMasks)==null?void 0:ke.length)||0,")"]})]})]}),f==="hotspots"&&e.jsx(e.Fragment,{children:o.hotspots.length===0?e.jsxs("div",{className:"p-6 bg-white dark:bg-[#18181b] rounded-3xl border border-slate-200 dark:border-slate-800 shadow-sm text-center flex flex-col items-center justify-center gap-3 py-8",children:[e.jsx("div",{className:"w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 flex items-center justify-center shadow-inner",children:e.jsx(fe,{className:"w-6 h-6 stroke-[2]"})}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-sm font-extrabold text-slate-900 dark:text-white",children:"ChÆ°a có Äiá»m ghim nà o"}),e.jsx("p",{className:"text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-xs leading-relaxed",children:"Nhấp chuá»t và o bất kỳ vá» trà nà o trên ảnh bên trái Äá» tạo Äiá»m sá» 1, hoặc bấm nút bên dÆ°á»i."})]}),e.jsxs("button",{type:"button",onClick:()=>ae(50,50),className:"mt-1 inline-flex items-center gap-1.5 px-4 h-9 rounded-xl bg-blue-600 hover:bg-blue-700 active:scale-95 text-white text-xs font-bold shadow-sm transition-all duration-150 cursor-pointer",children:[e.jsx(ce,{className:"w-4 h-4 stroke-[2.5]"}),e.jsx("span",{children:"Tạo Äiá»m ghim Äầu tiên"})]})]}):e.jsxs(e.Fragment,{children:[N&&e.jsxs("div",{className:"p-4 sm:p-5 bg-white dark:bg-[#18181b] rounded-3xl border-2 border-blue-500/40 shadow-sm flex flex-col gap-3.5 animate-in fade-in duration-150",children:[e.jsxs("div",{className:"flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-2.5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-600 text-white font-black text-xs shadow-2xs",children:N.index}),e.jsxs("h4",{className:"text-xs sm:text-sm font-extrabold text-slate-900 dark:text-white",children:["Chá»nh sá»a Äiá»m #",N.index]})]}),e.jsx("button",{type:"button",onClick:()=>me(N.id),className:"inline-flex items-center justify-center w-7 h-7 rounded-lg text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-colors cursor-pointer",title:"Xóa Äiá»m ghim nà y",children:e.jsx(je,{className:"w-4 h-4"})})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-[11px] font-bold text-slate-600 dark:text-slate-400 mb-1",children:"Dạng Äiá»m ghim"}),e.jsxs("div",{className:"grid grid-cols-2 gap-1.5 p-1 bg-slate-100 dark:bg-slate-900 rounded-full",children:[e.jsxs("button",{type:"button",onClick:()=>B(N.id,"shape","point"),className:`relative h-7 inline-flex items-center justify-center gap-1.5 rounded-full text-xs font-bold transition-colors duration-150 cursor-pointer active:scale-95 ${(N.shape||"point")==="point"?"text-white":"text-slate-500 hover:text-slate-900 dark:hover:text-white"}`,children:[(N.shape||"point")==="point"&&e.jsx(H.div,{layoutId:"diagramHotspotShapeToggle",className:"absolute inset-0 rounded-full bg-blue-600 shadow-xs",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx(fe,{className:"w-3.5 h-3.5 relative z-10"}),e.jsx("span",{className:"relative z-10",children:"Äiá»m tròn"})]}),e.jsxs("button",{type:"button",onClick:()=>{B(N.id,"shape","rectangle"),N.width||B(N.id,"width",15),N.height||B(N.id,"height",12)},className:`relative h-7 inline-flex items-center justify-center gap-1.5 rounded-full text-xs font-bold transition-colors duration-150 cursor-pointer active:scale-95 ${N.shape==="rectangle"?"text-white":"text-slate-500 hover:text-slate-900 dark:hover:text-white"}`,children:[N.shape==="rectangle"&&e.jsx(H.div,{layoutId:"diagramHotspotShapeToggle",className:"absolute inset-0 rounded-full bg-blue-600 shadow-xs",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx(_e,{className:"w-3.5 h-3.5 relative z-10"}),e.jsx("span",{className:"relative z-10",children:"Vùng chữ nháºt"})]})]})]}),e.jsxs("div",{children:[e.jsxs("label",{className:"block text-xs font-extrabold text-slate-900 dark:text-slate-100 mb-1",children:["Tên vá» trà / Thuáºt ngữ ",e.jsx("span",{className:"text-rose-500",children:"*"})]}),e.jsx("input",{type:"text",value:N.term,onChange:s=>B(N.id,"term",s.target.value),placeholder:"VD: Tâm thất trái, Hà Ná»i...",className:"w-full px-3 py-2 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white font-bold text-xs sm:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 antialiased"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-xs font-bold text-slate-800 dark:text-slate-200 mb-1",children:"Mô tả chức nÄng / Ghi chú (Tùy chá»n)"}),e.jsx("textarea",{rows:2,value:N.definition||"",onChange:s=>B(N.id,"definition",s.target.value),placeholder:"Mô tả chức nÄng, Äặc Äiá»m nháºn dạng...",className:"w-full px-3 py-2 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-100 text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 resize-none antialiased"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-xs font-bold text-slate-800 dark:text-slate-200 mb-1",children:"Gợi ý khi là m bà i (Tùy chá»n)"}),e.jsx("input",{type:"text",value:N.hint||"",onChange:s=>B(N.id,"hint",s.target.value),placeholder:"Gợi ý nhá» khi há»c sinh là m bà i...",className:"w-full px-3 py-1.5 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-100 text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 antialiased"})]}
1),e.jsxs("div",{className:"border-t border-slate-100 dark:border-slate-800 pt-3",children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsxs("label",{className:"text-xs font-bold text-slate-800 dark:text-slate-200 flex items-center gap-1.5",children:[e.jsx(Be,{className:"w-3.5 h-3.5 text-blue-500"}),e.jsx("span",{children:"ÄÆ°á»ng chá» dẫn (Line connector)"})]}),e.jsx("button",{type:"button",onClick:()=>{var i,u;const s=!N.hasLine;Q(N.id,{hasLine:s,targetX:s?(i=N.targetX)!=null?i:Math.min(90,N.x+20):void 0,targetY:s?(u=N.targetY)!=null?u:N.y:void 0,lineStyle:N.lineStyle||"arrow"})},className:`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${N.hasLine?"bg-blue-600":"bg-slate-300 dark:bg-slate-700"}`,children:e.jsx("span",{className:`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out ${N.hasLine?"translate-x-4":"translate-x-0"}`})})]}),N.hasLine&&e.jsxs("div",{className:"flex flex-col gap-2 p-2.5 bg-slate-50 dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800",children:[e.jsx("span",{className:"text-[11px] font-semibold text-slate-500 dark:text-slate-400",children:"Kiá»u ÄÆ°á»ng ná»i Draw.io:"}),e.jsxs("div",{className:"grid grid-cols-4 gap-1 p-1 bg-slate-200/60 dark:bg-slate-800 rounded-lg text-center text-xs",children:[e.jsx("button",{type:"button",onClick:()=>Q(N.id,{lineStyle:"straight"}),className:`py-1 rounded-md font-bold transition-all cursor-pointer ${N.lineStyle==="straight"?"bg-white dark:bg-slate-700 text-blue-600 dark:text-blue-400 shadow-2xs":"text-slate-600 dark:text-slate-400 hover:text-slate-900"}`,title:"ÄÆ°á»ng thẳng",children:"â Thẳng"}),e.jsx("button",{type:"button",onClick:()=>Q(N.id,{lineStyle:"arrow"}),className:`py-1 rounded-md font-bold transition-all cursor-pointer ${(N.lineStyle||"arrow")==="arrow"?"bg-white dark:bg-slate-700 text-blue-600 dark:text-blue-400 shadow-2xs":"text-slate-600 dark:text-slate-400 hover:text-slate-900"}`,title:"MÅ©i tên",children:"â MÅ©i tên"}),e.jsx("button",{type:"button",onClick:()=>Q(N.id,{lineStyle:"orthogonal"}),className:`py-1 rounded-md font-bold transition-all cursor-pointer ${N.lineStyle==="orthogonal"?"bg-white dark:bg-slate-700 text-blue-600 dark:text-blue-400 shadow-2xs":"text-slate-600 dark:text-slate-400 hover:text-slate-900"}`,title:"ÄÆ°á»ng vuông góc 90°",children:"â 90°"}),e.jsx("button",{type:"button",onClick:()=>Q(N.id,{lineStyle:"curved"}),className:`py-1 rounded-md font-bold transition-all cursor-pointer ${N.lineStyle==="curved"?"bg-white dark:bg-slate-700 text-blue-600 dark:text-blue-400 shadow-2xs":"text-slate-600 dark:text-slate-400 hover:text-slate-900"}`,title:"ÄÆ°á»ng cong mượt (S-Curve)",children:"S Cong"})]}),N.lineStyle==="orthogonal"&&e.jsxs("div",{className:"flex items-center justify-between pt-1 text-xs",children:[e.jsx("span",{className:"text-[11px] font-semibold text-slate-500 dark:text-slate-400",children:"HÆ°á»ng rẽ gấp khúc:"}),e.jsx("button",{type:"button",onClick:()=>Q(N.id,{lineOrientation:(N.lineOrientation||"horizontal-first")==="horizontal-first"?"vertical-first":"horizontal-first"}),className:"px-2.5 py-1 rounded-lg bg-blue-50 dark:bg-blue-950/60 text-blue-600 dark:text-blue-400 font-bold hover:bg-blue-100 transition-colors cursor-pointer",children:(N.lineOrientation||"horizontal-first")==="horizontal-first"?"â Ngang trÆ°á»c":"â Dá»c trÆ°á»c"})]}),e.jsx("p",{className:"text-[10px] text-slate-500 dark:text-slate-400",children:"ð¡ Nhấp và o ÄÆ°á»ng chá» dẫn trên ảnh Äá» di chuyá»n Äiá»m Äầu/cuá»i hoặc gấp khúc."})]})]})]}),e.jsxs("div",{className:"p-4 sm:p-5 bg-white dark:bg-[#18181b] rounded-3xl border-2 border-slate-200/90 dark:border-slate-800 shadow-2xs flex flex-col gap-2.5",children:[e.jsxs("div",{className:"flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-2",children:[e.jsxs("h4",{className:"text-xs sm:text-sm font-extrabold text-slate-900 dark:text-white",children:["Danh sách Äiá»m ghim (",o.hotspots.length,")"]}
1),e.jsx("span",{className:"text-[11px] text-slate-600 dark:text-slate-300 font-bold",children:"Äược Äánh sá» 1..N"})]}),e.jsx("div",{className:"flex flex-col gap-1.5 max-h-[280px] overflow-y-auto pr-1",children:o.hotspots.map((s,i)=>e.jsxs("div",{onClick:()=>w(s.id),className:`flex items-center justify-between p-2.5 rounded-xl border transition-all cursor-pointer ${g===s.id?"bg-blue-50 dark:bg-blue-950/50 border-blue-500 text-blue-950 dark:text-white shadow-xs ring-1 ring-blue-400/40":"bg-slate-50 dark:bg-slate-900/70 border-slate-300/80 dark:border-slate-700/80 hover:border-blue-400 text-slate-900 dark:text-slate-100"}`,children:[e.jsxs("div",{className:"flex items-center gap-2 min-w-0",children:[e.jsx("span",{className:"inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-600 text-white font-black text-[11px] shrink-0 shadow-xs",children:s.index}),e.jsxs("div",{className:"flex flex-col min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"text-xs font-bold truncate text-slate-900 dark:text-white",children:s.term}),s.shape==="rectangle"&&e.jsx("span",{className:"px-1.5 py-0.2 rounded bg-blue-100 dark:bg-blue-950/80 text-[9px] font-black text-blue-700 dark:text-blue-300 shrink-0",children:"Vùng"})]}),s.definition&&e.jsx("span",{className:"text-[11px] text-slate-700 dark:text-slate-200 font-medium truncate",children:s.definition})]})]}),e.jsxs("div",{className:"flex items-center gap-0.5 shrink-0 ml-1.5",onClick:u=>u.stopPropagation(),children:[e.jsx("button",{type:"button",disabled:i===0,onClick:()=>V(i,"up"),className:"inline-flex items-center justify-center w-6 h-6 rounded-md text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white hover:bg-slate-200 dark:hover:bg-slate-800 disabled:opacity-20 cursor-pointer transition-colors",title:"Di chuyá»n lên",children:e.jsx(yt,{className:"w-3.5 h-3.5 stroke-[2]"})}),e.jsx("button",{type:"button",disabled:i===o.hotspots.length-1,onClick:()=>V(i,"down"),className:"inline-flex items-center justify-center w-6 h-6 rounded-md text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white hover:bg-slate-200 dark:hover:bg-slate-800 disabled:opacity-20 cursor-pointer transition-colors",title:"Di chuyá»n xuá»ng",children:e.jsx(Je,{className:"w-3.5 h-3.5 stroke-[2]"})}),e.jsx("button",{type:"button",onClick:()=>me(s.id),className:"inline-flex items-center justify-center w-6 h-6 rounded-md text-rose-500 hover:text-rose-700 hover:bg-rose-50 dark:hover:bg-rose-950/50 transition-colors cursor-pointer",title:"Xóa Äiá»m",children:e.jsx(je,{className:"w-3.5 h-3.5"})})]})]},s.id))})]})]})}),f==="masks"&&e.jsxs("div",{className:"p-4 sm:p-5 bg-white dark:bg-[#18181b] rounded-3xl border-2 border-slate-200/90 dark:border-slate-800 shadow-2xs flex flex-col gap-3",children:[e.jsxs("div",{className:"flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-2.5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(pe,{className:"w-4 h-4 text-rose-500"}),e.jsxs("h4",{className:"text-sm font-extrabold text-slate-900 dark:text-white",children:["Lá»p che nhãn (",((Se=o.blurMasks)==null?void 0:Se.length)||0,")"]})]}),e.jsx("button",{type:"button",onClick:()=>l("blur"),className:"h-7 inline-flex items-center gap-1 px-2.5 rounded-lg text-xs font-bold bg-rose-50 dark:bg-rose-950/40 text-rose-600 dar
1k:text-rose-400 hover:bg-rose-100 dark:hover:bg-rose-900/40 active:scale-95 transition-all duration-150 cursor-pointer",children:"+ Vẽ lá»p che má»i"})]}),e.jsx("p",{className:"text-xs text-slate-500 dark:text-slate-400 leading-relaxed",children:"Lá»p che dùng Äá» che chữ, sá» hoặc Äáp án có sẵn trên ảnh gá»c trÆ°á»c khi bắt Äầu há»c hoặc là m bà i kiá»m tra."}),!o.blurMasks||o.blurMasks.length===0?e.jsx("div",{className:"py-8 text-center text-xs text-slate-400 italic",children:'ChÆ°a có lá»p che nà o. Hãy chá»n công cụ "Che chữ có sẵn" và kéo chuá»t trên ảnh Äá» che Äáp án có sẵn.'}):e.jsx("div",{className:"flex flex-col gap-2 max-h-56 overflow-y-auto pr-1",children:o.blurMasks.map((s,i)=>e.jsxs("div",{className:"flex items-center justify-between p-2.5 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 text-xs",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"w-5 h-5 rounded-md bg-rose-100 dark:bg-rose-950/50 text-rose-600 dar
1k:text-rose-400 flex items-center justify-center font-bold text-[10px]",children:["#",i+1]}),e.jsxs("span",{className:"text-slate-700 dark:text-slate-300 font-semibold text-xs",children:["Lá»p che #",i+1]})]}),e.jsx("button",{type:"button",onClick:()=>ue(s.id),className:"inline-flex items-center justify-center w-6 h-6 rounded-lg text-rose-400 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/50 transition-colors cursor-pointer",title:"Xóa lá»p che nà y",children:e.jsx(je,{className:"w-3.5 h-3.5"})})]},s.id))})]})]})]})}),e.jsx(tt,{isOpen:X,title:"LÆ°u thay Äá»i trÆ°á»c khi rá»i?",message:"Bạn vừa chá»nh sá»a sÆ¡ Äá». Hãy lÆ°u thay Äá»i trÆ°á»c khi chuyá»n sang mà n hình khác.",confirmText:"LÆ°u và rá»i",cancelText:"Tiếp tục chá»nh sá»a",variant:"warning",onConfirm:Le,onCancel:He})]})},Ut=({isOpen:c,onClose:m,diagram:n})=>{var x;const[D,h]=r.useState(()=>n?`PHIẾU BÃI TẬP: ${n.title.toUpperCase()}`:""),[d,S]=r.useState(!0),[v,k]=r.useState("TRƯá»NG ....................................................."),[o,y]=r.useState("Em hãy quan sát các vá» trà Äược Äánh sá» trên sÆ¡ Äá» và Äiá»n tên bá» pháºn / thuáºt ngữ tÆ°Æ¡ng ứng và o bảng bên dÆ°á»i:");r.useEffect(()=>{if(!c)return;const l=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=l}},[c]),r.useEffect(()=>{n&&h(`PHIẾU BÃI TẬP: ${n.title.toUpperCase()}`)},[n]);const g=()=>{window.print()},w=e.jsx(te,{children:c&&n&&e.jsxs(H.div,{className:"fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 overflow-y-auto",children:[e.jsx(H.div,{initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},onClick:m,className:"fixed inset-0 bg-slate-950/70 print:hidden"},"diagram-print-backdrop"),e.jsxs(H.div,{initial:{opacity:0,scale:.94,y:16},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.94,y:16},transition:{type:"spring",damping:25,stiffness:350},className:"relative z-10 bg-white dark:bg-[#18181b] rounded-3xl border border-slate-200 dark:border-slate-800 shadow-2xl w-full max-w-4xl p-4 sm:p-6 flex flex-col gap-5 my-auto max-h-[92vh] overflow-y-auto",onClick:l=>l.stopPropagation(),children:[e.jsxs("div",{className:"flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3 print:hidden",children:[e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx("div",{className:"w-8 h-8 rounded-full bg-rose-500/15 text-rose-600 dark:text-rose-400 flex items-center justify-center",children:e.jsx(Nt,{className:"w-4 h-4"})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-base font-black text-slate-900 dark:text-white",children:"Xuất Phiếu Bà i Táºp / In PDF"}),e.jsx("p",{className:"text-xs text-slate-400",children:"Tạo phiếu bà i táºp chuẩn A4 có sÆ¡ Äá» Äánh sá» và dòng kẻ Äiá»n Äáp án"})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{type:"button",onClick:g,className:"h-9 inline-flex items-center justify-center gap-2 px-4 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs shadow-xs transition-all cursor-pointer",children:[e.jsx(Ee,{className:"w-4 h-4 stroke-2"}),e.jsx("span",{children:"In / LÆ°u PDF"})]}),e.jsx("button",{type:"button",onClick:m,className:"w-8 h-8 rounded-xl inline-flex items-center justify-center text-slate-400 hover:text-slate-700 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer",children:e.jsx(xe,{className:"w-5 h-5"})})]})]}),e.jsxs("div",{className:"p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex flex-col gap-3 print:hidden",children:[e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-3",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-xs font-bold text-slate-500 dark:text-slate-400 mb-1",children:"Tiêu Äá» bà i kiá»m tra"}),e.jsx("input",{type:"text",value:D,onChange:l=>h(l.target.value),className:"w-full px-3 py-1.5 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-xs font-bold text-slate-900 dark:text-white"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-xs font-bold text-slate-500 dark:text-slate-400 mb-1",children:"Tên trÆ°á»ng / ÄÆ¡n vá»"}),e.jsx("input",{type:"text",value:v,onChange:l=>k(l.target.value),className:"w-full px-3 py-1.5 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-xs font-bold text-slate-900 dark:text-white"})]})]}),e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-1",children:[e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("label",{className:"block text-xs font-bold text-slate-500 dark:text-slate-400 mb-1",children:"Lá»i dặn / Yêu cầu bà i táºp"}),e.jsx("input",{type:"text",value:o,onChange:l=>y(l.target.value),className:"w-full px-3 py-1.5 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-xs text-slate-800 dark:text-slate-200"})]}),e.jsx("div",{className:"flex items-center gap-3 pt-2 sm:pt-4 shrink-0",children:e.jsxs("label",{className:"flex items-center gap-2 text-xs font-bold text-slate-700 dark:text-slate-300 cursor-pointer",children:[e.jsx("input",{type:"checkbox",checked:d,onChange:l=>S(l.target.checked),className:"w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500"}),e.jsx("span",{children:"In kèm Trang Äáp án (Answer Key)"})]})})]})]}),e.jsxs("div",{className:"bg-white text-slate-900 p-8 rounded-2xl border border-slate-200 shadow-inner flex flex-col gap-6 printable-worksheet font-sans",children:[e.jsxs("div",{className:"flex justify-between items-start border-b-2 border-slate-900 pb-4",children:[e.jsxs("div",{className:"flex flex-col gap-1",children:[e.jsx("span",{className:"text-xs font-bold uppercase tracking-wider",children:v}),e.jsxs("span",{className:"text-xs font-semibold",children:["Môn há»c: ",n.subject||"Khoa há»c Tá»± nhiên"]})]}),e.jsxs("div",{className:"flex flex-col gap-1 text-xs text-right",children:[e.jsx("div",{children:"Há» và tên: .............................................................."}),e.jsx("div",{children:"Lá»p: ........................ Ngà y: ...... / ...... / 20......"})]})]}),e.jsxs("div",{className:"text-center flex flex-col gap-1",children:[e.jsx("h1",{className:"text-xl font-black tracking-wide uppercase",children:D}),e.jsx("p",{className:"text-xs italic text-slate-600",children:o})]}),e.jsxs("div",{className:"relative inline-block mx-auto max-w-full rounded-xl overflow-hidden border border-slate-300",children:[e.jsx("img",{src:et(n.imageUrl),alt:n.title,className:"block max-h-[380px] w-auto object-contain mx-auto"}
1),(x=n.blurMasks)==null?void 0:x.map(l=>e.jsx("div",{style:{left:`${l.x}%`,top:`${l.y}%`,width:`${l.width}%`,height:`${l.height}%`},className:"absolute z-10 bg-white border border-dashed border-slate-400",title:"Vùng che nhãn in sẵn"},l.id)),n.hotspots.map(l=>{if(l.shape==="rectangle")return e.jsx("div",{style:{left:`${l.x}%`,top:`${l.y}%`,width:`${l.width||12}%`,height:`${l.height||10}%`},className:"absolute z-20 rounded-md border-2 border-dashed border-black",children:e.jsx("div",{className:"absolute -top-3 -left-3 flex items-center justify-center w-6 h-6 rounded-full bg-white text-black font-black text-xs border-2 border-black shadow-xs",children:l.index})},l.id);const f=typeof l.width=="number"&&l.width>0;return e.jsx("div",{style:{left:`${l.x}%`,top:`${l.y}%`,transform:"translate(-50%, -50%)",width:f?`${l.width}%`:void 0,aspectRatio:f?"1 / 1":void 0},className:`absolute z-20 flex items-center justify-center rounded-full bg-white text-black font-black text-xs border-2 border-black shadow-md ${f?"":"w-7 h-7"}`,children:l.index},l.id)})]}),e.jsxs("div",{className:"mt-2",children:[e.jsx("h4",{className:"text-xs font-black uppercase tracking-wider mb-2",children:"Phần trả lá»i của há»c sinh:"}),e.jsx("div",{className:"grid grid-cols-2 gap-x-8 gap-y-3",children:n.hotspots.map(l=>e.jsxs("div",{className:"flex items-center gap-2 border-b border-dashed border-slate-400 pb-1",children:[e.jsxs("span",{className:"font-black text-xs min-w-[24px]",children:["[",l.index,"]"]}),e.jsx("span",{className:"text-xs text-slate-400 italic",children:"..........................................................................."})]},l.id))})]}),d&&e.jsxs("div",{className:"mt-8 pt-6 border-t-2 border-dashed border-slate-400 flex flex-col gap-3 page-break-before",children:[e.jsxs("div",{className:"flex items-center justify-between border-b border-slate-300 pb-2",children:[e.jsx("h3",{className:"text-sm font-black text-slate-800 uppercase",children:"ÄÃP ÃN THAM KHẢO CHO GIÃO VIÃN (ANSWER KEY)"}),e.jsxs("span",{className:"text-xs font-bold text-slate-500",children:["SÆ¡ Äá»: ",n.title]})]}),e.jsx("div",{className:"grid grid-cols-2 gap-3 mt-1",children:n.hotspots.map(l=>e.jsxs("div",{className:"p-2.5 rounded-lg bg-slate-50 border border-slate-200 flex flex-col",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"flex items-center justify-center w-5 h-5 rounded-full bg-slate-800 text-white font-bold text-[11px]",children:l.index}),e.jsx("span",{className:"text-xs font-black text-slate-900",children:l.term})]}),l.definition&&e.jsx("span",{className:"text-[11px] text-slate-600 mt-1 pl-7",children:l.definition})]},l.id))})]})]})]},"diagram-print-dialog"),e.jsx("style",{children:` 2 @media print { 3 body * { 4 visibility: hidden; 5 } 6 .printable-worksheet, .printable-worksheet * { 7 visibility: visible; 8 } 9 .printable-worksheet { 10 position: absolute; 11 left: 0; 12 top: 0; 13 width: 100% !important; 14 padding: 15mm !important; 15 margin: 0 !important; 16 border: none !important; 17 box-shadow: none !important; 18 } 19 .page-break-before { 20 page-break-before: always; 21 } 22 } 23 `})]})});return typeof document=="undefined"?null:Te.createPortal(w,document.body)},Ft=({isOpen:c,onClose:m,diagram:n})=>{const D=we(),[h,d]=r.useState(null),[S,v]=r.useState(!1);r.useEffect(()=>{if(!c)return;const g=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=g}},[c]);const k=r.useCallback(()=>G(null,null,function*(){const g=document.getElementById("diagram-pure-canvas")||document.getElementById("diagram-canvas-wrapper")||document.querySelector(".diagram-canvas-container");if(!g){D.error("Không tìm thấy vùng sÆ¡ Äá» Äá» xem trÆ°á»c");return}try{v(!0);const w=yield Ze(g,{quality:.98,pixelRatio:2,backgroundColor:"#ffffff",filter:x=>{var l;return!(x instanceof HTMLElement&&(x.hasAttribute("data-export-ignore")||x.classList.contains("diagram-export-ignore")||x.tagName==="BUTTON"&&((l=x.textContent)!=null&&l.includes("Phóng to"))))}});d(w)}catch(w){D.error("Không thá» tạo bản xem trÆ°á»c ảnh sÆ¡ Äá»")}finally{v(!1)}}),[D]);r.useEffect(()=>{if(c){const g=setTimeout(()=>{k()},100);return()=>clearTimeout(g)}else d(null)},[c,k]);const o=()=>
23{if(!(!h||!n))try{const g=n.title.trim().replace(/[\\/:*?"<>|]/g,"_"),w=document.createElement("a");w.download=`${g}_diagram.png`,w.href=h,w.click(),D.success("Äã tải ảnh sÆ¡ Äá» PNG thà nh công!"),m()}catch(g){D.error("Không thá» tải xuá»ng file ảnh PNG")}},y=e.jsx(te,{children:c&&n&&e.jsxs(H.div,{className:"fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4",children:[e.jsx(H.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},onClick:m,className:"fixed inset-0 bg-slate-950/70"},"diagram-export-backdrop"),e.jsxs(H.div,{initial:{opacity:0,scale:.94,y:16},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.94,y:16},transition:{type:"spring",damping:25,stiffness:350},className:"relative z-10 bg-white dark:bg-[#18181b] rounded-3xl border border-slate-200 dark:border-slate-800 shadow-2xl w-full max-w-xl p-5 flex flex-col gap-4 max-h-[92vh] overflow-hidden",onClick:g=>g.stopPropagation(),children:[e.jsxs("div",{className:"flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3",children:[e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx("div",{className:"w-8 h-8 rounded-full bg-blue-500/15 text-blue-600 dark:text-blue-400 flex items-center justify-center",children:e.jsx(Ct,{className:"w-4 h-4"})}),e.jsxs("div",{children:[e.jsx("h3",{className:"font-extrabold text-sm text-slate-900 dark:text-white",children:"Tải ảnh sÆ¡ Äá» PNG"}),e.jsx("p",{className:"text-[11px] text-slate-500 font-medium",children:"Äá» nét cao (2x Retina), phông ná»n trắng tiêu chuẩn"})]})]}),e.jsx("button",{"data-ui-close-button":!0,type:"button",onClick:m,className:"w-8 h-8 rounded-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer",children:e.jsx(xe,{className:"w-5 h-5"})})]}),e.jsx("div",{className:"relative w-full rounded-2xl bg-slate-100 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 min-h-[220px] max-h-[55vh] flex items-center justify-center p-3 overflow-hidden",children:S?e.jsxs("div",{className:"flex flex-col items-center gap-3 py-10",children:[e.jsx("div",{className:"w-8 h-8 border-3 border-blue-600 border-t-transparent rounded-full animate-spin"}),e.jsxs("div",{className:"flex items-center gap-1.5 text-xs font-bold text-slate-600 dark:text-slate-400",children:[e.jsx(Qe,{className:"w-4 h-4 text-amber-500"}),e.jsx("span",{children:"Äang xá» lý ảnh chất lượng cao..."})]})]}):h?e.jsx("img",{src:h,alt:n.title,className:"max-h-[50vh] object-contain rounded-xl shadow-md"}):e.jsx("div",{className:"p-6 text-center text-xs text-slate-500 font-medium",children:"Không thá» tải bản xem trÆ°á»c"})}),e.jsxs("div",{className:"flex items-center justify-end gap-2.5 pt-1",children:[e.jsx("button",{type:"button",onClick:m,className:"px-4 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold text-xs transition-all cursor-pointer",children:"Hủy"}),e.jsxs("button",{type:"button",disabled:S||!h,onClick:o,className:"px-5 h-9 rounded-xl bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-bold text-xs inline-flex items-center gap-1.5 shadow-md active:scale-98 transition-all cursor-pointer",children:[e.jsx(ze,{className:"w-4 h-4 stroke-[2.5]"}),e.jsx("span",{children:"Tải ảnh PNG"})]})]})]},"diagram-export-dialog")]})});return typeof document=="undefined"?null:Te.createPortal(y,document.body)},Bt=({isOpen:c,onClose:m,subjects:n,diagrams:D,onAddSubject:h,onDeleteSubject:d,onSelectSubject:S})=>{const[v,k]=r.useState(""),[o,y]=r.useState(""),g=r.useRef(null);r.useEffect(()=>{c&&(k(""),y(""),setTimeout(()=>{var f;return(f=g.current)==null?void 0:f.focus()},80))},[c]),r.useEffect(()=>{if(!c)return;const f=document.body.style.overflow;document.body.style.overflow="hidden";const E=A=>{A.key==="Escape"&&m()};return window.addEventListener("keydown",E),()=>{document.body.style.overflow=f,window.removeEventListener("keydown",E)}},[c,m]);const w={};D.forEach(f=>{var A;const E=(A=f.subject)==null?void 0:A.trim();if(E){const q=E.toLowerCase();w[q]=(w[q]||0)+1}});const x=f=>{f&&f.preventDefault(),y("");const E=v.trim();
23if(!E){y("Vui lòng nháºp tên chủ Äá»");return}const A=h(E);A.success?(k(""),S&&(S(A.formattedName),m())):y(A.message||"Không thá» tạo chủ Äá»")},l=e.jsx(te,{children:c&&e.jsxs(H.div,{className:"fixed inset-0 z-50 flex items-center justify-center p-4",children:[e.jsx(H.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},onClick:m,className:"fixed inset-0 bg-slate-950/60"},"diagram-subject-backdrop"),e.jsxs(H.div,{initial:{opacity:0,scale:.94,y:16},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.94,y:16},transition:{type:"spring",damping:25,stiffness:350},className:"relative z-10 bg-white dark:bg-[#18181b] rounded-3xl border border-slate-200 dark:border-slate-800 shadow-2xl w-full max-w-md p-6 flex flex-col gap-5 max-h-[90vh]",onClick:f=>f.stopPropagation(),children:[e.jsxs("div",{className:"flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3",children:[e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx("div",{className:"w-8 h-8 rounded-xl bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 inline-flex items-center justify-center",children:e.jsx(Ye,{className:"w-4 h-4"})}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-base font-black text-slate-900 dark:text-white",children:"Quản lý Chủ Äá»"}),e.jsx("p",{className:"text-xs text-slate-600 dark:text-slate-300 font-medium",children:"Thêm hoặc quản lý các môn há»c / chủ Äá» sÆ¡ Äá»"})]})]}),e.jsx("button",{type:"button",onClick:m,className:"w-8 h-8 rounded-xl inline-flex items-center justify-center text-slate-400 hover:text-slate-700 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer",children:e.jsx(xe,{className:"w-5 h-5"})})]}),e.jsxs("form",{onSubmit:x,className:"flex flex-col gap-2",children:[e.jsxs("label",{className:"text-xs font-extrabold text-slate-800 dark:text-slate-200 flex items-center gap-1.5",children:[e.jsx(St,{className:"w-3.5 h-3.5 text-blue-500"}),e.jsx("span",{children:"Tên chủ Äá» má»i"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{ref:g,type:"text",value:v,onChange:f=>{k(f.target.value),o&&y("")},placeholder:"VD: Lá»ch sá», Hóa há»c, Y há»c...",maxLength:40,className:"flex-1 h-10 px-3.5 rounded-xl bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 text-xs sm:text-sm font-semibold text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-2xs"}),e.jsxs("button",{type:"submit",disabled:!v.trim(),className:"h-10 px-4 rounded-xl bg-blue-600 hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs font-bold transition-all duration-150 inline-flex items-center gap-1.5 shrink-0 cursor-pointer shadow-xs active:scale-95",children:[e.jsx(ce,{className:"w-4 h-4 stroke-2"}),e.jsx("span",{children:"Thêm"})]})]}),o&&e.jsxs("p",{className:"text-xs text-rose-500 font-medium flex items-center gap-1 mt-0.5",children:[e.jsx(Et,{className:"w-3.5 h-3.5 shrink-0"}),e.jsx("span",{children:o})]})]}),e.jsxs("div",{className:"flex flex-col gap-2 min-h-0",children:[e.jsx("div",{className:"flex items-center justify-between",children:e.jsxs("span",{className:"text-xs font-extrabold text-slate-700 dark:text-slate-300",children:["Danh sách chủ Äá» hiá»n có (",n.length,")"]})}),e.jsx("div",{className:"overflow-y-auto max-h-60 pr-1 flex flex-col gap-1.5 scrollbar-thin",children:n.length===0?e.jsx("div",{className:"p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/40 text-center text-xs text-slate-400",children:"ChÆ°a có chủ Äá» nà o Äược tạo. Hãy nháºp tên á» trên Äá» thêm chủ Äá» Äầu tiên!"}):n.map(f=>{const E=w[f.toLowerCase()]||0;return e.jsxs("div",{className:"group flex items-center justify-between px-3.5 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 hover:bg-blue-50/50 dark:hover:bg-blue-950/20 border border-slate-200/70 dark:border-slate-800 transition-all",children:[e.jsxs("div",{className:"flex items-center gap-2 min-w-0 flex-1 cursor-pointer",onClick:()=>{S&&(S(f),m())},title:"Bấm Äá» lá»c theo chủ Äá» nà y",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-blue-500 shrink-0"}),e.jsx("span",{className:"text-xs sm:text-sm font-semibold text-slate-800 dark:text-slate-200 truncate",children:f}),e.jsxs("span",{className:"px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-200/80 dark:bg-slate-700/80 text-slate-600 dar
23k:text-slate-300 shrink-0",children:[E," sÆ¡ Äá»"]})]}),e.jsx("button",{type:"button",onClick:()=>d(f),className:"w-7 h-7 inline-flex items-center justify-center rounded-lg text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-colors cursor-pointer ml-2",title:E>0?`Xóa khá»i danh mục lÆ°u (có ${E} sÆ¡ Äá» Äang dùng)`:"Xóa chủ Äá»",children:e.jsx(je,{className:"w-3.5 h-3.5"})})]},f)})})]}),e.jsx("div",{className:"pt-2 border-t border-slate-100 dark:border-slate-800 text-[11px] text-slate-400",children:"Chủ Äá» Äược lÆ°u trữ và o bá» nhá» trình duyá»t và Äá»ng bá» vá»i các sÆ¡ Äá» của bạn."})]},"diagram-subject-dialog")]})});return typeof document=="undefined"?null:Te.createPortal(l,document.body)},qt=c=>G(null,null,function*(){var n;if((n=navigator.clipboard)!=null&&n.writeText){yield navigator.clipboard.writeText(c);return}const m=document.createElement("textarea");m.value=c,m.style.position="fixed",m.style.opacity="0",document.body.appendChild(m),m.select(),document.execCommand("copy"),m.remove()}),Vt=({diagram:c,isOpen:m,onClose:n,onDiagramUpdated:D})=>{var F,O;const h=we(),[d,S]=r.useState(c),[v,k]=r.useState(!1),[o,y]=r.useState(!1),[g,w]=r.useState(""),[x,l]=r.useState("editor"),f=r.useRef(null);r.useEffect(()=>S(c),[c]),r.useEffect(()=>{if(!m||d.remoteId||!K.canSync())return;let b=!0;return k(!0),K.saveDiagram(d).then(j=>{b&&(S(j),D(j))}).catch(()=>{b&&h.error("Không thá» Äá»ng bá» sÆ¡ Äá» lên cloud. Hãy kiá»m tra kết ná»i và ÄÄng nháºp lại.")}).finally(()=>{b&&k(!1)}),()=>{b=!1}},[m,D,h,d]),r.useEffect(()=>{var R;if(!m)return;const b=document.body.style.overflow;document.body.style.overflow="hidden",(R=f.current)==null||R.focus();const j=P=>{P.key==="Escape"&&n()};return window.addEventListener("keydown",j),()=>{document.body.style.overflow=b,window.removeEventListener("keydown",j)}},[m,n]);const E=r.useMemo(()=>!d.shareToken||typeof window=="undefined"?"":`${window.location.origin}/diagram/share/${d.shareToken}`,[d.shareToken]),A=b=>{S(b),D(b)},q=()=>G(null,null,function*(){if(d.remoteId){y(!0);try{const b=yield K.updateShare(d,{enabled:!0});A(b),h.success("Äã tạo link chia sẻ công khai.")}catch(b){h.error(b instanceof Error?b.message:"Không thá» tạo link chia sẻ.")}finally{y(!1)}}}),I=()=>G(null,null,function*(){if(d.remoteId){y(!0);try{const b=yield K.updateShare(d,{enabled:!1});A(b),h.success("Äã tắt link chia sẻ công khai.")}catch(b){h.error(b instanceof Error?b.message:"Không thá» tắt link chia sẻ.")}finally{y(!1)}}}),_=()=>G(null,null,function*(){if(d.remoteId){y(!0);try{const b=yield K.updateShare(d,{enabled:!0,rotate:!0});A(b),h.success("Äã là m má»i link chia sẻ. Link cÅ© Äã bá» vô hiá»u hóa.")}catch(b){h.error(b instanceof Error?b.message:"Không thá» là m má»i link chia sẻ.")}finally{y(!1)}}}),J=b=>G(null,null,function*(){if(b.preventDefault(),!(!g.trim()||!d.remoteId)){y(!0);try{const j=yield K.addCollaborator(d,g.trim(),x);A(j),w(""),h.success("Äã cấp quyá»n cho cá»ng tác viên.")}catch(j){h.error(j instanceof Error?j.message:"Không thá» cấp quyá»n cá»ng tác.")}finally{y(!1)}}}),U=b=>G(null,null,function*(){y(!0);try{A(yield K.removeCollaborator(d,b))}catch(j){h.error(j instanceof Error?j.message:"Không thá» gỡ cá»ng tác viên.")}finally{y(!1)}}),X=!d.accessRole||d.accessRole==="owner",W=!K.canSync(),Y=e.jsx(te,{children:m&&e.jsx(H.div,{initial:{opacity:0}
23,animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},className:"fixed inset-0 z-[120] flex items-center justify-center p-4 bg-slate-950/65 backdrop-blur-md",role:"presentation",onMouseDown:b=>{b.target===b.currentTarget&&n()},children:e.jsxs(H.section,{role:"dialog","aria-modal":"true","aria-labelledby":"diagram-share-title",initial:{opacity:0,scale:.92,y:20},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.94,y:16},transition:{type:"spring",stiffness:350,damping:28},className:"relative w-full max-w-lg rounded-3xl border border-slate-200/90 bg-white p-5 shadow-2xl dark:border-slate-800 dark:bg-slate-900 sm:p-6",children:[e.jsxs("div",{className:"flex items-start justify-between gap-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"flex h-10 w-10 items-center justify-center rounded-2xl bg-blue-50 text-blue-600 dark:bg-blue-950/50 dark:text-blue-300",children:e.jsx(Tt,{className:"h-5 w-5"})}),e.jsxs("div",{children:[e.jsx("h2",{id:"diagram-share-title",className:"text-base font-black text-slate-900 dark:text-white",children:"Chia sẻ & cá»ng tác"}),e.jsx("p",{className:"mt-0.5 text-xs text-slate-500 dark:text-slate-400",children:d.title})]})]}),e.jsx(H.button,{ref:f,whileHover:{scale:1.1,rotate:90},whileTap:{scale:.9},transition:{type:"spring",stiffness:400,damping:25},type:"button",onClick:n,className:"w-9 h-9 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors cursor-pointer","aria-label":"Äóng",children:e.jsx(xe,{className:"h-5 w-5"})})]}),W?e.jsx("p",{className:"mt-5 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-200",children:"ÄÄng nháºp Äá» Äá»ng bá» sÆ¡ Äá» và chia sẻ cho ngÆ°á»i khác."}):v?e.jsx("p",{className:"mt-5 rounded-2xl bg-slate-100 px-4 py-3 text-sm font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-300",children:"Äang chuẩn bá» bản cloud an toà nâ¦"}):X?e.jsxs("div",{className:"mt-5 space-y-5",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between gap-3",children:[e.jsx("h3",{className:"text-sm font-extrabold text-slate-900 dark:text-white",children:"Link công khai (chá» xem)"}),E&&e.jsxs("span",{className:"inline-flex items-center gap-1 text-[11px] font-bold text-emerald-600 dark:text-emerald-400",children:[e.jsx(Re,{className:"h-3.5 w-3.5"}),"Äang báºt"]})]}),E?e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex gap-2",children:[e.jsx("input",{readOnly:!0,value:E,className:"min-w-0 flex-1 rounded-2xl border border-slate-200 bg-slate-50 px-3.5 py-2.5 text-xs text-slate-700 outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 font-mono select-all","aria-label":"Link chia sẻ"}),e.jsxs("button",{type:"button",onClick:()=>{qt(E).then(()=>h.success("Äã sao chép link chia sẻ.")).catch(()=>h.error("Không thá» sao chép link."))},className:"inline-flex items-center gap-1.5 rounded-2xl bg-blue-600 px-4 py-2.5 text-xs font-bold text-white hover:bg-blue-700 disabled:opacity-60 shrink-0 transition-colors cursor-pointer",disabled:o,children:[e.jsx(qe,{className:"h-4 w-4"}),"Sao chép"]})]}),e.jsxs("div",{className:"flex items-center justify-end gap-2.5 text-xs",children:[e.jsxs("button",{type:"button",onClick:()=>{_()},disabled:o,className:"inline-flex items-center gap-1 text-slate-600 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-400 transition-colors disabled:opacity-50 cursor-pointer font-medium",title:"Tạo link má»i và vô hiá»u hóa link cÅ©",children:[e.jsx(Pe,{className:`h-3.5 w-3.5 ${o?"animate-spin":""}`}),e.jsx("span",{children:"Äá»i link má»i"})]}),e.jsx("span",{className:"text-slate-300 dark:text-slate-700",children:"â¢"}),e.jsxs("button",{type:"button",onClick:()=>{I()},disabled:o,className:"inline-flex items-center gap-1 text-rose-600 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300 transition-colors disabled:opacity-50 cursor-pointer font-medium",title:"Tắt link chia sẻ công khai",children:[e.jsx(Dt,{className:"h-3.5 w-3.5"}),e.jsx("span",{children:"Tắt chia sẻ"})]})]})]}):e.jsxs("button",{type:"button",onClick:()=>{q()},disabled:o||!d.remoteId,className:"inline-flex h-11 items-center gap-2 rounded-2xl bg-blue-600 px-4.5 text-xs font-bold text-white hover:bg-blue-700 disabled:opacity-60 transition-colors cursor-pointer shadow-md shadow-blue-500/20",children:[e.jsx(qe,{className:"h-4 w-4"}),"Tạo link chá» xem"]})]}),e.jsxs("form",{onSubmit:J,className:"border-t border-slate-200 pt-5 dark:border-slate-800",children:[e.jsx("h3",{className:"text-sm font-extrabold text-slate-900 dark:text-white",children:"Má»i cá»ng tác viên"}),e.jsx("p",{className:"mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400",children:"NgÆ°á»i Äược má»i cần có tà i khoản FlipLab. Quyá»n sá»a Äược Äá»ng bá» realtime trên các thiết bá»."}),e.jsxs("div",{className:"mt-3 flex flex-col gap-2 sm:flex-row",children:[e.jsx("input",{required:!0,type:"email",value:g,onChange:b=>w(b.target.value),placeholder:"[email protected]",className:"h-10 min-w-0 flex-1 rounded-2xl border border-slate-200 bg-white px-3.5 text-sm text-slate-900 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-slate-700 dark:bg-slate-800 dark:text-white"}),e.jsxs("select",{value:x,onChange:b=>l(b.target.value),className:"h-10 rounded-2xl border border-slate-200 bg-white px-3.5 text-sm font-medium text-slate-700 outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200",children:[e.jsx("option",{value:"editor",children:"Có thá» sá»a"}),e.jsx("option",{value:"viewer",children:"Chá» xem"})]}),e.jsxs("button",{disabled:o||!d.remoteId,className:"inline-flex h-10 items-center justify-center gap-1.5 rounded-2xl bg-slate-900 px-4 text-xs font-bold text-white hover:bg-slate-700 disabled:opacity-60 dark:bg-white dark:text-slate-900 cursor-pointer shadow-sm",children:[e.jsx(It,{className:"h-4 w-4"}),"Má»i"]})]})]}),(((F=d.collaborators)==null?void 0:F.length)||0)>0&&e.jsxs("div",{className:"border-t border-slate-200 pt-4 dark:border-slate-800",children:[e.jsx("h3",{className:"text-sm font-extrabold text-slate-900 dark:text-white",children:"Äang có quyá»n truy cáºp"}),e.jsx("ul",{className:"mt-2 space-y-2",children:(O=d.collaborators)==null?void 0:O.map(b=>e.jsxs("li",{className:"flex items-center justify-between gap-3 rounded-2xl bg-slate-50 px-3.5 py-2.5 dark:bg-slate-800/70 border border-slate-100 dar
23k:border-slate-800",children:[e.jsx("span",{className:"min-w-0 truncate text-xs font-medium text-slate-600 dark:text-slate-300",children:b.displayName||b.email||`Tà i khoản · ${b.userId.slice(-8)}`}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-[11px] font-bold text-slate-500",children:b.role==="editor"?"Có thá» sá»a":"Chá» xem"}),e.jsx("button",{type:"button",disabled:o,onClick:()=>{U(b.userId)},className:"text-xs font-bold text-rose-600 hover:text-rose-700 disabled:opacity-60 cursor-pointer",children:"Gỡ"})]})]},b.userId))})]})]}):e.jsxs("p",{className:"mt-5 rounded-2xl bg-slate-100 px-4 py-3 text-sm font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-300",children:["Bạn có quyá»n ",d.accessRole==="editor"?"chá»nh sá»a":"xem"," sÆ¡ Äá» nà y. Chá» chủ sá» hữu má»i Äá»i quyá»n chia sẻ."]})]})})});return typeof document=="undefined"?null:Te.createPortal(Y,document.body)},Me=[{id:"newest",label:"Má»i nhất"},{id:"oldest",label:"CÅ© nhất"},{id:"az",label:"Tên (A - Z)"},{id:"hotspots",label:"Nhiá»u vá» trà nhất"}],Xt=({value:c,onChange:m})=>{const[n,D]=r.useState(!1),h=r.useRef(null);r.useEffect(()=>{if(!n)return;const S=k=>{h.current&&!h.current.contains(k.target)&&D(!1)},v=k=>{k.key==="Escape"&&D(!1)};return document.addEventListener("mousedown",S),document.addEventListener("touchstart",S,{passive:!0}),document.addEventListener("keydown",v),()=>{document.removeEventListener("mousedown",S),document.removeEventListener("touchstart",S),document.removeEventListener("keydown",v)}},[n]);const d=Me.find(S=>S.id===c)||Me[0];return e.jsxs("div",{className:"relative inline-block text-left",ref:h,children:[e.jsxs("button",{type:"button",onClick:()=>D(S=>!S),className:"h-9 sm:h-10 inline-flex items-center gap-1.5 sm:gap-2 px-3 sm:px-3.5 rounded-xl bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-400 text-xs text-slate-800 dark:text-slate-100 font-bold shadow-2xs hover:shadow-xs transition-colors duration-150 active:scale-95 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500/20","aria-haspopup":"listbox","aria-expanded":n,children:[e.jsx(Mt,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4 text-blue-600 dark:text-blue-400 shrink-0 stroke-[2]"}),e.jsx("span",{className:"text-slate-700 dark:text-slate-300 font-bold hidden sm:inline",children:"Sắp xếp:"}),e.jsx("span",{className:"text-slate-900 dark:text-white font-extrabold",children:d.label}),e.jsx(Je,{className:`w-3.5 h-3.5 text-slate-600 dark:text-slate-400 transition-transform duration-200 ${n?"rotate-180":""}`})]}),e.jsx(te,{children:n&&e.jsx(H.div,{initial:{opacity:0,scale:.95,y:-4},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.95,y:-4},transition:{duration:.15,ease:"easeOut"},className:"absolute left-0 sm:left-auto sm:right-0 top-full mt-1.5 w-52 sm:w-48 max-w-[calc(100vw-2rem)] rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-xl dark:shadow-2xl p-1.5 z-50",role:"listbox",children:Me.map(S=>{const v=S.id===c;return e.jsxs("button",{type:"button",onClick:()=>{m(S.id),D(!1)},className:`w-full px-3 py-2.5 rounded-xl text-left text-xs font-semibold flex items-center justify-between cursor-pointer transition-colors ${v?"bg-blue-50 dark:bg-blue-950/80 text-blue-700 dark:text-blue-300 font-bold":"text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-950 dark:hover:text-white active:bg-slate-100 dark:active:bg-slate-800"}`,role:"option","aria-selected":v,children:[e.jsx("span",{className:"truncate",children:S.label}),v&&e.jsx(Re,{className:"w-4 h-4 text-blue-600 dark:text-blue-400 stroke-[2.5] shrink-0 ml-2"})]},S.id)})})})]})},Wt=({imageUrl:c,title:m,subject:n})=>{const[D,h]=r.useState(!1),d=r.useMemo(()=>et(c),[c]);return r.useEffect(()=>{h(!1)},[d]),D||!d?e.jsxs("div",{className:"w-full h-full flex flex-col items-center justify-center p-4 bg-gradient-to-br from-slate-800 to-slate-950 text-center select-none",children:[e.jsx("div",{className:"w-10 h-10 rounded-xl bg-blue-500/20 border border-blue-400/30 flex items-center justify-center mb-2 text-blue-400",children:e.jsx(Qe,{className:"w-5 h-5"})}),e.jsx("span",{className:"text-xs font-bold text-slate-200 line-clamp-1 px-2",children:m}),e.jsx("span",{className:"text-[10px] text-slate-400 mt-0.5",children:n||"SÆ¡ Äá»"})]}):e.jsx("img",{src:d,alt:m,onError:()=>h(!0),className:"w-full h-full object-contain transition-transform duration-300 group-hover:scale-[1.03]"})},gs=({initialMode:c})=>{const{id:m}=it(),[n]=ot(),D=dt(),h=ct(),d=we(),{isAuthenticated:S}=At(),{socket:v}=_t(),k=D.pathname.endsWith("/edit"),o=n.get("mode"),y=k?"edit":o||c||"explore",[g,w]=r.useState([]),[x,l]=r.useState(null),[f,E]=r.useState(y),[A,q]=r.useState(()=>{try{const t=localStorage.getItem("fliplab_diagram_settings");if(t)return M(M({},Ke),JSON.parse(t))}catch(t){}return Ke}),[I,_]=r.useState(!1),[J,U]=r.useState(!1),[X,W]=r.useState(!1),[Y,F]=r.useState(!0),[O,b]=r.useState(""),[j,R]=r.useState("all"),[P,ie]=r.useState("newest"),[se,ye]=r.useState(!1),[ge,oe]=r.useState(null),[ae,de]=r.useState(null),[De,Q]=r.useState(!1),[he,ue]=r.useState(()=>le.getAllSubjects());r.useEffect(()=>{ue(le.getAllSubjects(g))},[g]);const{subjectCountMap:Ie,uncategorizedCount:Ne}=r.useMemo(()=>{const t={};let a=0;return g.forEach(p=>{var T;const z=(T=p.subject)==null?void 0:T.trim();if(z){const L=z.toLowerCase();t[L]=(t[L]||0)+1}else a++}),{subjectCountMap:t,uncategorizedCount:a}},[g]);r.useEffect(()=>{j!=="all"&&j!=="__uncategorized__"&&!he.some(t=>t.toLowerCase()===j.toLowerCase())&&R("all")},[he,j]);const B=r.useCallback(()=>G(null,null,function*(){F(!0);try{const t=S?yield K.syncLocalDiagrams():yield ee.getDiagrams();return w(t),t}catch(t){const a=yield ee.getDiagrams();return w(a.length>0?a:Ue),a.length>0?a:Ue}finally{F(!1)}}),[S]);r.useEffect(()=>{if(!v)return;const t=T=>{!T.diagram||T.sourceClientId===K.getClientInstanceId()||(ee.saveDiagram(T.diagram),w(L=>L.some(re=>re.id===T.diagram.id)?L.map(re=>re.id===T.diagram.id?T.diagram:re):[T.diagram,...L]),l(L=>!L||L.id!==T.diagram.id?L:f==="edit"?(d.info("Cá»ng tác viên vừa cáºp nháºt phiên bản má»i của sÆ¡ Äá» nà y."),L):T.diagram))},a=T=>{T.remoteId&&(w(L=>L.filter(Z=>Z.remoteId!==T.remoteId)),l(L=>(L==null?void 0:L.remoteId)===T.remoteId?(d.info("SÆ¡ Äá» nà y Äã bá» xóa."),h("/diagram"),null):L))},p=T=>{T.remoteId&&(w(L=>L.filter(Z=>Z.remoteId!==T.remoteId)),l(L=>(L==null?void 0:L.remoteId)===T.remoteId?(d.info("Quyá»n truy cáºp sÆ¡ Äá» nà y Äã bá» thu há»i bá»i chủ sá» hữu."),h("/diagram"),null):L))},z=T=>{T.diagram&&(ee.saveDiagram(T.diagram),w(L=>[T.diagram,...L.filter(Z=>Z.id!==T.diagram.id)]))};return v.on("DIAGRAM_UPDATED",t),v.on("DIAGRAM_DELETED",a),v.on("DIAGRAM_SHARED",z),v.on("DIAGRAM_ACCESS_REVOKED",p),()=>{v.off("DIAGRAM_UPDATED",t),v.off("DIAGRAM_DELETED",a),v.off("DIAGRAM_SHARED",z),v.off("DIAGRAM_ACCESS_REVOKED",p)}},[f,h,v,d]),r.useEffect(()=>{let t=!0;return B().then(a=>{if(t)if(m){const p=a.find(z=>z.id===m);p?l(p):(d.error("Không tìm thấy sÆ¡ Äá» yêu cầu"),l(null))}else l(p=>p&&!a.some(z=>z.id===p.id)?p:null)}),()=>{t=!1}},[m,B,d]),r.useEffect(()=>zt.on("diagram:exit_request",()=>{x?(l(null),h("/diagram")):h("/app")}
23),[x,h]),r.useEffect(()=>{if(!ae)return;const t=()=>de(null);return window.addEventListener("click",t),()=>window.removeEventListener("click",t)},[ae]),r.useEffect(()=>{const t=n.get("mode");D.pathname.endsWith("/edit")||t==="edit"||c==="edit"?E("edit"):t&&E(t)},[D.pathname,n,c]),r.useEffect(()=>{(x==null?void 0:x.accessRole)==="viewer"&&f==="edit"&&(E("explore"),h(`/diagram/${x.id}`,{replace:!0}))},[x,f,h]);const me=t=>{q(a=>{const p=M(M({},a),t);try{localStorage.setItem("fliplab_diagram_settings",JSON.stringify(p))}catch(z){}return p})},V=t=>{if(t==="edit"&&(x==null?void 0:x.accessRole)==="viewer"){d.error("Bạn chá» có quyá»n xem sÆ¡ Äá» nà y.");return}E(t),x&&h(t==="edit"?`/diagram/${x.id}/edit`:`/diagram/${x.id}`)},be=()=>{h("/diagram/create")},Ce=t=>G(null,null,function*(){const a=K.canSync()?yield K.saveDiagram(t):t;yield ee.saveDiagram(a),l(a),yield B(),E("explore"),h(`/diagram/${a.id}`)}),Le=(t,a)=>{a&&a.stopPropagation(),oe(t)},He=()=>G(null,null,function*(){if(!ge)return;const t=ge;oe(null);try{const a=g.find(p=>p.id===t)||x;a?yield K.deleteDiagram(a):yield ee.deleteDiagram(t),d.success("Äã xóa sÆ¡ Äá» thà nh công"),yield B(),(x==null?void 0:x.id)===t&&(l(null),h("/diagram"))}catch(a){d.error("Không thá» xóa sÆ¡ Äá»")}}),N=(t,a)=>G(null,null,function*(){a&&a.stopPropagation();try{const p=yield ee.duplicateDiagram(t.id);p&&(K.canSync()&&(yield K.saveDiagram(p)),d.success(`Äã nhân bản sÆ¡ Äá» "${t.title}"`),yield B())}catch(p){d.error("Không thá» nhân bản sÆ¡ Äá»")}}),ke=(t,a="explore")=>{l(t),E(a),h(a==="edit"?`/diagram/${t.id}/edit`:`/diagram/${t.id}`)},Se=t=>{const a=le.addSubject(t);return a.success&&(d.success(`Äã thêm chủ Äá» "${a.formattedName}"`),ue(le.getAllSubjects(g))),a},s=t=>{le.deleteSubject(t),d.info(`Äã xóa chủ Äá» "${t}"`);const a=le.getAllSubjects(g);ue(a),j.toLowerCase()===t.toLowerCase()&&R("all")},i=()=>{R("all"),b("")},u=r.useMemo(()=>{const t=O.toLowerCase().trim();return g.filter(a=>{var T,L,Z;const p=!t||a.title.toLowerCase().includes(t)||a.subject&&a.subject.toLowerCase().includes(t)||a.description&&a.description.toLowerCase().includes(t)||((T=a.hotspots)==null?void 0:T.some(re=>re.term.toLowerCase().includes(t)||re.definition&&re.definition.toLowerCase().includes(t)));let z=!0;return j==="all"?z=!0:j==="__uncategorized__"?z=!((L=a.subject)!=null&&L.trim()):z=((Z=a.subject)==null?void 0:Z.trim().toLowerCase())===j.toLowerCase(),p&&z}).sort((a,p)=>{var z,T;return P==="newest"?new Date(p.createdAt||0).getTime()-new Date(a.createdAt||0).getTime():P==="oldest"?new Date(a.createdAt||0).getTime()-new Date(p.createdAt||0).getTime():P==="az"?a.title.localeCompare(p.title,"vi"):P==="hotspots"?(((z=p.hotspots)==null?void 0:z.length)||0)-(((T=a.hotspots)==null?void 0:T.length)||0):0})},[g,O,j,P]),C=r.useMemo(()=>{const t=O.toLowerCase().trim();return t?g.filter(a=>{var p;return a.title.toLowerCase().includes(t)||a.subject&&a.subject.toLowerCase().includes(t)||a.description&&a.description.toLowerCase().includes(t)||((p=a.hotspots)==null?void 0:p.some(z=>z.term.toLowerCase().includes(t)||z.definition&&z.definition.toLowerCase().includes(t)))}).length:g.length},[g,O]);return e.jsx(xt,{isFullscreen:!!x,children:e.jsxs("div",{className:`w-full ${x?"min-h-screen flex flex-col overflow-x-hidden overflow-y-auto bg-slate-50 dark:bg-slate-950":"min-h-[85vh] flex flex-col"}`,children:[x?e.jsxs("div",{className:"flex flex-col flex-1 w-full",children:[f!=="edit"&&e.jsx(Rt,{diagram:x,currentMode:f,onChangeMode:V,onOpenSettings:()=>_(!0),onOpenPrint:()=>U(!0),onOpenExportPng:()=>W(!0),onOpenShare:()=>Q(!0),onCreateNew:be,onBackToLibrary:()=>{l(null),h("/diagram")}}),e.jsxs("div",{className:`flex-1 w-full ${f==="edit"?"":"max-w-[1450px] mx-auto px-2 sm:px-4 py-2 sm:py-3"}`,children:[f==="explore"&&e.jsx(ut,{diagram:x,settings:A,onUpdateSettings:me}),f==="match"&&e.jsx(mt,{diagram:x,settings:A,onExit:()=>V("explore"),onGoToEdit:()=>V("edit")}),f==="quiz"&&e.jsx(bt,{diagram:x,settings:A,onGoToEdit:()=>V("edit"),onExit:()=>V("explore")}),f==="write"&&e.jsx(pt,{diagram:x,settings:A,onGoToEdit:()=>V("edit"),onExit:()=>V("explore")}),f==="edit"&&e.jsx(Kt,{diagram:x,settings:A,onSave:Ce,onAutoSave:t=>G(null,null,function*(){const p=K.canSync()?yield K.saveDiagram(t):t;l(p),w(z=>z.map(T=>T.id===p.id?p:T))}),onCancel:()=>V("explore"),onBackToLibrary:()=>
23{l(null),h("/diagram")},currentMode:f,onChangeMode:V,onOpenSettings:()=>_(!0),onOpenPrint:()=>U(!0)})]}),e.jsx(ft,{isOpen:I,onClose:()=>_(!1),settings:A,onUpdateSettings:me}),e.jsx(Ut,{isOpen:J,onClose:()=>U(!1),diagram:x}),e.jsx(Ft,{isOpen:X,onClose:()=>W(!1),diagram:x}),e.jsx(Vt,{isOpen:De,diagram:x,onClose:()=>Q(!1),onDiagramUpdated:t=>{l(t),w(a=>a.map(p=>p.id===t.id?t:p))}})]}):e.jsxs("div",{className:"max-w-7xl mx-auto w-full flex flex-col gap-6 py-6 px-3 sm:px-6",children:[e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4 pb-1",children:[e.jsxs("div",{className:"flex items-start sm:items-center gap-2.5 sm:gap-3 min-w-0",children:[e.jsx("div",{className:"w-10 h-10 sm:w-11 sm:h-11 rounded-2xl bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0 border border-blue-100 dark:border-blue-900/50",children:e.jsx(fe,{className:"w-6 h-6 sm:w-7 sm:h-7"})}),e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2 flex-wrap",children:[e.jsx("h1",{className:"text-lg sm:text-2xl font-black tracking-tight text-slate-900 dark:text-white",children:"SÆ¡ Äá» TÆ°Æ¡ng tác"}),e.jsxs("span",{className:"px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400 border border-blue-200/60 dark:border-blue-900/40",children:[g.length," sÆ¡ Äá»"]})]}),e.jsx("p",{className:"text-xs sm:text-sm text-slate-600 dark:text-slate-300 font-medium mt-0.5 line-clamp-1 sm:line-clamp-none",children:"Ghi nhá» trá»±c quan cấu trúc giải phẫu, Äá»a lý và sÆ¡ Äá» qua 4 chế Äá» tÆ°Æ¡ng tác"})]})]}),e.jsx("div",{className:"flex items-center gap-2 shrink-0 self-stretch sm:self-auto justify-end",children:e.jsxs("button",{type:"button",onClick:be,className:"flex-1 sm:flex-initial inline-flex items-center justify-center gap-1.5 sm:gap-2 px-3.5 sm:px-4 h-10 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs sm:text-sm transition-colors duration-150 active:scale-95 shadow-sm cursor-pointer whitespace-nowrap",children:[e.jsx(ce,{className:"w-4 h-4 stroke-[2.5]"}),e.jsx("span",{children:"Tạo sÆ¡ Äá» má»i"})]})})]}),e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsxs("div",{className:"flex items-center gap-1.5 sm:gap-2 overflow-x-auto pb-1.5 pt-0.5 scrollbar-none touch-pan-x overscroll-x-contain -mx-3 px-3 sm:mx-0 sm:px-0",children:[e.jsxs("button",{type:"button",onClick:()=>R("all"),className:`relative h-9 sm:h-10 inline-flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 roun
23ded-xl text-xs font-bold whitespace-nowrap transition-colors duration-150 active:scale-95 cursor-pointer shrink-0 ${j==="all"?"text-white":"bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-700 shadow-2xs"}`,children:[j==="all"&&e.jsx(H.div,{layoutId:"activeSubjectTab",className:"absolute inset-0 rounded-xl bg-blue-600 shadow-sm ring-2 ring-blue-500/20",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx("span",{className:"relative z-10",children:"Tất cả"}),e.jsx("span",{className:`relative z-10 px-1.5 sm:px-2 py-0.5 rounded-full text-[10px] font-black ${j==="all"?"bg-white/25 text-white":"bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-300/60 dark:border-slate-600"}`,children:g.length})]}),he.map(t=>{const a=j.toLowerCase()===t.toLowerCase(),p=Ie[t.toLowerCase()]||0;return e.jsxs("button",{type:"button",onClick:()=>R(t),className:`relative h-9 sm:h-10 inline-flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 roun
23ded-xl text-xs font-bold whitespace-nowrap transition-colors duration-150 active:scale-95 cursor-pointer shrink-0 ${a?"text-white":"bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-700 shadow-2xs"}`,children:[a&&e.jsx(H.div,{layoutId:"activeSubjectTab",className:"absolute inset-0 rounded-xl bg-blue-600 shadow-sm ring-2 ring-blue-500/20",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx("span",{className:"relative z-10",children:t}),e.jsx("span",{className:`relative z-10 px-1.5 sm:px-2 py-0.5 rounded-full text-[10px] font-black ${a?"bg-white/25 text-white":"bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-300/60 dark:border-slate-600"}`,children:p})]},t)}),Ne>0&&e.jsxs("button",{type:"button",onClick:()=>R("__uncategorized__"),className:`relative h-9 sm:h-10 inline-flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 rounded-xl text-xs font-bold whitespace-nowrap transition-colors duration-150 active:scale-95 cursor-pointer shrink-0 ${j==="__uncategorized__"?"text-white":"bg-amber-50 dark:bg-amber-950/40 hover:bg-amber-100/80 text-amber-800 dark:text-amber-200 border border-amber-300/80 dark:border-amber-800/60"}`,children:[j==="__uncategorized__"&&e.jsx(H.div,{layoutId:"activeSubjectTab",className:"absolute inset-0 rounded-xl bg-amber-600 shadow-sm",transition:{type:"spring",stiffness:500,damping:35}}),e.jsx("span",{className:"relative z-10",children:"ChÆ°a phân loại"}),e.jsx("span",{className:`relative z-10 px-1.5 sm:px-2 py-0.5 rounded-full text-[10px] font-black ${j==="__uncategorized__"?"bg-white/25 text-white":"bg-amber-200 dark:bg-amber-800 text-amber-900 dark:text-amber-100"}`,children:Ne})]}),e.jsxs("button",{type:"button",onClick:()=>ye(!0),className:"h-9 sm:h-10 inline-flex items-center gap-1 px-2.5 sm:px-3.5 rounded-xl border-2 border-dashed border-slate-300 dark:border-slate-700 hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-950/40 text-slate-800 dark:text-slate-200 hover:text-blue-600 dark:hover:text-blue-400 text-xs font-extrabold whitespace-nowrap transition-colors duration-150 active:scale-95 cursor-pointer shrink-0 ml-0.5 bg-white dark:bg-slate-900/60",title:"Thêm hoặc quản lý các chủ Äá»",children:[e.jsx(ce,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4 stroke-[2.5]"}),e.jsx("span",{children:"Chủ Äá»"})]})]}),e.jsxs("div",{className:"flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2.5 sm:gap-3 pt-1",children:[e.jsx("div",{className:"relative flex-1 max-w-full sm:max-w-md",children:e.jsxs("div",{className:"relative flex items-center rounded-xl bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20 shadow-2xs transition-all h-10 overflow-hidden",children:[e.jsx(We,{className:"w-4 h-4 text-blue-600 dark:text-blue-400 absolute left-3.5 pointer-events-none stroke-[2]"}),e.jsx("input",{type:"text",value:O,onChange:t=>b(t.target.value),placeholder:"Tìm theo tiêu Äá», chủ Äá», thuáºt ngữ...",className:"w-full h-full pl-10 pr-9 bg-transparent text-xs sm:text-sm font-semibold text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none"}),O&&e.jsx("button",{type:"button",onClick:()=>b(""),className:"inline-flex items-center justify-center w-6 h-6 absolute right-2.5 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 cursor-pointer rounded-full transition-colors hover:bg-slate-100 dark:hover:bg-slate-800",title:"Xóa tìm kiếm",children:e.jsx(xe,{className:"w-4 h-4"})})]})}),e.jsxs("div",{className:"flex items-center justify-between sm:justify-end gap-2.5 shrink-0",children:[e.jsx(Xt,{value:P,onChange:t=>ie(t)}),e.jsxs("span",{className:"text-xs text-slate-700 dark:text-slate-300 font-extrabold whitespace-nowrap pl-1",children:[u.length," / ",g.length," sÆ¡ Äá»"]})]})]}),(j!=="all"||O.trim())&&e.jsxs("div",{className:"flex items-center gap-2 flex-wrap pt-1 text-xs",children:[e.jsx("span",{className:"text-slate-700 dark:text-slate-300 font-extrabold",children:"Äang lá»c:"}),j!=="all"&&e.jsxs("span",{className:"inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-blue-50 dark:bg-blue-950/60 text-blue-700 dark:text-blue-300 border border-blue-200/80 dark:border-blue-900/60 font-bold",children:[e.jsxs("span",{children:["Chủ Äá»: ",j==="__uncategorized__"?"ChÆ°a phân loại":j]}),e.jsx("button",{type:"button",onClick:()=>R("all"),className:"w-3.5 h-3.5 inline-flex items-center justify-center text-blue-500 hover:text-blue-800 dark:hover:text-blue-200 cursor-pointer",title:"Bá» lá»c chủ Äá»",children:e.jsx(xe,{className:"w-3 h-3"})})]}),O.trim()&&e.jsxs("span",{className:"inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-slate-100 dar
23k:bg-slate-800 text-slate-800 dark:text-slate-200 border border-slate-200 dark:border-slate-700 font-bold",children:[e.jsxs("span",{children:['Từ khóa: "',O,'"']}),e.jsx("button",{type:"button",onClick:()=>b(""),className:"w-3.5 h-3.5 inline-flex items-center justify-center text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 cursor-pointer",title:"Bá» tìm kiếm",children:e.jsx(xe,{className:"w-3 h-3"})})]}),e.jsxs("button",{type:"button",onClick:i,className:"inline-flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline font-extrabold ml-1 cursor-pointer",children:[e.jsx(Pe,{className:"w-3.5 h-3.5 stroke-[2]"}),e.jsx("span",{children:"Äặt lại bá» lá»c"})]})]}),j!=="all"&&O.trim()&&u.length===0&&C>0&&e.jsxs("div",{className:"flex items-center justify-between p-3 rounded-2xl bg-blue-50/80 dark:bg-blue-950/40 border border-blue-200 dark:border-blue-900/60 text-xs text-blue-800 dark:text-blue-200 animate-in fade-in duration-150",children:[e.jsx("div",{className:"flex items-center gap-2",children:e.jsxs("span",{className:"font-semibold",children:['Không có kết quả trong chủ Äá» "',j==="__uncategorized__"?"ChÆ°a phân loại":j,'". Tìm thấy ',C," sÆ¡ Äá» phù hợp á» chủ Äá» khác."]})}),e.jsxs("button",{type:"button",onClick:()=>R("all"),className:"px-3 py-1 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold cursor-pointer transition-colors shadow-2xs shrink-0",children:["Xem tất cả ",C," kết quả"]})]})]}),Y?e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5",children:[1,2,3].map(t=>e.jsx("div",{className:"h-72 rounded-[2rem] bg-slate-100 dark:bg-slate-800/50 animate-pulse border-2 border-slate-200/60 dark:border-slate-800/60"},t))}):u.length===0?e.jsxs("div",{className:"py-16 text-center flex flex-col items-center justify-center gap-3 bg-white dark:bg-[#18181b] rounded-[2rem] border-2 border-slate-200/80 dark:border-slate-800",children:[e.jsx("div",{className:"w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-950/40 flex items-center justify-center text-blue-600 dark:text-blue-400",children:j!=="all"&&!O?e.jsx(Ye,{className:"w-6 h-6 stroke-[1.5]"}):e.jsx(Lt,{className:"w-6 h-6 stroke-[1.5]"})}),j!=="all"&&!O?e.jsxs(e.Fragment,{children:[e.jsxs("h3",{className:"text-sm font-extrabold text-slate-900 dark:text-slate-100",children:['ChÆ°a có sÆ¡ Äá» nà o thuá»c chủ Äá» "',j==="__uncategorized__"?"ChÆ°a phân loại":j,'"']}),e.jsx("p",{className:"text-xs text-slate-600 dark:text-slate-300 font-medium max-w-sm",children:"Chủ Äá» nà y hiá»n Äang trá»ng. Bạn có thá» tạo sÆ¡ Äá» má»i cho chủ Äá» nà y ngay bây giá»!"}),e.jsxs("div",{className:"flex items-center gap-2 mt-2",children:[e.jsxs("button",{type:"button",onClick:()=>h(`/diagram/create${j!=="__uncategorized__"?`?subject=${encodeURIComponent(j)}`:""}`),className:"inline-flex items-center justify-center gap-1.5 px-5 h-10 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold transition-all cursor-pointer shadow-sm hover:scale-105 hover:-translate-y-0.5 active:scale-95 hover:shadow-md",children:[e.jsx(ce,{className:"w-4 h-4 stroke-2"}),e.jsx("span",{children:"Tạo sÆ¡ Äá» cho chủ Äá» nà y"})]}),e.jsx("button",{type:"button",onClick:()=>R("all"),className:"inline-flex items-center justify-center px-4 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 text-slate-700 dark:text-slate-300 text-xs font-bold transition-all cursor-pointer hover:scale-105 hover:-translate-y-0.5 active:scale-95 shadow-2xs hover:shadow-xs",children:e.jsx("span",{children:"Xem tất cả"})})]})]}):e.jsxs(e.Fragment,{children:[e.jsx("h3",{className:"text-sm font-extrabold text-slate-900 dark:text-slate-100",children:"Không tìm thấy sÆ¡ Äá» nà o"}),e.jsx("p",{className:"text-xs text-slate-600 dark:text-slate-300 font-medium max-w-sm",children:"Hãy thá» tìm kiếm vá»i từ khóa khác hoặc Äặt lại các bá» lá»c Äang chá»n."}),e.jsxs("div",{className:"flex items-center gap-2 mt-2",children:[e.jsxs("button",{type:"button",onClick:i,className:"inline-flex items-center justify-center gap-1.5 px-4 h-10 rounded-xl bg-slate-100 dar
23k:bg-slate-800 hover:bg-slate-200 text-slate-700 dark:text-slate-300 text-xs font-bold transition-all cursor-pointer hover:scale-105 hover:-translate-y-0.5 active:scale-95 shadow-2xs hover:shadow-xs",children:[e.jsx(Pe,{className:"w-4 h-4"}),e.jsx("span",{children:"Äặt lại bá» lá»c"})]}),e.jsxs("button",{type:"button",onClick:be,className:"inline-flex items-center justify-center gap-1.5 px-5 h-10 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold transition-all cursor-pointer shadow-sm hover:scale-105 hover:-translate-y-0.5 active:scale-95 hover:shadow-md",children:[e.jsx(ce,{className:"w-4 h-4 stroke-2"}),e.jsx("span",{children:"Tạo sÆ¡ Äá» má»i"})]})]})]})]}):e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5",children:[u.map(t=>e.jsxs("div",{onClick:()=>ke(t,"explore"),className:`group relative flex flex-col p-3.5 sm:p-4 bg-white dark:bg-slate-800/90 rounded-[2rem] border-2 border-slate-200/90 dark:border-slate-700/80 hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer justify-between h-full ${ae===t.id?"z-30":"z-10"}`,children:[e.jsxs("div",{className:"relative aspect-[16/10] w-full shrink-0",children:[e.jsx("div",{className:"absolute inset-0 rounded-[1.4rem] bg-slate-900 dark:bg-slate-950 overflow-hidden border border-slate-100 dark:border-slate-700/60 flex items-center justify-center",children:e.jsx(Wt,{imageUrl:t.imageUrl,title:t.title,subject:t.subject})}),e.jsxs("div",{className:"absolute top-2.5 right-2.5 z-30",onClick:a=>a.stopPropagation(),children:[e.jsx("button",{type:"button",onClick:()=>de(ae===t.id?null:t.id),className:"inline-flex items-center justify-center w-8 h-8 sm:w-7 sm:h-7 rounded-full bg-slate-950/80 hover:bg-slate-950 text-white backdrop-blur-md border border-white/30 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all cursor-pointer shadow-md active:scale-95",title:"Tùy chá»n sÆ¡ Äá»","aria-label":"Tùy chá»n sÆ¡ Äá»",children:e.jsx(Ht,{className:"w-4 h-4 stroke-[2.5]"})}),e.jsx(te,{children:ae===t.id&&e.jsxs(H.div,{initial:{opacity:0,scale:.94,y:-6},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.94,y:-6},transition:{duration:.15,ease:"easeOut"},className:"absolute right-0 top-9 sm:top-8 w-48 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl py-1.5 z-50",children:[e.jsxs("button",{type:"button",onClick:()=>{de(null),ke(t,"edit")},className:"w-full px-3.5 py-2 text-left text-xs font-medium text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-950 dark:hover:text-white flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(ve,{className:"w-3.5 h-3.5 text-slate-500 shrink-0"}),e.jsx("span",{children:"Chá»nh sá»a"})]}),e.jsxs("button",{type:"button",onClick:a=>{de(null),N(t,a)},className:"w-full px-3.5 py-2 text-left text-xs font-medium text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-950 dark:hover:text-white flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(_e,{className:"w-3.5 h-3.5 text-slate-500 shrink-0"}),e.jsx("span",{children:"Nhân bản sÆ¡ Äá»"})]}),e.jsxs("button",{type:"button",onClick:a=>{de(null),Le(t.id,a)},className:"w-full px-3.5 py-2 text-left text-xs font-medium text-rose-600 dar
23k:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/50 flex items-center gap-2.5 cursor-pointer transition-colors",children:[e.jsx(je,{className:"w-3.5 h-3.5 text-rose-600 dark:text-rose-400 shrink-0"}),e.jsx("span",{children:"Xóa sÆ¡ Äá»"})]})]})})]})]}),e.jsx("div",{className:"pt-3.5 pb-1 px-1 flex-1 flex flex-col justify-between gap-2",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1.5",children:[e.jsxs("span",{className:"inline-flex items-center gap-1 text-[11px] font-black text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/60 px-2.5 py-0.5 rounded-full border border-blue-200/80 dark:border-blue-900/60",children:[e.jsx(fe,{className:"w-3 h-3"}),t.hotspots.length," vá» trÃ"]}),t.subject&&e.jsxs("span",{className:"text-[11px] font-extrabold text-slate-700 dark:text-slate-200",children:["⢠",t.subject]})]}),e.jsx("h3",{className:"text-base font-extrabold text-slate-900 dark:text-white line-clamp-1 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors tracking-tight antialiased",children:t.title}),t.description&&e.jsx("p",{className:"text-xs text-slate-700 dark:text-slate-200 line-clamp-2 mt-1 leading-relaxed antialiased font-medium",children:t.description})]})})]},t.id)),e.jsxs("button",{type:"button",onClick:be,className:"group border-2 border-dashed border-slate-300 dark:border-slate-700/80 hover:border-blue-400 dark:hover:border-blue-500 rounded-[2rem] p-6 flex flex-col items-center justify-center gap-3.5 text-slate-700 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300 hover:-translate-y-1 cursor-pointer min-h-[260px] bg-slate-50/50 dark:bg-slate-900/20 hover:bg-blue-50/20 dark:hover:bg-blue-950/10",children:[e.jsx("div",{className:"w-12 h-12 rounded-2xl bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 group-hover:scale-110 transition-all shadow-2xs",children:e.jsx(ce,{className:"w-5 h-5 stroke-[2]"})}),e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"text-sm font-bold text-slate-800 dark:text-slate-200 group-hover:text-blue-600 dark:group-hover:text-blue-400",children:"Tạo sÆ¡ Äá» má»i"}),e.jsx("div",{className:"text-[11px] text-slate-600 dark:text-slate-400 font-medium mt-1",children:"Tải ảnh lên và gắn nhãn các vá» trÃ"})]})]})]})]}),e.jsx(tt,{isOpen:!!ge,title:"Xóa sÆ¡ Äá»",message:"Bạn có chắc chắn muá»n xóa sÆ¡ Äá» nà y không? Hà nh Äá»ng nà y không thá» hoà n tác.",confirmText:"Xóa sÆ¡ Äá»",cancelText:"Hủy",variant:"danger",onConfirm:He,onCancel:()=>oe(null)}),e.jsx(Bt,{isOpen:se,onClose:()=>ye(!1),subjects:he,diagrams:g,onAddSubject:Se,onDeleteSubject:s,onSelectSubject:t=>R(t)})]})})};export{gs as DiagramWorkspacePage,gs as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.