import React, { useState, useCallback, useEffect } from 'react';
import { AlertCircle, X, CheckCircle2, Upload, Plus, RefreshCw, Star, ExternalLink, Edit, Copy, Download, Trash2, Save, Image } from 'lucide-react';

// src/testYourself/admin/ConfigManager.tsx

// src/testYourself/data/defaultResults.ts
var DEFAULT_RESULTS = [
  // 动物系列 (1-15)
  {
    id: "animal-cat",
    title: "\u6175\u61D2\u7684\u732B\u54AA \u{1F431}",
    description: "\u4F60\u5C31\u50CF\u4E00\u53EA\u4F18\u96C5\u7684\u732B\uFF0C\u72EC\u7ACB\u81EA\u4E3B\uFF0C\u559C\u6B22\u6309\u7167\u81EA\u5DF1\u7684\u8282\u594F\u751F\u6D3B\u3002\u6709\u65F6\u9AD8\u51B7\uFF0C\u6709\u65F6\u7C98\u4EBA\uFF0C\u5145\u6EE1\u795E\u79D8\u9B45\u529B\u3002",
    image: "\u{1F431}",
    imageType: "emoji"
  },
  {
    id: "animal-dog",
    title: "\u5FE0\u8BDA\u7684\u72D7\u72D7 \u{1F415}",
    description: "\u4F60\u50CF\u4E00\u53EA\u70ED\u60C5\u7684\u72D7\u72D7\uFF0C\u5BF9\u670B\u53CB\u5FE0\u8BDA\uFF0C\u5145\u6EE1\u6D3B\u529B\u3002\u603B\u662F\u80FD\u7ED9\u5468\u56F4\u7684\u4EBA\u5E26\u6765\u6B22\u4E50\u548C\u6E29\u6696\u3002",
    image: "\u{1F415}",
    imageType: "emoji"
  },
  {
    id: "animal-panda",
    title: "\u53EF\u7231\u7684\u718A\u732B \u{1F43C}",
    description: "\u4F60\u5C31\u50CF\u56FD\u5B9D\u718A\u732B\u4E00\u6837\uFF0C\u5446\u840C\u53EF\u7231\uFF0C\u4EBA\u89C1\u4EBA\u7231\u3002\u6162\u8282\u594F\u7684\u751F\u6D3B\u65B9\u5F0F\u8BA9\u4F60\u5145\u6EE1\u6CBB\u6108\u529B\u3002",
    image: "\u{1F43C}",
    imageType: "emoji"
  },
  {
    id: "animal-fox",
    title: "\u673A\u667A\u7684\u72D0\u72F8 \u{1F98A}",
    description: "\u806A\u660E\u4F36\u4FD0\uFF0C\u53CD\u5E94\u654F\u6377\u3002\u4F60\u603B\u80FD\u7528\u667A\u6167\u89E3\u51B3\u95EE\u9898\uFF0C\u662F\u56E2\u961F\u4E2D\u7684\u667A\u56CA\u62C5\u5F53\u3002",
    image: "\u{1F98A}",
    imageType: "emoji"
  },
  {
    id: "animal-owl",
    title: "\u777F\u667A\u7684\u732B\u5934\u9E70 \u{1F989}",
    description: "\u4F60\u50CF\u732B\u5934\u9E70\u4E00\u6837\u5145\u6EE1\u667A\u6167\uFF0C\u559C\u6B22\u5728\u591C\u6DF1\u4EBA\u9759\u65F6\u601D\u8003\u3002\u7406\u6027\u3001\u6C89\u7A33\u662F\u4F60\u7684\u6807\u7B7E\u3002",
    image: "\u{1F989}",
    imageType: "emoji"
  },
  {
    id: "animal-dolphin",
    title: "\u5FEB\u4E50\u7684\u6D77\u8C5A \u{1F42C}",
    description: "\u6D3B\u6CFC\u5F00\u6717\uFF0C\u793E\u4EA4\u8FBE\u4EBA\u3002\u4F60\u7684\u7B11\u5BB9\u80FD\u591F\u611F\u67D3\u8EAB\u8FB9\u7684\u6BCF\u4E00\u4E2A\u4EBA\u3002",
    image: "\u{1F42C}",
    imageType: "emoji"
  },
  {
    id: "animal-butterfly",
    title: "\u81EA\u7531\u7684\u8774\u8776 \u{1F98B}",
    description: "\u8FFD\u6C42\u81EA\u7531\uFF0C\u70ED\u7231\u7F8E\u597D\u4E8B\u7269\u3002\u4F60\u7684\u4EBA\u751F\u5145\u6EE1\u8272\u5F69\uFF0C\u4ECE\u4E0D\u88AB\u675F\u7F1A\u3002",
    image: "\u{1F98B}",
    imageType: "emoji"
  },
  {
    id: "animal-lion",
    title: "\u52C7\u6562\u7684\u72EE\u5B50 \u{1F981}",
    description: "\u5929\u751F\u7684\u9886\u5BFC\u8005\uFF0C\u52C7\u6562\u679C\u65AD\u3002\u4F60\u7684\u6C14\u573A\u5F3A\u5927\uFF0C\u603B\u80FD\u6FC0\u52B1\u4ED6\u4EBA\u3002",
    image: "\u{1F981}",
    imageType: "emoji"
  },
  {
    id: "animal-rabbit",
    title: "\u6E29\u67D4\u7684\u5154\u5B50 \u{1F430}",
    description: "\u5FC3\u5730\u5584\u826F\uFF0C\u6E29\u67D4\u4F53\u8D34\u3002\u4F60\u7684\u5B58\u5728\u5C31\u50CF\u6625\u5929\u7684\u5FAE\u98CE\uFF0C\u8BA9\u4EBA\u611F\u5230\u6E29\u6696\u3002",
    image: "\u{1F430}",
    imageType: "emoji"
  },
  {
    id: "animal-penguin",
    title: "\u5446\u840C\u7684\u4F01\u9E45 \u{1F427}",
    description: "\u61A8\u6001\u53EF\u63AC\uFF0C\u8BA4\u771F\u6267\u7740\u3002\u867D\u7136\u770B\u8D77\u6765\u7B28\u62D9\uFF0C\u4F46\u505A\u4E8B\u4E00\u4E1D\u4E0D\u82DF\u3002",
    image: "\u{1F427}",
    imageType: "emoji"
  },
  {
    id: "animal-eagle",
    title: "\u7FF1\u7FD4\u7684\u96C4\u9E70 \u{1F985}",
    description: "\u76EE\u5149\u8FDC\u5927\uFF0C\u5FD7\u5411\u9AD8\u8FDC\u3002\u4F60\u603B\u662F\u80FD\u770B\u5230\u522B\u4EBA\u770B\u4E0D\u5230\u7684\u673A\u4F1A\u3002",
    image: "\u{1F985}",
    imageType: "emoji"
  },
  {
    id: "animal-koala",
    title: "\u6175\u61D2\u7684\u8003\u62C9 \u{1F428}",
    description: "\u4F5B\u7CFB\u751F\u6D3B\uFF0C\u77E5\u8DB3\u5E38\u4E50\u3002\u4F60\u61C2\u5F97\u4EAB\u53D7\u5F53\u4E0B\uFF0C\u6D3B\u5728\u81EA\u5DF1\u7684\u8282\u594F\u91CC\u3002",
    image: "\u{1F428}",
    imageType: "emoji"
  },
  {
    id: "animal-sloth",
    title: "\u60A0\u95F2\u7684\u6811\u61D2 \u{1F9A5}",
    description: "\u6162\u6162\u6765\uFF0C\u6BD4\u8F83\u5FEB\u3002\u4F60\u76F8\u4FE1\u6025\u4E0D\u6765\u7684\u4E8B\u5C31\u4E0D\u8981\u6025\uFF0C\u4FDD\u6301\u81EA\u5DF1\u7684pace\u3002",
    image: "\u{1F9A5}",
    imageType: "emoji"
  },
  {
    id: "animal-unicorn",
    title: "\u68A6\u5E7B\u7684\u72EC\u89D2\u517D \u{1F984}",
    description: "\u5145\u6EE1\u5E7B\u60F3\uFF0C\u8FFD\u6C42\u5B8C\u7F8E\u3002\u4F60\u7684\u4E16\u754C\u4E94\u5F69\u6591\u6593\uFF0C\u603B\u6709\u72EC\u7279\u7684\u60F3\u6CD5\u3002",
    image: "\u{1F984}",
    imageType: "emoji"
  },
  {
    id: "animal-dragon",
    title: "\u795E\u79D8\u7684\u9F99 \u{1F409}",
    description: "\u5F3A\u5927\u800C\u795E\u79D8\uFF0C\u5145\u6EE1\u9B45\u529B\u3002\u4F60\u662F\u4F20\u8BF4\u4E2D\u7684\u5B58\u5728\uFF0C\u4EE4\u4EBA\u5411\u5F80\u3002",
    image: "\u{1F409}",
    imageType: "emoji"
  },
  // 星球系列 (16-25)
  {
    id: "planet-sun",
    title: "\u6E29\u6696\u7684\u592A\u9633 \u2600\uFE0F",
    description: "\u4F60\u5C31\u50CF\u592A\u9633\u4E00\u6837\uFF0C\u662F\u56E2\u961F\u7684\u80FD\u91CF\u6765\u6E90\uFF0C\u6E29\u6696\u7740\u5468\u56F4\u7684\u6BCF\u4E2A\u4EBA\u3002",
    image: "\u2600\uFE0F",
    imageType: "emoji"
  },
  {
    id: "planet-moon",
    title: "\u6E29\u67D4\u7684\u6708\u4EAE \u{1F319}",
    description: "\u5B89\u9759\u800C\u6E29\u67D4\uFF0C\u5728\u9ED1\u6697\u4E2D\u7ED9\u4EBA\u5149\u660E\u3002\u4F60\u662F\u591C\u665A\u6700\u7F8E\u7684\u966A\u4F34\u3002",
    image: "\u{1F319}",
    imageType: "emoji"
  },
  {
    id: "planet-star",
    title: "\u95EA\u8000\u7684\u661F\u661F \u2B50",
    description: "\u867D\u7136\u6E3A\u5C0F\uFF0C\u4F46\u59CB\u7EC8\u95EA\u8000\u3002\u4F60\u7528\u81EA\u5DF1\u7684\u65B9\u5F0F\u53D1\u5149\u53D1\u70ED\u3002",
    image: "\u2B50",
    imageType: "emoji"
  },
  {
    id: "planet-earth",
    title: "\u5305\u5BB9\u7684\u5730\u7403 \u{1F30D}",
    description: "\u5305\u5BB9\u4E07\u7269\uFF0C\u751F\u673A\u52C3\u52C3\u3002\u4F60\u6709\u7740\u5BBD\u5E7F\u7684\u80F8\u6000\u548C\u65E0\u9650\u7684\u53EF\u80FD\u3002",
    image: "\u{1F30D}",
    imageType: "emoji"
  },
  {
    id: "planet-saturn",
    title: "\u72EC\u7279\u7684\u571F\u661F \u{1FA90}",
    description: "\u4E0E\u4F17\u4E0D\u540C\uFF0C\u81EA\u6210\u4E00\u683C\u3002\u4F60\u7684\u4E2A\u6027\u5C31\u50CF\u571F\u661F\u73AF\u4E00\u6837\u4EE4\u4EBA\u7740\u8FF7\u3002",
    image: "\u{1FA90}",
    imageType: "emoji"
  },
  {
    id: "weather-rainbow",
    title: "\u7EDA\u4E3D\u7684\u5F69\u8679 \u{1F308}",
    description: "\u98CE\u96E8\u8FC7\u540E\u89C1\u5F69\u8679\uFF0C\u4F60\u603B\u80FD\u5728\u56F0\u96BE\u540E\u770B\u5230\u5E0C\u671B\u548C\u7F8E\u597D\u3002",
    image: "\u{1F308}",
    imageType: "emoji"
  },
  {
    id: "weather-cloud",
    title: "\u98D8\u9038\u7684\u4E91\u6735 \u2601\uFE0F",
    description: "\u81EA\u7531\u81EA\u5728\uFF0C\u968F\u98CE\u98D8\u8361\u3002\u4F60\u4E0D\u88AB\u5B9A\u4E49\uFF0C\u6C38\u8FDC\u5145\u6EE1\u53EF\u80FD\u3002",
    image: "\u2601\uFE0F",
    imageType: "emoji"
  },
  {
    id: "weather-lightning",
    title: "\u95EA\u7535 \u26A1",
    description: "\u7206\u53D1\u529B\u5F3A\uFF0C\u884C\u52A8\u8FC5\u901F\u3002\u4F60\u7684\u80FD\u91CF\u5C31\u50CF\u95EA\u7535\u4E00\u6837\u4EE4\u4EBA\u9707\u64BC\u3002",
    image: "\u26A1",
    imageType: "emoji"
  },
  {
    id: "weather-snowflake",
    title: "\u72EC\u7279\u7684\u96EA\u82B1 \u2744\uFE0F",
    description: "\u4E16\u754C\u4E0A\u6CA1\u6709\u4E24\u7247\u76F8\u540C\u7684\u96EA\u82B1\uFF0C\u4F60\u4E5F\u662F\u72EC\u4E00\u65E0\u4E8C\u7684\u5B58\u5728\u3002",
    image: "\u2744\uFE0F",
    imageType: "emoji"
  },
  {
    id: "weather-fire",
    title: "\u70ED\u60C5\u7684\u706B\u7130 \u{1F525}",
    description: "\u70ED\u60C5\u4F3C\u706B\uFF0C\u5145\u6EE1\u6FC0\u60C5\u3002\u4F60\u7684\u5B58\u5728\u80FD\u70B9\u71C3\u5468\u56F4\u7684\u6C14\u6C1B\u3002",
    image: "\u{1F525}",
    imageType: "emoji"
  },
  // 植物系列 (26-35)
  {
    id: "plant-tree",
    title: "\u575A\u97E7\u7684\u5927\u6811 \u{1F333}",
    description: "\u7A33\u91CD\u53EF\u9760\uFF0C\u6839\u57FA\u6DF1\u539A\u3002\u4F60\u662F\u5927\u5BB6\u53EF\u4EE5\u4F9D\u9760\u7684\u5B58\u5728\u3002",
    image: "\u{1F333}",
    imageType: "emoji"
  },
  {
    id: "plant-flower",
    title: "\u7F8E\u4E3D\u7684\u82B1\u6735 \u{1F338}",
    description: "\u7EFD\u653E\u81EA\u6211\uFF0C\u7F8E\u4E3D\u52A8\u4EBA\u3002\u4F60\u7684\u5B58\u5728\u5C31\u662F\u4E00\u9053\u9753\u4E3D\u7684\u98CE\u666F\u3002",
    image: "\u{1F338}",
    imageType: "emoji"
  },
  {
    id: "plant-sunflower",
    title: "\u5411\u9633\u7684\u5411\u65E5\u8475 \u{1F33B}",
    description: "\u6C38\u8FDC\u5411\u7740\u9633\u5149\uFF0C\u79EF\u6781\u5411\u4E0A\u3002\u4F60\u7684\u4E50\u89C2\u611F\u67D3\u7740\u6BCF\u4E2A\u4EBA\u3002",
    image: "\u{1F33B}",
    imageType: "emoji"
  },
  {
    id: "plant-rose",
    title: "\u4F18\u96C5\u7684\u73AB\u7470 \u{1F339}",
    description: "\u9AD8\u8D35\u4F18\u96C5\uFF0C\u5145\u6EE1\u9B45\u529B\u3002\u867D\u6709\u523A\u4F46\u66F4\u6709\u7F8E\u4E3D\u3002",
    image: "\u{1F339}",
    imageType: "emoji"
  },
  {
    id: "plant-cactus",
    title: "\u575A\u5F3A\u7684\u4ED9\u4EBA\u638C \u{1F335}",
    description: "\u5728\u8270\u96BE\u73AF\u5883\u4E2D\u4F9D\u7136\u575A\u5F3A\u3002\u4F60\u7684\u97E7\u6027\u4EE4\u4EBA\u656C\u4F69\u3002",
    image: "\u{1F335}",
    imageType: "emoji"
  },
  {
    id: "plant-clover",
    title: "\u5E78\u8FD0\u7684\u56DB\u53F6\u8349 \u{1F340}",
    description: "\u5E78\u8FD0\u7684\u8C61\u5F81\uFF0C\u603B\u80FD\u7ED9\u4EBA\u5E26\u6765\u597D\u8FD0\u548C\u5E0C\u671B\u3002",
    image: "\u{1F340}",
    imageType: "emoji"
  },
  {
    id: "plant-maple",
    title: "\u6D6A\u6F2B\u7684\u67AB\u53F6 \u{1F341}",
    description: "\u6D6A\u6F2B\u800C\u8BD7\u610F\uFF0C\u4F60\u7684\u4E16\u754C\u5145\u6EE1\u827A\u672F\u6C14\u606F\u3002",
    image: "\u{1F341}",
    imageType: "emoji"
  },
  {
    id: "plant-mushroom",
    title: "\u795E\u79D8\u7684\u8611\u83C7 \u{1F344}",
    description: "\u4F4E\u8C03\u795E\u79D8\uFF0C\u603B\u6709\u610F\u60F3\u4E0D\u5230\u7684\u60CA\u559C\u3002",
    image: "\u{1F344}",
    imageType: "emoji"
  },
  {
    id: "plant-cherry",
    title: "\u6D6A\u6F2B\u7684\u6A31\u82B1 \u{1F338}",
    description: "\u77ED\u6682\u800C\u7F8E\u597D\uFF0C\u4F60\u73CD\u60DC\u6BCF\u4E00\u4E2A\u77AC\u95F4\u7684\u7F8E\u4E3D\u3002",
    image: "\u{1F338}",
    imageType: "emoji"
  },
  {
    id: "plant-bamboo",
    title: "\u575A\u97E7\u7684\u7AF9\u5B50 \u{1F38B}",
    description: "\u865A\u5FC3\u6709\u8282\uFF0C\u6108\u632B\u6108\u52C7\u3002\u4F60\u7684\u7CBE\u795E\u503C\u5F97\u5B66\u4E60\u3002",
    image: "\u{1F38B}",
    imageType: "emoji"
  },
  // 食物系列 (36-45)
  {
    id: "food-coffee",
    title: "\u63D0\u795E\u7684\u5496\u5561 \u2615",
    description: "\u4F60\u5C31\u50CF\u5496\u5561\uFF0C\u662F\u5927\u5BB6\u7684\u80FD\u91CF\u6765\u6E90\uFF0C\u5E2E\u52A9\u4ED6\u4EBA\u4FDD\u6301\u6D3B\u529B\u3002",
    image: "\u2615",
    imageType: "emoji"
  },
  {
    id: "food-pizza",
    title: "\u5FEB\u4E50\u7684\u62AB\u8428 \u{1F355}",
    description: "\u4EBA\u89C1\u4EBA\u7231\uFF0C\u603B\u80FD\u5E26\u6765\u5FEB\u4E50\u3002\u4F60\u662F\u805A\u4F1A\u7684\u7075\u9B42\u3002",
    image: "\u{1F355}",
    imageType: "emoji"
  },
  {
    id: "food-cookie",
    title: "\u751C\u871C\u7684\u997C\u5E72 \u{1F36A}",
    description: "\u6E29\u6696\u751C\u871C\uFF0C\u7ED9\u4EBAcomfort\u3002\u4F60\u662F\u6700\u597D\u7684\u6CBB\u6108\u7CFB\u5B58\u5728\u3002",
    image: "\u{1F36A}",
    imageType: "emoji"
  },
  {
    id: "food-icecream",
    title: "\u6E05\u51C9\u7684\u51B0\u6DC7\u6DCB \u{1F366}",
    description: "\u751C\u7F8E\u53EF\u7231\uFF0C\u5728\u708E\u70ED\u65F6\u7ED9\u4EBA\u6E05\u51C9\u3002\u4F60\u603B\u80FD\u5728\u5173\u952E\u65F6\u523B\u51FA\u73B0\u3002",
    image: "\u{1F366}",
    imageType: "emoji"
  },
  {
    id: "food-honey",
    title: "\u751C\u871C\u7684\u8702\u871C \u{1F36F}",
    description: "\u5929\u7136\u751C\u7F8E\uFF0C\u7EAF\u7CB9\u53EF\u7231\u3002\u4F60\u7684\u5B58\u5728\u5C31\u662F\u5E78\u798F\u7684\u5473\u9053\u3002",
    image: "\u{1F36F}",
    imageType: "emoji"
  },
  {
    id: "food-sushi",
    title: "\u7CBE\u81F4\u7684\u5BFF\u53F8 \u{1F363}",
    description: "\u7CBE\u81F4\u4F18\u96C5\uFF0C\u6CE8\u91CD\u7EC6\u8282\u3002\u4F60\u5BF9\u751F\u6D3B\u6709\u7740\u72EC\u7279\u7684\u54C1\u5473\u3002",
    image: "\u{1F363}",
    imageType: "emoji"
  },
  {
    id: "food-cake",
    title: "\u751C\u7F8E\u7684\u86CB\u7CD5 \u{1F382}",
    description: "\u751C\u871C\u7F8E\u597D\uFF0C\u662F\u5E86\u795D\u7684\u8C61\u5F81\u3002\u4F60\u603B\u80FD\u7ED9\u4EBA\u5E26\u6765\u60CA\u559C\u3002",
    image: "\u{1F382}",
    imageType: "emoji"
  },
  {
    id: "food-donut",
    title: "\u53EF\u7231\u7684\u751C\u751C\u5708 \u{1F369}",
    description: "\u5706\u5706\u6EE1\u6EE1\uFF0C\u751C\u871C\u53EF\u7231\u3002\u4F60\u7684\u5B58\u5728\u8BA9\u751F\u6D3B\u66F4\u7F8E\u597D\u3002",
    image: "\u{1F369}",
    imageType: "emoji"
  },
  {
    id: "food-lollipop",
    title: "\u7AE5\u771F\u7684\u68D2\u68D2\u7CD6 \u{1F36D}",
    description: "\u4FDD\u6301\u7AE5\u5FC3\uFF0C\u6C38\u8FDC\u5E74\u8F7B\u3002\u4F60\u7684\u7EAF\u771F\u4EE4\u4EBA\u7FA1\u6155\u3002",
    image: "\u{1F36D}",
    imageType: "emoji"
  },
  {
    id: "food-watermelon",
    title: "\u6E05\u723D\u7684\u897F\u74DC \u{1F349}",
    description: "\u6E05\u723D\u89E3\u6E34\uFF0C\u590F\u65E5\u5FC5\u5907\u3002\u4F60\u603B\u80FD\u5E26\u6765\u6E05\u65B0\u7684\u611F\u89C9\u3002",
    image: "\u{1F349}",
    imageType: "emoji"
  }
];
if (DEFAULT_RESULTS.length !== 45) {
  console.warn(`\u7ED3\u679C\u6570\u636E\u96C6\u5E94\u5305\u542B45\u9879\uFF0C\u5F53\u524D: ${DEFAULT_RESULTS.length}`);
}

// src/testYourself/admin/ConfigManager.tsx
var ConfigManager = ({
  configService,
  onConfigChange,
  className = "",
  onImageUpload
}) => {
  const [configs, setConfigs] = useState([]);
  const [selectedConfig, setSelectedConfig] = useState(null);
  const [isEditing, setIsEditing] = useState(false);
  const [isCreating, setIsCreating] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(null);
  const [editForm, setEditForm] = useState({
    name: "",
    description: "",
    gameTitle: "",
    gameDescription: "",
    buttonText: "\u957F\u6309\u5F00\u59CB\u6D4B\u8BD5",
    longPressDuration: 2e3,
    results: []
  });
  const loadConfigs = useCallback(async () => {
    try {
      setLoading(true);
      const allConfigs = await configService.getAllConfigs();
      setConfigs(allConfigs);
      onConfigChange?.(allConfigs);
    } catch (err) {
      setError(`\u52A0\u8F7D\u914D\u7F6E\u5931\u8D25: ${err.message}`);
    } finally {
      setLoading(false);
    }
  }, [configService, onConfigChange]);
  useEffect(() => {
    loadConfigs();
  }, [loadConfigs]);
  const handleStartCreate = () => {
    setEditForm({
      name: "\u65B0\u914D\u7F6E",
      description: "",
      gameTitle: "\u6D4B\u6D4B\u4F60\u662F\u4EC0\u4E48",
      gameDescription: "\u957F\u6309\u6309\u94AE\uFF0C\u53D1\u73B0\u4F60\u7684\u4E13\u5C5E\u5C5E\u6027",
      buttonText: "\u957F\u6309\u5F00\u59CB\u6D4B\u8BD5",
      longPressDuration: 2e3,
      results: []
    });
    setIsCreating(true);
    setIsEditing(true);
    setSelectedConfig(null);
  };
  const handleStartEdit = (config) => {
    setEditForm({
      name: config.name,
      description: config.description || "",
      gameTitle: config.config.gameTitle,
      gameDescription: config.config.gameDescription || "",
      buttonText: config.config.buttonText || "\u957F\u6309\u5F00\u59CB\u6D4B\u8BD5",
      longPressDuration: config.config.longPressDuration || 2e3,
      results: config.config.results
    });
    setIsCreating(false);
    setIsEditing(true);
    setSelectedConfig(config);
  };
  const handleCancelEdit = () => {
    setIsEditing(false);
    setIsCreating(false);
    setSelectedConfig(null);
    setError(null);
  };
  const handleSave = async () => {
    try {
      setError(null);
      if (!editForm.name.trim()) {
        setError("\u8BF7\u8F93\u5165\u914D\u7F6E\u540D\u79F0");
        return;
      }
      if (!editForm.gameTitle.trim()) {
        setError("\u8BF7\u8F93\u5165\u6E38\u620F\u6807\u9898");
        return;
      }
      if (editForm.results.length === 0) {
        setError("\u8BF7\u81F3\u5C11\u6DFB\u52A0\u4E00\u4E2A\u7ED3\u679C\u9879");
        return;
      }
      const testConfig = {
        gameTitle: editForm.gameTitle,
        gameDescription: editForm.gameDescription,
        buttonText: editForm.buttonText,
        longPressDuration: editForm.longPressDuration,
        results: editForm.results
      };
      if (isCreating) {
        await configService.createConfig(
          editForm.name,
          testConfig,
          editForm.description
        );
        setSuccess("\u521B\u5EFA\u914D\u7F6E\u6210\u529F\uFF01");
      } else if (selectedConfig) {
        await configService.updateConfig(selectedConfig.id, {
          name: editForm.name,
          description: editForm.description,
          config: testConfig
        });
        setSuccess("\u66F4\u65B0\u914D\u7F6E\u6210\u529F\uFF01");
      }
      await loadConfigs();
      handleCancelEdit();
      setTimeout(() => setSuccess(null), 3e3);
    } catch (err) {
      setError(`\u4FDD\u5B58\u5931\u8D25: ${err.message}`);
    }
  };
  const handleDelete = async (id) => {
    if (!confirm("\u786E\u5B9A\u8981\u5220\u9664\u8FD9\u4E2A\u914D\u7F6E\u5417\uFF1F")) return;
    try {
      await configService.deleteConfig(id);
      await loadConfigs();
      setSuccess("\u5220\u9664\u6210\u529F\uFF01");
      setTimeout(() => setSuccess(null), 3e3);
    } catch (err) {
      setError(`\u5220\u9664\u5931\u8D25: ${err.message}`);
    }
  };
  const handleDuplicate = async (id) => {
    try {
      await configService.duplicateConfig(id);
      await loadConfigs();
      setSuccess("\u590D\u5236\u6210\u529F\uFF01");
      setTimeout(() => setSuccess(null), 3e3);
    } catch (err) {
      setError(`\u590D\u5236\u5931\u8D25: ${err.message}`);
    }
  };
  const handleSetDefault = async (id) => {
    try {
      await configService.setDefaultConfig(id);
      await loadConfigs();
      setSuccess("\u8BBE\u7F6E\u9ED8\u8BA4\u914D\u7F6E\u6210\u529F\uFF01");
      setTimeout(() => setSuccess(null), 3e3);
    } catch (err) {
      setError(`\u8BBE\u7F6E\u5931\u8D25: ${err.message}`);
    }
  };
  const handleExport = async (id) => {
    try {
      const jsonString = await configService.exportConfig(id);
      const blob = new Blob([jsonString], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `config_${id}.json`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      setSuccess("\u5BFC\u51FA\u6210\u529F\uFF01");
      setTimeout(() => setSuccess(null), 3e3);
    } catch (err) {
      setError(`\u5BFC\u51FA\u5931\u8D25: ${err.message}`);
    }
  };
  const handleImport = async () => {
    const input = document.createElement("input");
    input.type = "file";
    input.accept = ".json";
    input.onchange = async (e) => {
      const file = e.target.files?.[0];
      if (!file) return;
      try {
        const text = await file.text();
        await configService.importConfig(text);
        await loadConfigs();
        setSuccess("\u5BFC\u5165\u6210\u529F\uFF01");
        setTimeout(() => setSuccess(null), 3e3);
      } catch (err) {
        setError(`\u5BFC\u5165\u5931\u8D25: ${err.message}`);
      }
    };
    input.click();
  };
  const handleAddResult = () => {
    const newResult = {
      id: `temp_${Date.now()}`,
      _tempId: `temp_${Date.now()}`,
      title: "\u65B0\u7ED3\u679C",
      description: "\u8FD9\u662F\u4E00\u4E2A\u65B0\u7684\u7ED3\u679C\u63CF\u8FF0",
      image: "\u{1F389}",
      imageType: "emoji"
    };
    setEditForm({
      ...editForm,
      results: [...editForm.results, newResult]
    });
  };
  const handleDeleteResult = (index) => {
    const newResults = [...editForm.results];
    newResults.splice(index, 1);
    setEditForm({ ...editForm, results: newResults });
  };
  const handleUpdateResult = (index, updates) => {
    const newResults = [...editForm.results];
    newResults[index] = { ...newResults[index], ...updates };
    setEditForm({ ...editForm, results: newResults });
  };
  const handleResultImageUpload = async (index, file) => {
    try {
      if (!onImageUpload) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const base64 = e.target?.result;
          handleUpdateResult(index, {
            image: base64,
            imageType: "url"
          });
        };
        reader.readAsDataURL(file);
      } else {
        const url = await onImageUpload(file);
        handleUpdateResult(index, {
          image: url,
          imageType: "url"
        });
      }
    } catch (err) {
      setError(`\u4E0A\u4F20\u56FE\u7247\u5931\u8D25: ${err.message}`);
    }
  };
  const handleUseDefaultResults = () => {
    if (confirm("\u786E\u5B9A\u8981\u4F7F\u7528\u9ED8\u8BA4\u768445\u4E2A\u7ED3\u679C\u5417\uFF1F\u8FD9\u5C06\u66FF\u6362\u5F53\u524D\u7684\u6240\u6709\u7ED3\u679C\u3002")) {
      setEditForm({ ...editForm, results: DEFAULT_RESULTS });
    }
  };
  const renderConfigList = () => /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, configs.map((config) => /* @__PURE__ */ React.createElement(
    "div",
    {
      key: config.id,
      className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow"
    },
    /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 mb-1" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white" }, config.name), config.isDefault && /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200" }, /* @__PURE__ */ React.createElement(Star, { className: "w-3 h-3" }), "\u9ED8\u8BA4")), config.description && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-2" }, config.description), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400" }, /* @__PURE__ */ React.createElement("span", null, "\u7ED3\u679C\u6570: ", config.config.results.length), /* @__PURE__ */ React.createElement("span", null, "\u521B\u5EFA: ", new Date(config.createdAt).toLocaleDateString()))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleSetDefault(config.id),
        disabled: config.isDefault,
        className: "p-2 text-gray-600 hover:text-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed",
        title: "\u8BBE\u4E3A\u9ED8\u8BA4"
      },
      /* @__PURE__ */ React.createElement(Star, { className: "w-5 h-5" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleStartEdit(config),
        className: "p-2 text-gray-600 hover:text-blue-600",
        title: "\u7F16\u8F91"
      },
      /* @__PURE__ */ React.createElement(Edit, { className: "w-5 h-5" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleDuplicate(config.id),
        className: "p-2 text-gray-600 hover:text-green-600",
        title: "\u590D\u5236"
      },
      /* @__PURE__ */ React.createElement(Copy, { className: "w-5 h-5" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleExport(config.id),
        className: "p-2 text-gray-600 hover:text-purple-600",
        title: "\u5BFC\u51FA"
      },
      /* @__PURE__ */ React.createElement(Download, { className: "w-5 h-5" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleDelete(config.id),
        className: "p-2 text-gray-600 hover:text-red-600",
        title: "\u5220\u9664"
      },
      /* @__PURE__ */ React.createElement(Trash2, { className: "w-5 h-5" })
    )))
  )));
  const renderResultEditor = (result, index) => /* @__PURE__ */ React.createElement(
    "div",
    {
      key: result._tempId || result.id,
      className: "bg-gray-50 dark:bg-gray-700 rounded-lg p-4 space-y-3"
    },
    /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React.createElement("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300" }, "\u7ED3\u679C #", index + 1), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleDeleteResult(index),
        className: "text-red-600 hover:text-red-700"
      },
      /* @__PURE__ */ React.createElement(Trash2, { className: "w-4 h-4" })
    )),
    /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" }, "\u6807\u9898"), /* @__PURE__ */ React.createElement(
      "input",
      {
        type: "text",
        value: result.title,
        onChange: (e) => handleUpdateResult(index, { title: e.target.value }),
        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white",
        placeholder: "\u4F8B\u5982: \u53EF\u7231\u7684\u732B\u54AA"
      }
    )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" }, "\u56FE\u7247/Emoji"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
      "input",
      {
        type: "text",
        value: result.image,
        onChange: (e) => handleUpdateResult(index, { image: e.target.value }),
        className: "flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white",
        placeholder: "\u{1F389} \u6216 URL"
      }
    ), /* @__PURE__ */ React.createElement("label", { className: "cursor-pointer inline-flex items-center justify-center px-3 py-2 bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-800" }, /* @__PURE__ */ React.createElement(Image, { className: "w-5 h-5" }), /* @__PURE__ */ React.createElement(
      "input",
      {
        type: "file",
        accept: "image/*",
        className: "hidden",
        onChange: (e) => {
          const file = e.target.files?.[0];
          if (file) handleResultImageUpload(index, file);
        }
      }
    ))))),
    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" }, "\u63CF\u8FF0"), /* @__PURE__ */ React.createElement(
      "textarea",
      {
        value: result.description,
        onChange: (e) => handleUpdateResult(index, { description: e.target.value }),
        rows: 2,
        className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white",
        placeholder: "\u8FD9\u4E2A\u7ED3\u679C\u7684\u8BE6\u7EC6\u63CF\u8FF0..."
      }
    )),
    result.image && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 p-2 bg-white dark:bg-gray-600 rounded border border-gray-200 dark:border-gray-500" }, /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-500 dark:text-gray-400" }, "\u9884\u89C8:"), result.imageType === "emoji" ? /* @__PURE__ */ React.createElement("span", { className: "text-2xl" }, result.image) : /* @__PURE__ */ React.createElement("img", { src: result.image, alt: result.title, className: "w-8 h-8 object-cover rounded" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300" }, result.title))
  );
  const renderEditForm = () => /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white" }, isCreating ? "\u521B\u5EFA\u65B0\u914D\u7F6E" : "\u7F16\u8F91\u914D\u7F6E"), /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleCancelEdit,
      className: "p-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
    },
    /* @__PURE__ */ React.createElement(X, { className: "w-6 h-6" })
  )), /* @__PURE__ */ React.createElement("div", { className: "space-y-4 bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4" }, "\u57FA\u672C\u4FE1\u606F"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" }, "\u914D\u7F6E\u540D\u79F0 *"), /* @__PURE__ */ React.createElement(
    "input",
    {
      type: "text",
      value: editForm.name,
      onChange: (e) => setEditForm({ ...editForm, name: e.target.value }),
      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white",
      placeholder: "\u4F8B\u5982: \u52A8\u7269\u4E3B\u9898\u6D4B\u8BD5"
    }
  )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" }, "\u6E38\u620F\u6807\u9898 *"), /* @__PURE__ */ React.createElement(
    "input",
    {
      type: "text",
      value: editForm.gameTitle,
      onChange: (e) => setEditForm({ ...editForm, gameTitle: e.target.value }),
      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white",
      placeholder: "\u4F8B\u5982: \u6D4B\u6D4B\u4F60\u662F\u4EC0\u4E48\u52A8\u7269"
    }
  ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" }, "\u914D\u7F6E\u63CF\u8FF0"), /* @__PURE__ */ React.createElement(
    "textarea",
    {
      value: editForm.description,
      onChange: (e) => setEditForm({ ...editForm, description: e.target.value }),
      rows: 2,
      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white",
      placeholder: "\u7B80\u8981\u63CF\u8FF0\u8FD9\u4E2A\u914D\u7F6E\u7684\u7528\u9014..."
    }
  )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" }, "\u6E38\u620F\u63CF\u8FF0"), /* @__PURE__ */ React.createElement(
    "input",
    {
      type: "text",
      value: editForm.gameDescription,
      onChange: (e) => setEditForm({ ...editForm, gameDescription: e.target.value }),
      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white",
      placeholder: "\u4F8B\u5982: \u957F\u6309\u6309\u94AE\uFF0C\u53D1\u73B0\u4F60\u7684\u4E13\u5C5E\u5C5E\u6027"
    }
  )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" }, "\u6309\u94AE\u6587\u672C"), /* @__PURE__ */ React.createElement(
    "input",
    {
      type: "text",
      value: editForm.buttonText,
      onChange: (e) => setEditForm({ ...editForm, buttonText: e.target.value }),
      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
    }
  )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" }, "\u957F\u6309\u65F6\u95F4 (\u6BEB\u79D2)"), /* @__PURE__ */ React.createElement(
    "input",
    {
      type: "number",
      value: editForm.longPressDuration,
      onChange: (e) => setEditForm({ ...editForm, longPressDuration: parseInt(e.target.value) || 2e3 }),
      className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white",
      min: "500",
      step: "100"
    }
  )))), /* @__PURE__ */ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border border-gray-200 dark:border-gray-700" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white" }, "\u7ED3\u679C\u5217\u8868 (", editForm.results.length, ")"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleUseDefaultResults,
      className: "inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-purple-50 dark:bg-purple-900 text-purple-600 dark:text-purple-200 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-800"
    },
    "\u4F7F\u7528\u9ED8\u8BA4\u7ED3\u679C"
  ), /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleAddResult,
      className: "inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-800"
    },
    /* @__PURE__ */ React.createElement(Plus, { className: "w-4 h-4" }),
    "\u6DFB\u52A0\u7ED3\u679C"
  ))), /* @__PURE__ */ React.createElement("div", { className: "space-y-3 max-h-[500px] overflow-y-auto" }, editForm.results.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400" }, /* @__PURE__ */ React.createElement("p", null, "\u8FD8\u6CA1\u6709\u6DFB\u52A0\u4EFB\u4F55\u7ED3\u679C"), /* @__PURE__ */ React.createElement("p", { className: "text-sm mt-2" }, '\u70B9\u51FB"\u6DFB\u52A0\u7ED3\u679C"\u6216"\u4F7F\u7528\u9ED8\u8BA4\u7ED3\u679C"\u5F00\u59CB')) : editForm.results.map((result, index) => renderResultEditor(result, index)))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-3" }, /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleCancelEdit,
      className: "px-6 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
    },
    "\u53D6\u6D88"
  ), /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleSave,
      className: "inline-flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
    },
    /* @__PURE__ */ React.createElement(Save, { className: "w-5 h-5" }),
    "\u4FDD\u5B58\u914D\u7F6E"
  )));
  if (loading) {
    return /* @__PURE__ */ React.createElement("div", { className: `p-8 ${className}` }, /* @__PURE__ */ React.createElement("div", { className: "text-center" }, /* @__PURE__ */ React.createElement("div", { className: "inline-block w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-gray-600 dark:text-gray-400" }, "\u52A0\u8F7D\u4E2D...")));
  }
  return /* @__PURE__ */ React.createElement("div", { className: `p-6 ${className}` }, error && /* @__PURE__ */ React.createElement("div", { className: "mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-2 text-red-800 dark:text-red-200" }, /* @__PURE__ */ React.createElement(AlertCircle, { className: "w-5 h-5 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", null, error), /* @__PURE__ */ React.createElement("button", { onClick: () => setError(null), className: "ml-auto" }, /* @__PURE__ */ React.createElement(X, { className: "w-5 h-5" }))), success && /* @__PURE__ */ React.createElement("div", { className: "mb-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg flex items-center gap-2 text-green-800 dark:text-green-200" }, /* @__PURE__ */ React.createElement(CheckCircle2, { className: "w-5 h-5 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", null, success), /* @__PURE__ */ React.createElement("button", { onClick: () => setSuccess(null), className: "ml-auto" }, /* @__PURE__ */ React.createElement(X, { className: "w-5 h-5" }))), isEditing ? renderEditForm() : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-6" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white" }, "\u914D\u7F6E\u7BA1\u7406"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleImport,
      className: "inline-flex items-center gap-2 px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
    },
    /* @__PURE__ */ React.createElement(Upload, { className: "w-5 h-5" }),
    "\u5BFC\u5165"
  ), /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleStartCreate,
      className: "inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
    },
    /* @__PURE__ */ React.createElement(Plus, { className: "w-5 h-5" }),
    "\u521B\u5EFA\u914D\u7F6E"
  ))), configs.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "text-center py-12 bg-white dark:bg-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 dark:text-gray-400 mb-4" }, "\u8FD8\u6CA1\u6709\u4EFB\u4F55\u914D\u7F6E"), /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleStartCreate,
      className: "inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
    },
    /* @__PURE__ */ React.createElement(Plus, { className: "w-5 h-5" }),
    "\u521B\u5EFA\u7B2C\u4E00\u4E2A\u914D\u7F6E"
  )) : renderConfigList()));
};
var ConfigList = ({
  configService,
  onSelect,
  onEdit,
  onDelete,
  showActions = true,
  showPreviewLink = false,
  previewBaseUrl = "/test-yourself",
  className = "",
  pageSize = 10
}) => {
  const [configs, setConfigs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [searchTerm, setSearchTerm] = useState("");
  const loadConfigs = useCallback(async () => {
    try {
      setLoading(true);
      const list = await configService.getConfigList();
      setConfigs(list);
    } catch (error) {
      console.error("\u52A0\u8F7D\u914D\u7F6E\u5217\u8868\u5931\u8D25:", error);
    } finally {
      setLoading(false);
    }
  }, [configService]);
  useEffect(() => {
    loadConfigs();
  }, [loadConfigs]);
  const handleRefresh = () => {
    loadConfigs();
  };
  const handleSelect = (id) => {
    onSelect?.(id);
  };
  const handleEdit = (id) => {
    onEdit?.(id);
  };
  const handleDelete = async (id) => {
    if (!confirm("\u786E\u5B9A\u8981\u5220\u9664\u8FD9\u4E2A\u914D\u7F6E\u5417\uFF1F")) return;
    try {
      await configService.deleteConfig(id);
      await loadConfigs();
      onDelete?.(id);
    } catch (error) {
      console.error("\u5220\u9664\u914D\u7F6E\u5931\u8D25:", error);
      alert("\u5220\u9664\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
    }
  };
  const handleDuplicate = async (id) => {
    try {
      await configService.duplicateConfig(id);
      await loadConfigs();
    } catch (error) {
      console.error("\u590D\u5236\u914D\u7F6E\u5931\u8D25:", error);
      alert("\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
    }
  };
  const handleSetDefault = async (id) => {
    try {
      await configService.setDefaultConfig(id);
      await loadConfigs();
    } catch (error) {
      console.error("\u8BBE\u7F6E\u9ED8\u8BA4\u914D\u7F6E\u5931\u8D25:", error);
      alert("\u8BBE\u7F6E\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
    }
  };
  const handleExport = async (id) => {
    try {
      const jsonString = await configService.exportConfig(id);
      const blob = new Blob([jsonString], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `config_${id}.json`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error("\u5BFC\u51FA\u914D\u7F6E\u5931\u8D25:", error);
      alert("\u5BFC\u51FA\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
    }
  };
  const getPreviewUrl = (id) => {
    return `${previewBaseUrl}?configId=${id}`;
  };
  const filteredConfigs = configs.filter((config) => {
    if (!searchTerm) return true;
    const term = searchTerm.toLowerCase();
    return config.name.toLowerCase().includes(term) || config.description?.toLowerCase().includes(term);
  });
  const totalPages = Math.ceil(filteredConfigs.length / pageSize);
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const currentConfigs = filteredConfigs.slice(startIndex, endIndex);
  if (loading) {
    return /* @__PURE__ */ React.createElement("div", { className: `p-8 ${className}` }, /* @__PURE__ */ React.createElement("div", { className: "text-center" }, /* @__PURE__ */ React.createElement("div", { className: "inline-block w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-gray-600 dark:text-gray-400" }, "\u52A0\u8F7D\u4E2D...")));
  }
  return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement(
    "input",
    {
      type: "text",
      placeholder: "\u641C\u7D22\u914D\u7F6E...",
      value: searchTerm,
      onChange: (e) => {
        setSearchTerm(e.target.value);
        setCurrentPage(1);
      },
      className: "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
    }
  )), /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleRefresh,
      className: "p-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200",
      title: "\u5237\u65B0"
    },
    /* @__PURE__ */ React.createElement(RefreshCw, { className: "w-5 h-5" })
  )), currentConfigs.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 dark:text-gray-400" }, searchTerm ? "\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u914D\u7F6E" : "\u8FD8\u6CA1\u6709\u4EFB\u4F55\u914D\u7F6E")) : /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, currentConfigs.map((config) => /* @__PURE__ */ React.createElement(
    "div",
    {
      key: config.id,
      className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow"
    },
    /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement(
      "div",
      {
        className: "flex-1 cursor-pointer",
        onClick: () => handleSelect(config.id)
      },
      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 mb-1" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white" }, config.name), config.isDefault && /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200" }, /* @__PURE__ */ React.createElement(Star, { className: "w-3 h-3" }), "\u9ED8\u8BA4")),
      config.description && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-2" }, config.description),
      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400" }, /* @__PURE__ */ React.createElement("span", null, "\u7ED3\u679C\u6570: ", config.resultCount), /* @__PURE__ */ React.createElement("span", null, "\u521B\u5EFA: ", new Date(config.createdAt).toLocaleDateString()), config.updatedAt !== config.createdAt && /* @__PURE__ */ React.createElement("span", null, "\u66F4\u65B0: ", new Date(config.updatedAt).toLocaleDateString()))
    ), showActions && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, showPreviewLink && /* @__PURE__ */ React.createElement(
      "a",
      {
        href: getPreviewUrl(config.id),
        target: "_blank",
        rel: "noopener noreferrer",
        className: "p-2 text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400",
        title: "\u9884\u89C8"
      },
      /* @__PURE__ */ React.createElement(ExternalLink, { className: "w-4 h-4" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleSetDefault(config.id),
        disabled: config.isDefault,
        className: "p-2 text-gray-600 hover:text-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed",
        title: "\u8BBE\u4E3A\u9ED8\u8BA4"
      },
      /* @__PURE__ */ React.createElement(Star, { className: "w-4 h-4" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleEdit(config.id),
        className: "p-2 text-gray-600 hover:text-blue-600",
        title: "\u7F16\u8F91"
      },
      /* @__PURE__ */ React.createElement(Edit, { className: "w-4 h-4" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleDuplicate(config.id),
        className: "p-2 text-gray-600 hover:text-green-600",
        title: "\u590D\u5236"
      },
      /* @__PURE__ */ React.createElement(Copy, { className: "w-4 h-4" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleExport(config.id),
        className: "p-2 text-gray-600 hover:text-purple-600",
        title: "\u5BFC\u51FA"
      },
      /* @__PURE__ */ React.createElement(Download, { className: "w-4 h-4" })
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: () => handleDelete(config.id),
        className: "p-2 text-gray-600 hover:text-red-600",
        title: "\u5220\u9664"
      },
      /* @__PURE__ */ React.createElement(Trash2, { className: "w-4 h-4" })
    )))
  ))), totalPages > 1 && /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex items-center justify-between" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-600 dark:text-gray-400" }, "\u663E\u793A ", startIndex + 1, " - ", Math.min(endIndex, filteredConfigs.length), " \u5171", " ", filteredConfigs.length, " \u4E2A\u914D\u7F6E"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
      disabled: currentPage === 1,
      className: "px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
    },
    "\u4E0A\u4E00\u9875"
  ), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-gray-600 dark:text-gray-400" }, currentPage, " / ", totalPages), /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
      disabled: currentPage === totalPages,
      className: "px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
    },
    "\u4E0B\u4E00\u9875"
  ))));
};

export { ConfigList, ConfigManager, DEFAULT_RESULTS };
//# sourceMappingURL=chunk-ZYXF3L6T.mjs.map
//# sourceMappingURL=chunk-ZYXF3L6T.mjs.map