@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/components/CreatorGuide.js

@@ -1 +1,103 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r}from"react";import{Lightbulb as o,ChevronDown as a}from"lucide-react";import{Collapsible as l,CollapsibleTrigger as i,CollapsibleContent as n}from"../../../components/ui/collapsible";import{cn as d}from"../../../shared/lib/utils";const g={blue:{border:"border-blue-200",bg:"bg-gradient-to-r from-blue-50 to-indigo-50",icon:"bg-blue-100 text-blue-600",title:"text-blue-800",dot:"bg-blue-400",text:"text-blue-700",tipBg:"bg-blue-100/60",tipText:"text-blue-700",hoverBg:"hover:from-blue-100/80 hover:to-indigo-100/60"},purple:{border:"border-purple-200",bg:"bg-gradient-to-r from-purple-50 to-violet-50",icon:"bg-purple-100 text-purple-600",title:"text-purple-800",dot:"bg-purple-400",text:"text-purple-700",tipBg:"bg-purple-100/60",tipText:"text-purple-700",hoverBg:"hover:from-purple-100/80 hover:to-violet-100/60"},emerald:{border:"border-emerald-200",bg:"bg-gradient-to-r from-emerald-50 to-teal-50",icon:"bg-emerald-100 text-emerald-600",title:"text-emerald-800",dot:"bg-emerald-400",text:"text-emerald-700",tipBg:"bg-emerald-100/60",tipText:"text-emerald-700",hoverBg:"hover:from-emerald-100/80 hover:to-teal-100/60"},amber:{border:"border-amber-200",bg:"bg-gradient-to-r from-amber-50 to-orange-50",icon:"bg-amber-100 text-amber-600",title:"text-amber-800",dot:"bg-amber-400",text:"text-amber-700",tipBg:"bg-amber-100/60",tipText:"text-amber-700",hoverBg:"hover:from-amber-100/80 hover:to-orange-100/60"},cyan:{border:"border-cyan-200",bg:"bg-gradient-to-r from-cyan-50 to-sky-50",icon:"bg-cyan-100 text-cyan-600",title:"text-cyan-800",dot:"bg-cyan-400",text:"text-cyan-700",tipBg:"bg-cyan-100/60",tipText:"text-cyan-700",hoverBg:"hover:from-cyan-100/80 hover:to-sky-100/60"},rose:{border:"border-rose-200",bg:"bg-gradient-to-r from-rose-50 to-pink-50",icon:"bg-rose-100 text-rose-600",title:"text-rose-800",dot:"bg-rose-400",text:"text-rose-700",tipBg:"bg-rose-100/60",tipText:"text-rose-700",hoverBg:"hover:from-rose-100/80 hover:to-pink-100/60"},teal:{border:"border-teal-200",bg:"bg-gradient-to-r from-teal-50 to-emerald-50",icon:"bg-teal-100 text-teal-600",title:"text-teal-800",dot:"bg-teal-400",text:"text-teal-700",tipBg:"bg-teal-100/60",tipText:"text-teal-700",hoverBg:"hover:from-teal-100/80 hover:to-emerald-100/60"},orange:{border:"border-orange-200",bg:"bg-gradient-to-r from-orange-50 to-amber-50",icon:"bg-orange-100 text-orange-600",title:"text-orange-800",dot:"bg-orange-400",text:"text-orange-700",tipBg:"bg-orange-100/60",tipText:"text-orange-700",hoverBg:"hover:from-orange-100/80 hover:to-amber-100/60"}};export function CreatorGuide({steps:b,tips:m=[],colorScheme:s="blue"}){const[p,x]=r(!1),c=g[s];return e(l,{open:p,onOpenChange:x,children:t("div",{className:d("rounded-xl border shadow-sm overflow-hidden",c.border,c.bg),children:[e(i,{asChild:!0,children:t("button",{type:"button",className:d("flex w-full items-center gap-3 px-5 py-3.5 transition-colors cursor-pointer",c.bg,c.hoverBg),children:[e("div",{className:d("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg",c.icon),children:e(o,{className:"h-4 w-4"})}),e("span",{className:d("text-sm font-semibold flex-1 text-left",c.title),children:"Hướng dẫn tạo câu hỏi"}),e(a,{className:d("h-4 w-4 transition-transform duration-200",c.text,p&&"rotate-180")})]})}),e(n,{children:e("div",{className:"px-5 pb-4 pt-0",children:t("div",{className:"ml-11 space-y-1.5",children:[b.map((r,o)=>t("div",{className:"flex items-start gap-2.5",children:[e("span",{className:d("mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full",c.dot)}),e("span",{className:d("text-sm leading-relaxed",c.text,r.highlight&&"font-semibold"),children:r.text})]},o)),m.length>0&&e("div",{className:d("mt-3 rounded-lg px-3 py-2",c.tipBg),children:m.map((r,o)=>t("div",{className:"flex items-start gap-2",children:[e("span",{className:"text-sm",children:"💡"}),t("span",{className:d("text-sm font-medium",c.tipText),children:[e("strong",{children:"Mẹo:"})," ",r]})]},o))})]})})})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Lightbulb, ChevronDown } from 'lucide-react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../components/ui/collapsible';
+import { cn } from '../../../shared/lib/utils';
+// ─── Color Scheme Map ─────────────────────────────────────────────────────────
+const colorSchemes = {
+    blue: {
+        border: 'border-blue-200',
+        bg: 'bg-gradient-to-r from-blue-50 to-indigo-50',
+        icon: 'bg-blue-100 text-blue-600',
+        title: 'text-blue-800',
+        dot: 'bg-blue-400',
+        text: 'text-blue-700',
+        tipBg: 'bg-blue-100/60',
+        tipText: 'text-blue-700',
+        hoverBg: 'hover:from-blue-100/80 hover:to-indigo-100/60',
+    },
+    purple: {
+        border: 'border-purple-200',
+        bg: 'bg-gradient-to-r from-purple-50 to-violet-50',
+        icon: 'bg-purple-100 text-purple-600',
+        title: 'text-purple-800',
+        dot: 'bg-purple-400',
+        text: 'text-purple-700',
+        tipBg: 'bg-purple-100/60',
+        tipText: 'text-purple-700',
+        hoverBg: 'hover:from-purple-100/80 hover:to-violet-100/60',
+    },
+    emerald: {
+        border: 'border-emerald-200',
+        bg: 'bg-gradient-to-r from-emerald-50 to-teal-50',
+        icon: 'bg-emerald-100 text-emerald-600',
+        title: 'text-emerald-800',
+        dot: 'bg-emerald-400',
+        text: 'text-emerald-700',
+        tipBg: 'bg-emerald-100/60',
+        tipText: 'text-emerald-700',
+        hoverBg: 'hover:from-emerald-100/80 hover:to-teal-100/60',
+    },
+    amber: {
+        border: 'border-amber-200',
+        bg: 'bg-gradient-to-r from-amber-50 to-orange-50',
+        icon: 'bg-amber-100 text-amber-600',
+        title: 'text-amber-800',
+        dot: 'bg-amber-400',
+        text: 'text-amber-700',
+        tipBg: 'bg-amber-100/60',
+        tipText: 'text-amber-700',
+        hoverBg: 'hover:from-amber-100/80 hover:to-orange-100/60',
+    },
+    cyan: {
+        border: 'border-cyan-200',
+        bg: 'bg-gradient-to-r from-cyan-50 to-sky-50',
+        icon: 'bg-cyan-100 text-cyan-600',
+        title: 'text-cyan-800',
+        dot: 'bg-cyan-400',
+        text: 'text-cyan-700',
+        tipBg: 'bg-cyan-100/60',
+        tipText: 'text-cyan-700',
+        hoverBg: 'hover:from-cyan-100/80 hover:to-sky-100/60',
+    },
+    rose: {
+        border: 'border-rose-200',
+        bg: 'bg-gradient-to-r from-rose-50 to-pink-50',
+        icon: 'bg-rose-100 text-rose-600',
+        title: 'text-rose-800',
+        dot: 'bg-rose-400',
+        text: 'text-rose-700',
+        tipBg: 'bg-rose-100/60',
+        tipText: 'text-rose-700',
+        hoverBg: 'hover:from-rose-100/80 hover:to-pink-100/60',
+    },
+    teal: {
+        border: 'border-teal-200',
+        bg: 'bg-gradient-to-r from-teal-50 to-emerald-50',
+        icon: 'bg-teal-100 text-teal-600',
+        title: 'text-teal-800',
+        dot: 'bg-teal-400',
+        text: 'text-teal-700',
+        tipBg: 'bg-teal-100/60',
+        tipText: 'text-teal-700',
+        hoverBg: 'hover:from-teal-100/80 hover:to-emerald-100/60',
+    },
+    orange: {
+        border: 'border-orange-200',
+        bg: 'bg-gradient-to-r from-orange-50 to-amber-50',
+        icon: 'bg-orange-100 text-orange-600',
+        title: 'text-orange-800',
+        dot: 'bg-orange-400',
+        text: 'text-orange-700',
+        tipBg: 'bg-orange-100/60',
+        tipText: 'text-orange-700',
+        hoverBg: 'hover:from-orange-100/80 hover:to-amber-100/60',
+    },
+};
+// ─── Component ────────────────────────────────────────────────────────────────
+export function CreatorGuide({ steps, tips = [], colorScheme = 'blue' }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const colors = colorSchemes[colorScheme];
+    return (_jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs("div", { className: cn('rounded-xl border shadow-sm overflow-hidden', colors.border, colors.bg), children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn('flex w-full items-center gap-3 px-5 py-3.5 transition-colors cursor-pointer', colors.bg, colors.hoverBg), children: [_jsx("div", { className: cn('flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg', colors.icon), children: _jsx(Lightbulb, { className: "h-4 w-4" }) }), _jsx("span", { className: cn('text-sm font-semibold flex-1 text-left', colors.title), children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsx(ChevronDown, { className: cn('h-4 w-4 transition-transform duration-200', colors.text, isOpen && 'rotate-180') })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "px-5 pb-4 pt-0", children: _jsxs("div", { className: "ml-11 space-y-1.5", children: [steps.map((step, index) => (_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: cn('mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full', colors.dot) }), _jsx("span", { className: cn('text-sm leading-relaxed', colors.text, step.highlight && 'font-semibold'), children: step.text })] }, index))), tips.length > 0 && (_jsx("div", { className: cn('mt-3 rounded-lg px-3 py-2', colors.tipBg), children: tips.map((tip, index) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-sm", children: "\uD83D\uDCA1" }), _jsxs("span", { className: cn('text-sm font-medium', colors.tipText), children: [_jsx("strong", { children: "M\u1EB9o:" }), " ", tip] })] }, index))) }))] }) }) })] }) }));
+}

package/dist/components/questions/components/NameNode.js

@@ -1 +1,26 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as i}from"../../../components/ui/button";import{Badge as n}from"../../../components/ui/badge";import{X as r}from"lucide-react";export function NameNode({data:o,variant:a="creator"}){const s="client"===a,l="compact"===o.displayMode,d=l?"text-[11px]":"text-[13px]";if(s){const i=o.isConnected?"relative flex h-full w-full items-center justify-center overflow-hidden rounded-2xl bg-white transition-all duration-200 ease-out":"relative inline-flex min-w-[110px] items-center justify-center overflow-hidden rounded-2xl border border-gray-300 bg-white px-3 py-2 transition-all duration-200 ease-out hover:border-blue-400 cursor-move";return t("div",{className:`${i} ${o.highlightClass??""}`,style:o.highlightStyle,children:[o.isHighlighted&&e("div",{className:"pointer-events-none absolute inset-0 z-[1] rounded-2xl bg-black/40"}),e("span",{className:`relative ${o.isHighlighted?"z-[2]":"z-[1]"} font-medium text-black ${d}`,children:o.name})]})}const c=o.isConnected,m=l?"relative inline-flex min-w-[110px] items-center justify-between rounded-2xl border px-3 py-2 text-xs transition-all":"relative flex min-w-[180px] items-center justify-between rounded-2xl border-2 px-3 py-2 text-sm transition-all";return t("div",{className:c?`${m} border-green-500 bg-green-50 ring-2 ring-green-200`:`${m} border-gray-200 bg-white hover:border-blue-300`,children:[e("span",{className:`font-medium text-gray-900 ${d}`,children:o.name}),t("div",{className:"flex items-center gap-2",children:[o.isConnected&&e(n,{variant:"outline",className:"bg-green-50 text-xs text-green-700",children:"✓"}),o.isEditMode&&e(i,{size:"icon",variant:"ghost",className:"h-6 w-6",onClick:e=>{e.stopPropagation(),o.onRemove()},children:e(r,{className:"h-3 w-3"})})]})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button';
+import { Badge } from '../../../components/ui/badge';
+import { X } from 'lucide-react';
+export function NameNode({ data, variant = 'creator' }) {
+    const isClientMode = variant === 'client';
+    const isCompact = data.displayMode === 'compact';
+    const textClass = isCompact ? 'text-[11px]' : 'text-[13px]';
+    if (isClientMode) {
+        const baseClass = data.isConnected
+            ? 'relative flex h-full w-full items-center justify-center overflow-hidden rounded-2xl bg-white transition-all duration-200 ease-out'
+            : 'relative inline-flex min-w-[110px] items-center justify-center overflow-hidden rounded-2xl border border-gray-300 bg-white px-3 py-2 transition-all duration-200 ease-out hover:border-blue-400 cursor-move';
+        return (_jsxs("div", { className: `${baseClass} ${data.highlightClass ?? ''}`, style: data.highlightStyle, children: [data.isHighlighted && (_jsx("div", { className: "pointer-events-none absolute inset-0 z-[1] rounded-2xl bg-black/40" })), _jsx("span", { className: `relative ${data.isHighlighted ? 'z-[2]' : 'z-[1]'} font-medium text-black ${textClass}`, children: data.name })] }));
+    }
+    const isConnectedCreator = data.isConnected;
+    const baseClassesCreator = isCompact
+        ? 'relative inline-flex min-w-[110px] items-center justify-between rounded-2xl border px-3 py-2 text-xs transition-all'
+        : 'relative flex min-w-[180px] items-center justify-between rounded-2xl border-2 px-3 py-2 text-sm transition-all';
+    const creatorClass = isConnectedCreator
+        ? `${baseClassesCreator} border-green-500 bg-green-50 ring-2 ring-green-200`
+        : `${baseClassesCreator} border-gray-200 bg-white hover:border-blue-300`;
+    return (_jsxs("div", { className: creatorClass, children: [_jsx("span", { className: `font-medium text-gray-900 ${textClass}`, children: data.name }), _jsxs("div", { className: "flex items-center gap-2", children: [data.isConnected && (_jsx(Badge, { variant: "outline", className: "bg-green-50 text-xs text-green-700", children: "\u2713" })), data.isEditMode && (_jsx(Button, { size: "icon", variant: "ghost", className: "h-6 w-6", onClick: (e) => {
+                            e.stopPropagation();
+                            data.onRemove();
+                        }, children: _jsx(X, { className: "h-3 w-3" }) }))] })] }));
+}

package/dist/components/questions/components/QuestionBankOption.js

@@ -1 +1,46 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{Label as a}from"../../../components/ui/label";import{Input as n}from"../../../components/ui/input";import{Card as l,CardContent as s}from"../../../components/ui/card";import{Alert as i,AlertDescription as c}from"../../../components/ui/alert";import{Database as d,CheckCircle2 as o,ExternalLink as m}from"lucide-react";import h from"next/link";const u=/^[a-zA-Z0-9_-]*$/;export function QuestionBankOption({checked:g,onCheckedChange:x,code:b,onCodeChange:p,title:N,onTitleChange:f,error:v,codeError:y,existingBank:C,disabled:k=!1}){const w=C&&C.id;return e(l,{className:"border-dashed "+(w?"border-green-300 bg-green-50/50":g?"border-blue-300 bg-blue-50/50":"border-gray-300 bg-gray-50/50"),children:e(s,{className:"pt-4",children:t(r,w?{children:[t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-full bg-green-100",children:e(o,{className:"h-5 w-5 text-green-600"})}),e("div",{children:e("span",{className:"text-sm font-medium text-green-700",children:"Đã thêm vào ngân hàng câu hỏi"})})]}),t("div",{className:"mt-4 pl-11 space-y-4",children:[t("div",{children:[e(a,{htmlFor:"questionCode",className:"text-sm font-medium text-gray-600",children:"Mã câu hỏi"}),e(n,{id:"questionCode",value:C.code,readOnly:!0,disabled:!0,className:"mt-1.5 bg-gray-100 text-gray-900 cursor-not-allowed"})]}),t("div",{children:[e(a,{htmlFor:"questionTitle",className:"text-sm font-medium text-gray-600",children:"Tiêu đề câu hỏi"}),e(n,{id:"questionTitle",value:C.title,readOnly:!0,disabled:!0,className:"mt-1.5 bg-gray-100 text-gray-900 cursor-not-allowed"})]}),t(i,{className:"border-blue-200 bg-blue-50",children:[e(d,{className:"h-4 w-4 text-blue-600"}),e(c,{className:"text-sm text-blue-800",children:t(h,{href:`/manage/question-banks?code=${encodeURIComponent(C.code)}`,target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center gap-1.5 text-blue-600 hover:text-blue-800 font-medium hover:underline",children:["Ngân hàng câu hỏi",e(m,{className:"h-3.5 w-3.5"})]})})]})]})]}:{children:[t("label",{className:"flex items-center gap-3 "+(k?"cursor-not-allowed opacity-50":"cursor-pointer"),children:[e("input",{type:"checkbox",checked:g,onChange:e=>!k&&x(e.target.checked),disabled:k,className:"h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:cursor-not-allowed"}),t("div",{className:"flex items-center gap-2",children:[e(d,{className:"h-4 w-4 "+(g?"text-blue-600":"text-gray-500")}),e("span",{className:"text-sm font-medium "+(g?"text-blue-700":"text-gray-700"),children:"Thêm vào ngân hàng câu hỏi"})]})]}),g&&t("div",{className:"mt-4 pl-7 space-y-4",children:[t("div",{children:[t(a,{htmlFor:"questionCode",className:"text-sm font-medium",children:["Mã câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(n,{id:"questionCode",value:b,onChange:e=>{return t=e.target.value,void(u.test(t)&&p(t.slice(0,100)));var t},placeholder:'VD: "Q001", "GRID_001", "MC-PAST-01"...',className:"mt-1.5 "+(y?"border-red-500 focus:ring-red-500":""),disabled:k,maxLength:100}),t("div",{className:"mt-1 flex justify-between",children:[e("p",y?{className:"text-sm text-red-500",children:y}:{className:"text-xs text-gray-500",children:"Chỉ chữ cái, số, dấu gạch dưới (_) và gạch ngang (-)"}),t("span",{className:"text-xs text-gray-400",children:[b.length,"/",100]})]})]}),t("div",{children:[t(a,{htmlFor:"questionTitle",className:"text-sm font-medium",children:["Tiêu đề câu hỏi ",e("span",{className:"text-red-500",children:"*"})]}),e(n,{id:"questionTitle",value:N,onChange:e=>{return t=e.target.value,void f(t.slice(0,255));var t},placeholder:'VD: "Grid điền từ về động vật", "Trắc nghiệm thì quá khứ"...',className:"mt-1.5 "+(v?"border-red-500 focus:ring-red-500":""),disabled:k,maxLength:255}),t("div",{className:"mt-1 flex justify-between",children:[e("p",v?{className:"text-sm text-red-500",children:v}:{className:"text-xs text-gray-500",children:"Mã và tiêu đề giúp tìm kiếm câu hỏi trong đề thi khác"}),t("span",{className:"text-xs text-gray-400",children:[N.length,"/",255]})]})]})]})]})})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Label } from '../../../components/ui/label';
+import { Input } from '../../../components/ui/input';
+import { Card, CardContent } from '../../../components/ui/card';
+import { Alert, AlertDescription } from '../../../components/ui/alert';
+import { Database, CheckCircle2, ExternalLink } from 'lucide-react';
+import Link from 'next/link';
+// Validation constants
+const CODE_MAX_LENGTH = 100;
+const TITLE_MAX_LENGTH = 255;
+// Pattern: only alphanumeric characters, underscore, and hyphen
+const CODE_PATTERN = /^[a-zA-Z0-9_-]*$/;
+/**
+ * Shared component for "Add to Question Bank" option.
+ *
+ * Has two modes:
+ * 1. NEW: When existingBank is null - shows editable code/title inputs
+ * 2. EXISTING: When existingBank has data - shows read-only info with link to edit
+ *
+ * Validation rules:
+ * - Code: Required, max 100 chars, only letters, numbers, underscore (_), hyphen (-)
+ * - Title: Required, max 255 chars
+ *
+ * Used by all question type creators to allow adding questions to the question bank.
+ */
+export function QuestionBankOption({ checked, onCheckedChange, code, onCodeChange, title, onTitleChange, error, codeError, existingBank, disabled = false, }) {
+    // Handle code change with pattern validation
+    const handleCodeChange = (value) => {
+        // Only allow valid characters (alphanumeric, underscore, hyphen)
+        if (CODE_PATTERN.test(value)) {
+            onCodeChange(value.slice(0, CODE_MAX_LENGTH));
+        }
+    };
+    // Handle title change with max length
+    const handleTitleChange = (value) => {
+        onTitleChange(value.slice(0, TITLE_MAX_LENGTH));
+    };
+    // If existing bank data exists, show read-only mode
+    const isExistingBank = existingBank && existingBank.id;
+    return (_jsx(Card, { className: `border-dashed ${isExistingBank ? 'border-green-300 bg-green-50/50' : checked ? 'border-blue-300 bg-blue-50/50' : 'border-gray-300 bg-gray-50/50'}`, children: _jsx(CardContent, { className: "pt-4", children: isExistingBank ? (
+            // EXISTING BANK MODE - Read-only display with edit link
+            _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: _jsx(CheckCircle2, { className: "h-5 w-5 text-green-600" }) }), _jsx("div", { children: _jsx("span", { className: "text-sm font-medium text-green-700", children: "\u0110\u00E3 th\u00EAm v\u00E0o ng\u00E2n h\u00E0ng c\u00E2u h\u1ECFi" }) })] }), _jsxs("div", { className: "mt-4 pl-11 space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "questionCode", className: "text-sm font-medium text-gray-600", children: "M\u00E3 c\u00E2u h\u1ECFi" }), _jsx(Input, { id: "questionCode", value: existingBank.code, readOnly: true, disabled: true, className: "mt-1.5 bg-gray-100 text-gray-900 cursor-not-allowed" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "questionTitle", className: "text-sm font-medium text-gray-600", children: "Ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi" }), _jsx(Input, { id: "questionTitle", value: existingBank.title, readOnly: true, disabled: true, className: "mt-1.5 bg-gray-100 text-gray-900 cursor-not-allowed" })] }), _jsxs(Alert, { className: "border-blue-200 bg-blue-50", children: [_jsx(Database, { className: "h-4 w-4 text-blue-600" }), _jsx(AlertDescription, { className: "text-sm text-blue-800", children: _jsxs(Link, { href: `/manage/question-banks?code=${encodeURIComponent(existingBank.code)}`, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 text-blue-600 hover:text-blue-800 font-medium hover:underline", children: ["Ng\u00E2n h\u00E0ng c\u00E2u h\u1ECFi", _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }) })] })] })] })) : (
+            // NEW BANK MODE - Editable inputs
+            _jsxs(_Fragment, { children: [_jsxs("label", { className: `flex items-center gap-3 ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: (e) => !disabled && onCheckedChange(e.target.checked), disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:cursor-not-allowed" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Database, { className: `h-4 w-4 ${checked ? 'text-blue-600' : 'text-gray-500'}` }), _jsx("span", { className: `text-sm font-medium ${checked ? 'text-blue-700' : 'text-gray-700'}`, children: "Th\u00EAm v\u00E0o ng\u00E2n h\u00E0ng c\u00E2u h\u1ECFi" })] })] }), checked && (_jsxs("div", { className: "mt-4 pl-7 space-y-4", children: [_jsxs("div", { children: [_jsxs(Label, { htmlFor: "questionCode", className: "text-sm font-medium", children: ["M\u00E3 c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "questionCode", value: code, onChange: (e) => handleCodeChange(e.target.value), placeholder: 'VD: "Q001", "GRID_001", "MC-PAST-01"...', className: `mt-1.5 ${codeError ? 'border-red-500 focus:ring-red-500' : ''}`, disabled: disabled, maxLength: CODE_MAX_LENGTH }), _jsxs("div", { className: "mt-1 flex justify-between", children: [codeError ? (_jsx("p", { className: "text-sm text-red-500", children: codeError })) : (_jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1EC9 ch\u1EEF c\u00E1i, s\u1ED1, d\u1EA5u g\u1EA1ch d\u01B0\u1EDBi (_) v\u00E0 g\u1EA1ch ngang (-)" })), _jsxs("span", { className: "text-xs text-gray-400", children: [code.length, "/", CODE_MAX_LENGTH] })] })] }), _jsxs("div", { children: [_jsxs(Label, { htmlFor: "questionTitle", className: "text-sm font-medium", children: ["Ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "questionTitle", value: title, onChange: (e) => handleTitleChange(e.target.value), placeholder: 'VD: "Grid \u0111i\u1EC1n t\u1EEB v\u1EC1 \u0111\u1ED9ng v\u1EADt", "Tr\u1EAFc nghi\u1EC7m th\u00EC qu\u00E1 kh\u1EE9"...', className: `mt-1.5 ${error ? 'border-red-500 focus:ring-red-500' : ''}`, disabled: disabled, maxLength: TITLE_MAX_LENGTH }), _jsxs("div", { className: "mt-1 flex justify-between", children: [error ? (_jsx("p", { className: "text-sm text-red-500", children: error })) : (_jsx("p", { className: "text-xs text-gray-500", children: "M\u00E3 v\u00E0 ti\u00EAu \u0111\u1EC1 gi\u00FAp t\u00ECm ki\u1EBFm c\u00E2u h\u1ECFi trong \u0111\u1EC1 thi kh\u00E1c" })), _jsxs("span", { className: "text-xs text-gray-400", children: [title.length, "/", TITLE_MAX_LENGTH] })] })] })] }))] })) }) }));
+}

package/dist/components/questions/components/QuestionBasicInfoForm.js

@@ -1 +1,9 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Label as i}from"../../../components/ui/label";import{Input as l}from"../../../components/ui/input";import{Textarea as r}from"../../../components/ui/textarea";import{Select as a,SelectContent as c,SelectItem as d,SelectTrigger as h,SelectValue as o}from"../../../components/ui/select";import{QuestionTypeSelector as t}from"./QuestionTypeSelector";export function QuestionBasicInfoForm({questionType:u,content:s,level:m,difficulty:v,skill:p,points:g,isEmbedded:C,prefilledType:f,onQuestionTypeChange:N,onContentChange:y,onLevelChange:E,onDifficultyChange:T,onSkillChange:A,onPointsChange:I}){return n("div",{className:"space-y-4",children:[n("div",{children:[e(i,{htmlFor:"questionType",children:"Loại câu hỏi *"}),e(t,{value:u,onValueChange:N,disabled:C&&!!f})]}),"CHOOSE_THE_CORRECT_ANSWER"!==u&&n("div",{children:[e(i,{htmlFor:"content",children:"Nội dung câu hỏi *"}),e(r,{id:"content",value:s,onChange:e=>y(e.target.value),placeholder:"Nhập nội dung câu hỏi...",className:"mt-1",rows:3})]}),n("div",{className:"grid grid-cols-2 gap-4",children:[n("div",{children:[e(i,{htmlFor:"level",children:"Cấp độ *"}),n(a,{value:m,onValueChange:e=>E(e),children:[e(h,{id:"level",className:"mt-1",children:e(o,{})}),n(c,{children:[e(d,{value:"A1",children:"A1"}),e(d,{value:"A2",children:"A2"}),e(d,{value:"B1",children:"B1"}),e(d,{value:"B2",children:"B2"}),e(d,{value:"C1",children:"C1"}),e(d,{value:"C2",children:"C2"})]})]})]}),n("div",{children:[e(i,{htmlFor:"difficulty",children:"Độ khó *"}),n(a,{value:v,onValueChange:e=>T(e),children:[e(h,{id:"difficulty",className:"mt-1",children:e(o,{})}),n(c,{children:[e(d,{value:"EASY",children:"Dễ"}),e(d,{value:"MEDIUM",children:"Trung bình"}),e(d,{value:"HARD",children:"Khó"})]})]})]}),n("div",{children:[e(i,{htmlFor:"skill",children:"Kỹ năng *"}),n(a,{value:p,onValueChange:e=>A(e),children:[e(h,{id:"skill",className:"mt-1",children:e(o,{})}),n(c,{children:[e(d,{value:"LISTENING",children:"Listening"}),e(d,{value:"READING",children:"Reading"}),e(d,{value:"WRITING",children:"Writing"}),e(d,{value:"SPEAKING",children:"Speaking"})]})]})]}),n("div",{children:[e(i,{htmlFor:"points",children:"Điểm *"}),e(l,{id:"points",type:"number",value:g,onChange:e=>I(Number(e.target.value)),className:"mt-1",min:1})]})]})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../../../components/ui/label';
+import { Input } from '../../../components/ui/input';
+import { Textarea } from '../../../components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../components/ui/select';
+import { QuestionTypeSelector } from './QuestionTypeSelector';
+export function QuestionBasicInfoForm({ questionType, content, level, difficulty, skill, points, isEmbedded, prefilledType, onQuestionTypeChange, onContentChange, onLevelChange, onDifficultyChange, onSkillChange, onPointsChange, }) {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "questionType", children: "Lo\u1EA1i c\u00E2u h\u1ECFi *" }), _jsx(QuestionTypeSelector, { value: questionType, onValueChange: onQuestionTypeChange, disabled: isEmbedded && !!prefilledType })] }), questionType !== 'CHOOSE_THE_CORRECT_ANSWER' && (_jsxs("div", { children: [_jsx(Label, { htmlFor: "content", children: "N\u1ED9i dung c\u00E2u h\u1ECFi *" }), _jsx(Textarea, { id: "content", value: content, onChange: (e) => onContentChange(e.target.value), placeholder: "Nh\u1EADp n\u1ED9i dung c\u00E2u h\u1ECFi...", className: "mt-1", rows: 3 })] })), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "level", children: "C\u1EA5p \u0111\u1ED9 *" }), _jsxs(Select, { value: level, onValueChange: (value) => onLevelChange(value), children: [_jsx(SelectTrigger, { id: "level", className: "mt-1", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "A1", children: "A1" }), _jsx(SelectItem, { value: "A2", children: "A2" }), _jsx(SelectItem, { value: "B1", children: "B1" }), _jsx(SelectItem, { value: "B2", children: "B2" }), _jsx(SelectItem, { value: "C1", children: "C1" }), _jsx(SelectItem, { value: "C2", children: "C2" })] })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "difficulty", children: "\u0110\u1ED9 kh\u00F3 *" }), _jsxs(Select, { value: difficulty, onValueChange: (value) => onDifficultyChange(value), children: [_jsx(SelectTrigger, { id: "difficulty", className: "mt-1", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "EASY", children: "D\u1EC5" }), _jsx(SelectItem, { value: "MEDIUM", children: "Trung b\u00ECnh" }), _jsx(SelectItem, { value: "HARD", children: "Kh\u00F3" })] })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "skill", children: "K\u1EF9 n\u0103ng *" }), _jsxs(Select, { value: skill, onValueChange: (value) => onSkillChange(value), children: [_jsx(SelectTrigger, { id: "skill", className: "mt-1", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "LISTENING", children: "Listening" }), _jsx(SelectItem, { value: "READING", children: "Reading" }), _jsx(SelectItem, { value: "WRITING", children: "Writing" }), _jsx(SelectItem, { value: "SPEAKING", children: "Speaking" })] })] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "points", children: "\u0110i\u1EC3m *" }), _jsx(Input, { id: "points", type: "number", value: points, onChange: (e) => onPointsChange(Number(e.target.value)), className: "mt-1", min: 1 })] })] })] }));
+}

package/dist/components/questions/components/QuestionCommonFields.js

@@ -1 +1,33 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Label as i}from"../../../components/ui/label";import{Textarea as t}from"../../../components/ui/textarea";import{Card as a,CardContent as l,CardHeader as c,CardTitle as r}from"../../../components/ui/card";import{PointsInput as o}from"../../../components/ui/points-input";import{Select as h,SelectContent as s,SelectItem as m,SelectTrigger as u,SelectValue as d}from"../../../components/ui/select";export function QuestionCommonFields({points:p,onPointsChange:f,difficulty:g="MEDIUM",onDifficultyChange:x,showDifficulty:v=!0,explanation:N="",onExplanationChange:y,showExplanation:D=!0,layout:b="horizontal"}){return n(a,{children:[e(c,{className:"pb-3",children:e(r,{className:"text-base",children:"Thông tin cơ bản"})}),n(l,{className:"space-y-4",children:[n("div",{className:"horizontal"===b?"grid grid-cols-2 gap-4":"space-y-4",children:[e("div",{children:e(o,{defaultValue:p,onChange:e=>{const n=Number(e.target.value);f(n||1)}})}),v&&x&&n("div",{children:[e(i,{htmlFor:"difficulty",className:"text-sm font-medium",children:"Độ khó"}),n(h,{value:g,onValueChange:e=>x(e),children:[e(u,{id:"difficulty",className:"mt-1.5",children:e(d,{placeholder:"Chọn độ khó",children:(e=>{switch(e){case"EASY":return"Dễ";case"MEDIUM":return"Trung bình";case"HARD":return"Khó";default:return e}})(g)})}),n(s,{children:[e(m,{value:"EASY",children:"Dễ"}),e(m,{value:"MEDIUM",children:"Trung bình"}),e(m,{value:"HARD",children:"Khó"})]})]})]})]}),D&&y&&n("div",{children:[e(i,{htmlFor:"explanation",className:"text-sm font-medium",children:"Giải thích"}),e(t,{id:"explanation",value:N,onChange:e=>y(e.target.value),placeholder:"Nhập giải thích cho đáp án đúng...",className:"mt-1.5",rows:3}),e("p",{className:"mt-1 text-xs text-gray-500",children:"Giải thích sẽ được hiển thị cho học sinh sau khi nộp bài"})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../../../components/ui/label';
+import { Textarea } from '../../../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
+import { PointsInput } from '../../../components/ui/points-input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../components/ui/select';
+/**
+ * Shared component for common question fields:
+ * - Points (điểm số)
+ * - Difficulty (độ khó)
+ * - Explanation (giải thích)
+ *
+ * Used by all question type creators to ensure consistency.
+ */
+export function QuestionCommonFields({ points, onPointsChange, difficulty = 'MEDIUM', onDifficultyChange, showDifficulty = true, explanation = '', onExplanationChange, showExplanation = true, layout = 'horizontal', }) {
+    const getDifficultyLabel = (diff) => {
+        switch (diff) {
+            case 'EASY':
+                return 'Dễ';
+            case 'MEDIUM':
+                return 'Trung bình';
+            case 'HARD':
+                return 'Khó';
+            default:
+                return diff;
+        }
+    };
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-base", children: "Th\u00F4ng tin c\u01A1 b\u1EA3n" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: layout === 'horizontal' ? 'grid grid-cols-2 gap-4' : 'space-y-4', children: [_jsx("div", { children: _jsx(PointsInput, { defaultValue: points, onChange: (e) => {
+                                        const value = Number(e.target.value);
+                                        onPointsChange(value || 1);
+                                    } }) }), showDifficulty && onDifficultyChange && (_jsxs("div", { children: [_jsx(Label, { htmlFor: "difficulty", className: "text-sm font-medium", children: "\u0110\u1ED9 kh\u00F3" }), _jsxs(Select, { value: difficulty, onValueChange: (value) => onDifficultyChange(value), children: [_jsx(SelectTrigger, { id: "difficulty", className: "mt-1.5", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn \u0111\u1ED9 kh\u00F3", children: getDifficultyLabel(difficulty) }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "EASY", children: "D\u1EC5" }), _jsx(SelectItem, { value: "MEDIUM", children: "Trung b\u00ECnh" }), _jsx(SelectItem, { value: "HARD", children: "Kh\u00F3" })] })] })] }))] }), showExplanation && onExplanationChange && (_jsxs("div", { children: [_jsx(Label, { htmlFor: "explanation", className: "text-sm font-medium", children: "Gi\u1EA3i th\u00EDch" }), _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => onExplanationChange(e.target.value), placeholder: "Nh\u1EADp gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng...", className: "mt-1.5", rows: 3 }), _jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch s\u1EBD \u0111\u01B0\u1EE3c hi\u1EC3n th\u1ECB cho h\u1ECDc sinh sau khi n\u1ED9p b\u00E0i" })] }))] })] }));
+}

package/dist/components/questions/components/QuestionSearchDropdown.js

@@ -1 +1,258 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as n,useMemo as r,useState as i}from"react";import{DropdownMenu as s,DropdownMenuContent as a,DropdownMenuItem as o,DropdownMenuTrigger as l}from"../../../components/ui/dropdown-menu";import{Input as c}from"../../../components/ui/input";import{Badge as d}from"../../../components/ui/badge";import{Loader2 as m,Search as u,Image as h,FileText as g,Grid3X3 as p,BookOpen as x,Library as f,Sparkles as N,Hash as b,BarChart3 as y,Lightbulb as v,CheckCircle2 as _}from"lucide-react";import{useQuery as w}from"@tanstack/react-query";import{ScrollArea as C}from"../../../components/ui/scroll-area";import{cn as E}from"../../../shared/lib/utils";const A=(e,t)=>{if(!e)return"";const n="string"==typeof e?e:String(e);return n.length<=t?n:`${n.substring(0,t)}...`},T=["LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER","LOOK_PICTURE_CHOOSE_CORRECT_ANSWER","LOOK_PICTURE_FILL_WORD_HINT","FILL_IN_BLANK","LABEL_THE_PICTURE","READ_AND_COLOR_OBJECTS","IMAGE_OBJECT_MATCHING","FILL_IN_BLANK"],O=["READ_PASSAGE_AND_ANSWER_QUESTIONS","READ_PASSAGE_AND_COMPLETE_STORY"],R=["FILL_MISSING_WORDS_IN_GRID"],I=e=>e?{LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER:"Nhìn tranh điền chỗ trống",LOOK_PICTURE_CHOOSE_CORRECT_ANSWER:"Nhìn tranh chọn đáp án",LOOK_PICTURE_FILL_WORD_HINT:"Nhìn tranh điền từ gợi ý",FILL_MISSING_WORDS_IN_GRID:"Điền chữ trong bảng",CHOOSE_THE_CORRECT_ANSWER:"Chọn đáp án đúng",LABEL_THE_PICTURE:"Gắn nhãn hình ảnh",READ_AND_COLOR_OBJECTS:"Đọc và tô màu",IMAGE_OBJECT_MATCHING:"Ghép hình ảnh - Đối tượng",WRITE_CORRECT_VERB_FORM:"Viết dạng động từ",FILL_IN_BLANK:"Điền vào chỗ trống",READ_PASSAGE_AND_ANSWER_QUESTIONS:"Đọc hiểu"}[e]||e.replace(/_/g," ").toLowerCase():"Chưa xác định";export const getQuestionDisplayText=e=>getContentDisplayText(e.content,e.type);export const getContentDisplayText=(e,t)=>{if(!e)return t||"Câu hỏi";if("string"==typeof e)return e;if("object"==typeof e){if(e.subQuestions&&Array.isArray(e.subQuestions)){const t=e.subQuestions[0];if(t?.question)return t.question}if(e.question)return e.question;if(e.word)return`Điền chữ: ${e.word}`;if(e.passage)return e.passageTitle||A(e.passage,60);if(e.grid&&e.rows&&e.columns)return`Lưới ${e.rows}x${e.columns}`;if(e.wordBank){return`Từ vựng: ${e.wordBank.map(e=>e.text||e).slice(0,3).join(", ")}${e.wordBank.length>3?"...":""}`}if(e.colorNodes||e.regionNodes){return`${e.regionNodes?.length||0} vùng tô màu`}if(e.contexts){const t=e.contexts[0];return t?.text?A(t.text,50):"Viết thư ngắn"}if(e.options&&Array.isArray(e.options))return e.questionText||e.question||"Câu hỏi trắc nghiệm";if(e.blanks){const t=e.blanks[0];return t?.text||e.sentence||"Điền vào chỗ trống"}if(e.instruction)return e.instruction;if(e.mainTitle)return e.mainTitle;if(e.title)return e.title;if(e.text)return e.text}return t||"Câu hỏi"};const L=e=>{switch(e?.toUpperCase()){case"EASY":return"bg-green-100 text-green-700 border-green-200";case"HARD":return"bg-red-100 text-red-700 border-red-200";default:return"bg-yellow-100 text-yellow-700 border-yellow-200"}},S=e=>{switch(e?.toUpperCase()){case"EASY":return"Dễ";case"HARD":return"Khó";default:return"TB"}};export function QuestionSearchDropdown({questionType:k,onSelect:D,selectedQuestionLabel:B,placeholder:j="Tìm câu hỏi từ ngân hàng",disabled:q=!1,buttonClassName:H,compact:F=!1,searchQuestions:K}){const[G,Q]=i(!1),[U,W]=i(""),[P,M]=i("");n(()=>{const e=setTimeout(()=>{M(U.trim())},300);return()=>clearTimeout(e)},[U]);const $=e=>({id:e.id,type:e.questionType,content:e.content,answer:e.correctAnswer,points:parseFloat(String(e.points??1))||1,difficulty:e.difficulty?.toUpperCase(),skill:e.skill||void 0,explanation:e.explanation||void 0,level:"A1",createdAt:e.createdAt,updatedAt:e.updatedAt,code:e.code,title:e.title||void 0,usageCount:e.usageCount}),{data:J,isFetching:V}=w({queryKey:["questionBanks","search",k,P],queryFn:async()=>K?K({questionType:k,keyword:P||void 0,page:1,size:10}):{data:[],meta:{totalItems:0}},enabled:G&&Boolean(k)&&Boolean(K)&&(P.length>0||!!k),staleTime:6e4,refetchOnWindowFocus:!1}),Y=r(()=>J?.data?J.data.map($):[],[J]),z=J?.meta?.totalItems||0,X=!V&&0===Y.length&&P.length>0,Z=!V&&J&&0===Y.length&&0===P.length,ee=!V&&!J&&0===Y.length&&0===P.length;r(()=>B?A(B,40):j,[j,B]);return t(s,{open:G,onOpenChange:e=>Q(!q&&e),children:[e(l,{asChild:!0,disabled:q,children:t("button",F?{type:"button",className:E("group inline-flex h-8 items-center gap-1.5 rounded-md border px-3 text-sm font-medium transition-all",B?"border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100":"border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700","focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-1",q&&"cursor-not-allowed opacity-50",H),children:[e(B?_:f,{className:"h-4 w-4"}),B?"Đã chọn":"Ngân hàng"]}:{type:"button",className:E("group relative flex w-full items-center gap-3 rounded-xl border bg-white p-3 text-left shadow-sm transition-all",B?"border-emerald-200 bg-gradient-to-r from-emerald-50/50 to-teal-50/50":"border-gray-200 hover:border-indigo-200 hover:bg-gradient-to-r hover:from-indigo-50/30 hover:to-purple-50/30","focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-1",q&&"cursor-not-allowed opacity-50",H),children:[e("div",{className:E("flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg transition-all",B?"bg-gradient-to-br from-emerald-500 to-teal-600 shadow-sm":"bg-gradient-to-br from-indigo-100 to-purple-100 group-hover:from-indigo-500 group-hover:to-purple-600 group-hover:shadow-sm"),children:B?e(_,{className:"h-5 w-5 text-white"}):e(f,{className:E("h-5 w-5 transition-colors","text-indigo-500 group-hover:text-white")})}),t("div",{className:"min-w-0 flex-1",children:[e("div",{className:"flex items-center gap-2",children:e("span",{className:E("text-xs font-medium uppercase tracking-wide",B?"text-emerald-600":"text-indigo-500"),children:B?"✓ Đã chọn từ ngân hàng":"Ngân hàng câu hỏi"})}),e("p",{className:E("mt-0.5 truncate text-sm",B?"font-medium text-gray-800":"text-gray-500"),children:B?A(B,55):"Nhấn để tìm và sử dụng câu hỏi có sẵn"})]}),e("div",{className:E("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-all",B?"bg-emerald-100 text-emerald-600":"bg-gray-100 text-gray-400 group-hover:bg-indigo-100 group-hover:text-indigo-600"),children:e(u,{className:"h-4 w-4"})})]})}),t(a,{className:"w-[520px] p-0",align:F?"end":"start",children:[e("div",{className:"border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-purple-50 px-4 py-3",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm",children:e(f,{className:"h-4 w-4 text-white"})}),t("div",{className:"flex-1",children:[e("h3",{className:"text-sm font-semibold text-gray-800",children:"Ngân hàng câu hỏi"}),e("p",{className:"text-xs text-gray-500",children:"Chọn câu hỏi có sẵn để điền nhanh vào form"})]})]})}),t("div",{className:"border-b border-gray-100 bg-gray-50/50 p-3",children:[t("div",{className:"relative",children:[e(u,{className:"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"}),e(c,{placeholder:"Tìm theo mã, tiêu đề hoặc nội dung...",value:U,onChange:e=>W(e.target.value),autoFocus:!0,className:"border-gray-200 bg-white pl-10 pr-10 transition-all focus:border-indigo-300 focus:ring-indigo-200"}),V&&e(m,{className:"absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-indigo-500"})]}),t("div",{className:"mt-2 flex items-center justify-between",children:[e("div",{className:"flex items-center gap-2",children:e(d,{variant:"outline",className:"border-indigo-200 bg-indigo-50 text-indigo-700",children:I(k)})}),z>0&&t("span",{className:"text-xs text-gray-500",children:["Hiển thị ",Y.length,"/",z," kết quả"]})]})]}),e(C,{className:"h-80",children:ee?t("div",{className:"flex flex-col items-center justify-center p-8 text-center",children:[e("div",{className:"mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-indigo-100 to-purple-100",children:e(N,{className:"h-8 w-8 text-indigo-500"})}),e("p",{className:"text-sm font-medium text-gray-700",children:"Tìm câu hỏi từ ngân hàng"}),e("p",{className:"mt-1 text-xs text-gray-500",children:"Nhập mã câu hỏi, tiêu đề hoặc từ khóa để tìm kiếm"}),e("div",{className:"mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3",children:t("div",{className:"flex items-start gap-2",children:[e(v,{className:"mt-0.5 h-4 w-4 flex-shrink-0 text-blue-500"}),t("div",{className:"text-left text-xs text-blue-700",children:[e("p",{className:"font-medium",children:"Mẹo tìm kiếm nhanh:"}),t("ul",{className:"mt-1 list-inside list-disc space-y-0.5 text-blue-600",children:[e("li",{children:"Nhập mã câu hỏi (VD: M001)"}),e("li",{children:"Nhập tiêu đề hoặc một phần nội dung"}),e("li",{children:"Kết quả sẽ tự động cập nhật"})]})]})]})})]}):Z?t("div",{className:"flex flex-col items-center justify-center p-8 text-center",children:[e("div",{className:"mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-100",children:e(f,{className:"h-8 w-8 text-amber-500"})}),e("p",{className:"text-sm font-medium text-gray-700",children:"Chưa có câu hỏi trong ngân hàng"}),t("p",{className:"mt-1 text-xs text-gray-500",children:["Ngân hàng câu hỏi chưa có dữ liệu cho loại: ",e("strong",{children:I(k)})]}),e("p",{className:"mt-2 text-xs text-gray-400",children:"Hãy thêm câu hỏi vào ngân hàng hoặc tạo câu hỏi mới"})]}):X?t("div",{className:"flex flex-col items-center justify-center p-8 text-center",children:[e("div",{className:"mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100",children:e(u,{className:"h-8 w-8 text-gray-400"})}),e("p",{className:"text-sm font-medium text-gray-700",children:"Không tìm thấy kết quả"}),t("p",{className:"mt-1 text-xs text-gray-500",children:['Thử tìm với từ khóa khác: "',P,'"']})]}):e("div",{className:"divide-y divide-gray-100 p-2",children:Y.map(n=>{const r=(e=>{const t=e.content;return t&&t.subQuestions&&Array.isArray(t.subQuestions)?t.subQuestions.length:null})(n);return t(o,{className:"flex cursor-pointer flex-col items-start gap-2 rounded-xl p-3 transition-all hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 focus:bg-gradient-to-r focus:from-indigo-50 focus:to-purple-50",onSelect:()=>(e=>{D(e),Q(!1),W(""),M("")})(n),children:[t("div",{className:"flex w-full items-start justify-between gap-2",children:[t("div",{className:"flex items-center gap-2",children:[n.code&&t("div",{className:"flex items-center gap-1 rounded-md bg-gradient-to-r from-indigo-500 to-purple-500 px-2 py-0.5 text-xs font-bold text-white shadow-sm",children:[e(b,{className:"h-3 w-3"}),n.code]}),e("div",{className:"flex-shrink-0",children:(i=n.type,T.includes(i)?e(h,{className:"h-4 w-4 text-blue-500"}):O.includes(i)?e(x,{className:"h-4 w-4 text-green-500"}):R.includes(i)?e(p,{className:"h-4 w-4 text-purple-500"}):e(g,{className:"h-4 w-4 text-gray-500"}))})]}),void 0!==n.usageCount&&n.usageCount>0&&t("div",{className:"flex items-center gap-1 text-xs text-gray-500",title:"Số lần sử dụng",children:[e(y,{className:"h-3 w-3"}),n.usageCount]})]}),n.title&&e("p",{className:"text-sm font-semibold text-gray-800",children:A(n.title,60)}),e("p",{className:"text-xs text-gray-600",children:A(getQuestionDisplayText(n),80)}),t("div",{className:"flex flex-wrap items-center gap-1.5",children:[e(d,{variant:"outline",className:E("px-2 py-0.5 text-[10px] font-semibold",L(n.difficulty)),children:S(n.difficulty)}),t(d,{variant:"outline",className:"border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-semibold text-blue-700",children:[n.points||1," điểm"]}),n.skill&&e(d,{variant:"outline",className:"border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-semibold text-gray-600",children:n.skill.toLowerCase()}),r&&r>1&&t(d,{variant:"outline",className:"border-purple-200 bg-purple-50 px-2 py-0.5 text-[10px] font-semibold text-purple-700",children:[r," câu con"]})]})]},n.id);var i})})}),e("div",{className:"border-t border-gray-100 bg-gray-50/50 px-4 py-2",children:e("p",{className:"text-center text-xs text-gray-500",children:"Click để chọn câu hỏi và tự động điền vào form"})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../../components/ui/dropdown-menu';
+import { Input } from '../../../components/ui/input';
+import { Badge } from '../../../components/ui/badge';
+import { Loader2, Search, Image as ImageIcon, FileText, Grid3X3, BookOpen, Library, Sparkles, Hash, BarChart3, Lightbulb, CheckCircle2, } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { ScrollArea } from '../../../components/ui/scroll-area';
+import { cn } from '../../../shared/lib/utils';
+const truncate = (text, maxLength) => {
+    if (!text)
+        return '';
+    // Convert to string if it's not already
+    const textStr = typeof text === 'string' ? text : String(text);
+    if (textStr.length <= maxLength)
+        return textStr;
+    return `${textStr.substring(0, maxLength)}...`;
+};
+// Image-based question types
+const IMAGE_BASED_TYPES = [
+    'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER',
+    'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER',
+    'LOOK_PICTURE_FILL_WORD_HINT',
+    'FILL_IN_BLANK',
+    'LABEL_THE_PICTURE',
+    'READ_AND_COLOR_OBJECTS',
+    'IMAGE_OBJECT_MATCHING',
+    'FILL_IN_BLANK',
+];
+// Passage-based question types
+const PASSAGE_BASED_TYPES = [
+    'READ_PASSAGE_AND_ANSWER_QUESTIONS',
+    'READ_PASSAGE_AND_COMPLETE_STORY',
+];
+// Grid-based question types
+const GRID_BASED_TYPES = ['FILL_MISSING_WORDS_IN_GRID'];
+// Get display icon for question type
+const getQuestionTypeIcon = (type) => {
+    if (IMAGE_BASED_TYPES.includes(type)) {
+        return _jsx(ImageIcon, { className: "h-4 w-4 text-blue-500" });
+    }
+    if (PASSAGE_BASED_TYPES.includes(type)) {
+        return _jsx(BookOpen, { className: "h-4 w-4 text-green-500" });
+    }
+    if (GRID_BASED_TYPES.includes(type)) {
+        return _jsx(Grid3X3, { className: "h-4 w-4 text-purple-500" });
+    }
+    return _jsx(FileText, { className: "h-4 w-4 text-gray-500" });
+};
+// Get question type display name in Vietnamese
+const getQuestionTypeName = (type) => {
+    const typeMap = {
+        'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER': 'Nhìn tranh điền chỗ trống',
+        'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER': 'Nhìn tranh chọn đáp án',
+        'LOOK_PICTURE_FILL_WORD_HINT': 'Nhìn tranh điền từ gợi ý',
+        'FILL_MISSING_WORDS_IN_GRID': 'Điền chữ trong bảng',
+        'CHOOSE_THE_CORRECT_ANSWER': 'Chọn đáp án đúng',
+        'LABEL_THE_PICTURE': 'Gắn nhãn hình ảnh',
+        'READ_AND_COLOR_OBJECTS': 'Đọc và tô màu',
+        'IMAGE_OBJECT_MATCHING': 'Ghép hình ảnh - Đối tượng',
+        'WRITE_CORRECT_VERB_FORM': 'Viết dạng động từ',
+        'FILL_IN_BLANK': 'Điền vào chỗ trống',
+        'READ_PASSAGE_AND_ANSWER_QUESTIONS': 'Đọc hiểu',
+    };
+    return type ? typeMap[type] || type.replace(/_/g, ' ').toLowerCase() : 'Chưa xác định';
+};
+// Enhanced function to extract display text from different question content structures
+export const getQuestionDisplayText = (question) => {
+    return getContentDisplayText(question.content, question.type);
+};
+// Extract display text from content object (for cases where we have content but not full Question)
+export const getContentDisplayText = (content, type) => {
+    if (!content)
+        return type || 'Câu hỏi';
+    // Handle string content directly
+    if (typeof content === 'string') {
+        return content;
+    }
+    // Handle object content based on question type
+    if (typeof content === 'object') {
+        // LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER, LOOK_PICTURE_CHOOSE_CORRECT_ANSWER
+        if (content.subQuestions && Array.isArray(content.subQuestions)) {
+            const firstSubQ = content.subQuestions[0];
+            if (firstSubQ?.question) {
+                return firstSubQ.question;
+            }
+        }
+        // For content with direct question field (single question format)
+        if (content.question) {
+            return content.question;
+        }
+        // LOOK_PICTURE_FILL_WORD_HINT - show word pattern
+        if (content.word) {
+            return `Điền chữ: ${content.word}`;
+        }
+        // READ_PASSAGE_AND_ANSWER_QUESTIONS
+        if (content.passage) {
+            return content.passageTitle || truncate(content.passage, 60);
+        }
+        // FILL_MISSING_WORDS_IN_GRID
+        if (content.grid && content.rows && content.columns) {
+            return `Lưới ${content.rows}x${content.columns}`;
+        }
+        // LABEL_THE_PICTURE
+        if (content.wordBank) {
+            const words = content.wordBank.map((w) => w.text || w).slice(0, 3).join(', ');
+            return `Từ vựng: ${words}${content.wordBank.length > 3 ? '...' : ''}`;
+        }
+        // READ_AND_COLOR_OBJECTS / IMAGE_OBJECT_MATCHING
+        if (content.colorNodes || content.regionNodes) {
+            const regionCount = content.regionNodes?.length || 0;
+            return `${regionCount} vùng tô màu`;
+        }
+        // WRITE_A_SHORT_LETTER
+        if (content.contexts) {
+            const firstContext = content.contexts[0];
+            return firstContext?.text ? truncate(firstContext.text, 50) : 'Viết thư ngắn';
+        }
+        // CHOOSE_THE_CORRECT_ANSWER
+        if (content.options && Array.isArray(content.options)) {
+            return content.questionText || content.question || 'Câu hỏi trắc nghiệm';
+        }
+        // FILL_IN_BLANK
+        if (content.blanks) {
+            const firstBlank = content.blanks[0];
+            return firstBlank?.text || content.sentence || 'Điền vào chỗ trống';
+        }
+        // Fallback: try common field names
+        if (content.instruction)
+            return content.instruction;
+        if (content.mainTitle)
+            return content.mainTitle;
+        if (content.title)
+            return content.title;
+        if (content.text)
+            return content.text;
+    }
+    return type || 'Câu hỏi';
+};
+// Get difficulty badge color
+const getDifficultyBadgeClass = (difficulty) => {
+    switch (difficulty?.toUpperCase()) {
+        case 'EASY':
+            return 'bg-green-100 text-green-700 border-green-200';
+        case 'HARD':
+            return 'bg-red-100 text-red-700 border-red-200';
+        default:
+            return 'bg-yellow-100 text-yellow-700 border-yellow-200';
+    }
+};
+// Get difficulty display name
+const getDifficultyName = (difficulty) => {
+    switch (difficulty?.toUpperCase()) {
+        case 'EASY':
+            return 'Dễ';
+        case 'HARD':
+            return 'Khó';
+        case 'MEDIUM':
+            return 'TB';
+        default:
+            return 'TB';
+    }
+};
+// Get subquestion count if applicable
+const getSubQuestionCount = (question) => {
+    const content = question.content;
+    if (!content)
+        return null;
+    if (content.subQuestions && Array.isArray(content.subQuestions)) {
+        return content.subQuestions.length;
+    }
+    return null;
+};
+export function QuestionSearchDropdown({ questionType, onSelect, selectedQuestionLabel, placeholder = 'Tìm câu hỏi từ ngân hàng', disabled = false, buttonClassName, compact = false, searchQuestions, }) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [debouncedTerm, setDebouncedTerm] = useState('');
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedTerm(searchTerm.trim());
+        }, 300);
+        return () => clearTimeout(handler);
+    }, [searchTerm]);
+    // Transform QuestionBankItem to Question format with extended info
+    const transformToQuestion = (item) => ({
+        id: item.id,
+        type: item.questionType,
+        content: item.content,
+        answer: item.correctAnswer,
+        points: parseFloat(String(item.points ?? 1)) || 1,
+        difficulty: item.difficulty?.toUpperCase(),
+        skill: (item.skill || undefined),
+        explanation: item.explanation || undefined,
+        level: 'A1', // Default value
+        createdAt: item.createdAt,
+        updatedAt: item.updatedAt,
+        // Extended info from question bank
+        code: item.code,
+        title: item.title || undefined,
+        usageCount: item.usageCount,
+    });
+    // Host app may provide dynamic search directly via component props.
+    const { data: questionBankData, isFetching } = useQuery({
+        queryKey: ['questionBanks', 'search', questionType, debouncedTerm],
+        queryFn: async () => {
+            if (!searchQuestions)
+                return { data: [], meta: { totalItems: 0 } };
+            return searchQuestions({
+                questionType,
+                keyword: debouncedTerm || undefined,
+                page: 1,
+                size: 10,
+            });
+        },
+        enabled: open && Boolean(questionType) && Boolean(searchQuestions) && (debouncedTerm.length > 0 || !!questionType),
+        staleTime: 60 * 1000,
+        refetchOnWindowFocus: false,
+    });
+    // Transform API response to Question array
+    const questions = useMemo(() => {
+        if (!questionBankData?.data)
+            return [];
+        return questionBankData.data.map(transformToQuestion);
+    }, [questionBankData]);
+    const totalItems = questionBankData?.meta?.totalItems || 0;
+    const hasNoResults = !isFetching && questions.length === 0 && debouncedTerm.length > 0;
+    // Show empty bank message when: API returned (questionBankData exists), no questions, and no search term
+    const hasEmptyBank = !isFetching && questionBankData && questions.length === 0 && debouncedTerm.length === 0;
+    // Only show initial tips when: not fetching, no API response yet (first open before any query)
+    const showInitialMessage = !isFetching && !questionBankData && questions.length === 0 && debouncedTerm.length === 0;
+    const buttonLabel = useMemo(() => {
+        if (selectedQuestionLabel) {
+            return truncate(selectedQuestionLabel, 40);
+        }
+        return placeholder;
+    }, [placeholder, selectedQuestionLabel]);
+    const handleSelect = (question) => {
+        onSelect(question);
+        setOpen(false);
+        setSearchTerm('');
+        setDebouncedTerm('');
+    };
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: (value) => setOpen(!disabled && value), children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: disabled, children: compact ? (_jsxs("button", { type: "button", className: cn('group inline-flex h-8 items-center gap-1.5 rounded-md border px-3 text-sm font-medium transition-all', selectedQuestionLabel
+                        ? 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
+                        : 'border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700', 'focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-1', disabled && 'cursor-not-allowed opacity-50', buttonClassName), children: [selectedQuestionLabel ? (_jsx(CheckCircle2, { className: "h-4 w-4" })) : (_jsx(Library, { className: "h-4 w-4" })), selectedQuestionLabel ? 'Đã chọn' : 'Ngân hàng'] })) : (_jsxs("button", { type: "button", className: cn('group relative flex w-full items-center gap-3 rounded-xl border bg-white p-3 text-left shadow-sm transition-all', selectedQuestionLabel
+                        ? 'border-emerald-200 bg-gradient-to-r from-emerald-50/50 to-teal-50/50'
+                        : 'border-gray-200 hover:border-indigo-200 hover:bg-gradient-to-r hover:from-indigo-50/30 hover:to-purple-50/30', 'focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-1', disabled && 'cursor-not-allowed opacity-50', buttonClassName), children: [_jsx("div", { className: cn('flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg transition-all', selectedQuestionLabel
+                                ? 'bg-gradient-to-br from-emerald-500 to-teal-600 shadow-sm'
+                                : 'bg-gradient-to-br from-indigo-100 to-purple-100 group-hover:from-indigo-500 group-hover:to-purple-600 group-hover:shadow-sm'), children: selectedQuestionLabel ? (_jsx(CheckCircle2, { className: "h-5 w-5 text-white" })) : (_jsx(Library, { className: cn('h-5 w-5 transition-colors', 'text-indigo-500 group-hover:text-white') })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: cn('text-xs font-medium uppercase tracking-wide', selectedQuestionLabel ? 'text-emerald-600' : 'text-indigo-500'), children: selectedQuestionLabel ? '✓ Đã chọn từ ngân hàng' : 'Ngân hàng câu hỏi' }) }), _jsx("p", { className: cn('mt-0.5 truncate text-sm', selectedQuestionLabel ? 'font-medium text-gray-800' : 'text-gray-500'), children: selectedQuestionLabel
+                                        ? truncate(selectedQuestionLabel, 55)
+                                        : 'Nhấn để tìm và sử dụng câu hỏi có sẵn' })] }), _jsx("div", { className: cn('flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-all', selectedQuestionLabel
+                                ? 'bg-emerald-100 text-emerald-600'
+                                : 'bg-gray-100 text-gray-400 group-hover:bg-indigo-100 group-hover:text-indigo-600'), children: _jsx(Search, { className: "h-4 w-4" }) })] })) }), _jsxs(DropdownMenuContent, { className: "w-[520px] p-0", align: compact ? "end" : "start", children: [_jsx("div", { className: "border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-purple-50 px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm", children: _jsx(Library, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-800", children: "Ng\u00E2n h\u00E0ng c\u00E2u h\u1ECFi" }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1ECDn c\u00E2u h\u1ECFi c\u00F3 s\u1EB5n \u0111\u1EC3 \u0111i\u1EC1n nhanh v\u00E0o form" })] })] }) }), _jsxs("div", { className: "border-b border-gray-100 bg-gray-50/50 p-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" }), _jsx(Input, { placeholder: "T\u00ECm theo m\u00E3, ti\u00EAu \u0111\u1EC1 ho\u1EB7c n\u1ED9i dung...", value: searchTerm, onChange: (event) => setSearchTerm(event.target.value), autoFocus: true, className: "border-gray-200 bg-white pl-10 pr-10 transition-all focus:border-indigo-300 focus:ring-indigo-200" }), isFetching && (_jsx(Loader2, { className: "absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-indigo-500" }))] }), _jsxs("div", { className: "mt-2 flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(Badge, { variant: "outline", className: "border-indigo-200 bg-indigo-50 text-indigo-700", children: getQuestionTypeName(questionType) }) }), totalItems > 0 && (_jsxs("span", { className: "text-xs text-gray-500", children: ["Hi\u1EC3n th\u1ECB ", questions.length, "/", totalItems, " k\u1EBFt qu\u1EA3"] }))] })] }), _jsx(ScrollArea, { className: "h-80", children: showInitialMessage ? (_jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-indigo-100 to-purple-100", children: _jsx(Sparkles, { className: "h-8 w-8 text-indigo-500" }) }), _jsx("p", { className: "text-sm font-medium text-gray-700", children: "T\u00ECm c\u00E2u h\u1ECFi t\u1EEB ng\u00E2n h\u00E0ng" }), _jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Nh\u1EADp m\u00E3 c\u00E2u h\u1ECFi, ti\u00EAu \u0111\u1EC1 ho\u1EB7c t\u1EEB kh\u00F3a \u0111\u1EC3 t\u00ECm ki\u1EBFm" }), _jsx("div", { className: "mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0 text-blue-500" }), _jsxs("div", { className: "text-left text-xs text-blue-700", children: [_jsx("p", { className: "font-medium", children: "M\u1EB9o t\u00ECm ki\u1EBFm nhanh:" }), _jsxs("ul", { className: "mt-1 list-inside list-disc space-y-0.5 text-blue-600", children: [_jsx("li", { children: "Nh\u1EADp m\u00E3 c\u00E2u h\u1ECFi (VD: M001)" }), _jsx("li", { children: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 ho\u1EB7c m\u1ED9t ph\u1EA7n n\u1ED9i dung" }), _jsx("li", { children: "K\u1EBFt qu\u1EA3 s\u1EBD t\u1EF1 \u0111\u1ED9ng c\u1EADp nh\u1EADt" })] })] })] }) })] })) : hasEmptyBank ? (_jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-100", children: _jsx(Library, { className: "h-8 w-8 text-amber-500" }) }), _jsx("p", { className: "text-sm font-medium text-gray-700", children: "Ch\u01B0a c\u00F3 c\u00E2u h\u1ECFi trong ng\u00E2n h\u00E0ng" }), _jsxs("p", { className: "mt-1 text-xs text-gray-500", children: ["Ng\u00E2n h\u00E0ng c\u00E2u h\u1ECFi ch\u01B0a c\u00F3 d\u1EEF li\u1EC7u cho lo\u1EA1i: ", _jsx("strong", { children: getQuestionTypeName(questionType) })] }), _jsx("p", { className: "mt-2 text-xs text-gray-400", children: "H\u00E3y th\u00EAm c\u00E2u h\u1ECFi v\u00E0o ng\u00E2n h\u00E0ng ho\u1EB7c t\u1EA1o c\u00E2u h\u1ECFi m\u1EDBi" })] })) : hasNoResults ? (_jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100", children: _jsx(Search, { className: "h-8 w-8 text-gray-400" }) }), _jsx("p", { className: "text-sm font-medium text-gray-700", children: "Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3" }), _jsxs("p", { className: "mt-1 text-xs text-gray-500", children: ["Th\u1EED t\u00ECm v\u1EDBi t\u1EEB kh\u00F3a kh\u00E1c: \"", debouncedTerm, "\""] })] })) : (_jsx("div", { className: "divide-y divide-gray-100 p-2", children: questions.map((question) => {
+                                const subQuestionCount = getSubQuestionCount(question);
+                                return (_jsxs(DropdownMenuItem, { className: "flex cursor-pointer flex-col items-start gap-2 rounded-xl p-3 transition-all hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 focus:bg-gradient-to-r focus:from-indigo-50 focus:to-purple-50", onSelect: () => handleSelect(question), children: [_jsxs("div", { className: "flex w-full items-start justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [question.code && (_jsxs("div", { className: "flex items-center gap-1 rounded-md bg-gradient-to-r from-indigo-500 to-purple-500 px-2 py-0.5 text-xs font-bold text-white shadow-sm", children: [_jsx(Hash, { className: "h-3 w-3" }), question.code] })), _jsx("div", { className: "flex-shrink-0", children: getQuestionTypeIcon(question.type) })] }), question.usageCount !== undefined && question.usageCount > 0 && (_jsxs("div", { className: "flex items-center gap-1 text-xs text-gray-500", title: "S\u1ED1 l\u1EA7n s\u1EED d\u1EE5ng", children: [_jsx(BarChart3, { className: "h-3 w-3" }), question.usageCount] }))] }), question.title && (_jsx("p", { className: "text-sm font-semibold text-gray-800", children: truncate(question.title, 60) })), _jsx("p", { className: "text-xs text-gray-600", children: truncate(getQuestionDisplayText(question), 80) }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: "outline", className: cn('px-2 py-0.5 text-[10px] font-semibold', getDifficultyBadgeClass(question.difficulty)), children: getDifficultyName(question.difficulty) }), _jsxs(Badge, { variant: "outline", className: "border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-semibold text-blue-700", children: [question.points || 1, " \u0111i\u1EC3m"] }), question.skill && (_jsx(Badge, { variant: "outline", className: "border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-semibold text-gray-600", children: question.skill.toLowerCase() })), subQuestionCount && subQuestionCount > 1 && (_jsxs(Badge, { variant: "outline", className: "border-purple-200 bg-purple-50 px-2 py-0.5 text-[10px] font-semibold text-purple-700", children: [subQuestionCount, " c\u00E2u con"] }))] })] }, question.id));
+                            }) })) }), _jsx("div", { className: "border-t border-gray-100 bg-gray-50/50 px-4 py-2", children: _jsx("p", { className: "text-center text-xs text-gray-500", children: "Click \u0111\u1EC3 ch\u1ECDn c\u00E2u h\u1ECFi v\u00E0 t\u1EF1 \u0111\u1ED9ng \u0111i\u1EC1n v\u00E0o form" }) })] })] }));
+}