import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { open } from "@tauri-apps/plugin-dialog";
import {
  getProjectTools,
  addProjectTool,
  updateProjectTool,
  removeProjectTool,
  type ProjectTool,
  type ProjectToolInput,
} from "../../lib/commands";

export interface ToolCommands {
  getTools: () => Promise<ProjectTool[]>;
  addTool: (input: ProjectToolInput) => Promise<string>;
  updateTool: (id: string, input: ProjectToolInput) => Promise<void>;
  removeTool: (id: string) => Promise<void>;
}
import { useUIStore } from "../../store/ui";
import { Dialog } from "../ui/Dialog";

const COMMON_ICONS = ["🔧", "🎬", "🎨", "📷", "🗄️", "📮", "🌐", "📊", "🎵", "📐", "🔬", "⚙️", "📁", "🖨️", "🎮"];

const EMPTY: ProjectToolInput = { name: "", icon: "🔧", exe_path: "", args: "" };

interface Props {
  projectId: string;
  projectName: string;
  onClose: () => void;
  defaultOpenAdd?: boolean;
  commands?: ToolCommands;
  queryKey?: unknown[];
}

export function ProjectToolsModal({ projectId, projectName, onClose, defaultOpenAdd, commands, queryKey }: Props) {
  const showToast = useUIStore((s) => s.showToast);
  const qc = useQueryClient();

  const cmds: ToolCommands = commands ?? {
    getTools: () => getProjectTools(projectId),
    addTool: (input) => addProjectTool(projectId, input),
    updateTool: (id, input) => updateProjectTool(id, input),
    removeTool: (id) => removeProjectTool(id),
  };

  const resolvedKey = queryKey ?? ["projectTools", projectId];

  const { data: tools = [], refetch } = useQuery({
    queryKey: resolvedKey,
    queryFn: () => cmds.getTools(),
  });

  const [editing, setEditing] = useState<ProjectTool | null>(null); // null = 新增模式
  const [form, setForm] = useState<ProjectToolInput>(EMPTY);
  const [showForm, setShowForm] = useState(defaultOpenAdd ?? false);
  const [saving, setSaving] = useState(false);

  const openAdd = () => {
    setEditing(null);
    setForm(EMPTY);
    setShowForm(true);
  };

  const openEdit = (tool: ProjectTool) => {
    setEditing(tool);
    setForm({ name: tool.name, icon: tool.icon, exe_path: tool.exe_path, args: tool.args ?? "" });
    setShowForm(true);
  };

  const set = (k: keyof ProjectToolInput, v: string) =>
    setForm((f) => ({ ...f, [k]: v }));

  const pickExe = async () => {
    const selected = await open({
      directory: false,
      multiple: false,
      filters: [{ name: "可执行文件", extensions: ["exe", "cmd", "bat", "lnk"] }],
    });
    if (!selected) return;
    const path = selected as string;
    set("exe_path", path);
    // 如果名称还是空的，从文件名推断
    if (!form.name.trim()) {
      const parts = path.replace(/\\/g, "/").split("/");
      const filename = parts[parts.length - 1];
      const name = filename.replace(/\.(exe|cmd|bat|lnk)$/i, "");
      set("name", name);
    }
  };

  const handleSave = async () => {
    if (!form.name.trim()) { showToast("❌ 工具名称不能为空"); return; }
    if (!form.exe_path.trim()) { showToast("❌ 程序路径不能为空"); return; }
    setSaving(true);
    try {
      const input: ProjectToolInput = {
        ...form,
        args: form.args?.trim() || undefined,
        sort_order: editing?.sort_order ?? tools.length,
      };
      if (editing) {
        await cmds.updateTool(editing.id, input);
      } else {
        await cmds.addTool(input);
      }
      await refetch();
      qc.invalidateQueries({ queryKey: resolvedKey });
      setShowForm(false);
      showToast(editing ? "已更新 ✓" : "已添加 ✓");
    } catch (e) {
      showToast(`❌ ${e}`);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await cmds.removeTool(id);
      await refetch();
      qc.invalidateQueries({ queryKey: resolvedKey });
    } catch (e) {
      showToast(`❌ ${e}`);
    }
  };

  const inputCls = "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200";

  return (
    <Dialog title={`工具管理 · ${projectName}`} onClose={onClose} size="lg">
      <div className="px-6 py-4">

        {/* 工具列表 */}
        {tools.length > 0 ? (
          <div className="space-y-2 mb-4">
            {tools.map((tool) => (
              <div
                key={tool.id}
                className="flex items-center gap-3 px-3 py-2.5 bg-gray-50 rounded-lg border border-gray-100 group"
              >
                <span className="text-lg w-7 text-center shrink-0">{tool.icon}</span>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-gray-800">{tool.name}</p>
                  <p className="text-xs text-gray-400 font-mono truncate">{tool.exe_path}</p>
                  {tool.args && (
                    <p className="text-xs text-blue-400 font-mono">{tool.args}</p>
                  )}
                </div>
                <div className="flex gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
                  <button
                    onClick={() => openEdit(tool)}
                    className="px-2 py-1 text-xs border border-gray-200 rounded text-gray-500 hover:bg-white"
                  >
                    编辑
                  </button>
                  <button
                    onClick={() => handleDelete(tool.id)}
                    className="px-2 py-1 text-xs border border-red-100 rounded text-red-400 hover:bg-red-50"
                  >
                    删除
                  </button>
                </div>
              </div>
            ))}
          </div>
        ) : !showForm ? (
          <div className="text-center py-8 text-gray-400 mb-4">
            <p className="text-3xl mb-2">🧰</p>
            <p className="text-sm">还没有配置工具</p>
            <p className="text-xs mt-1">添加常用软件，一键从项目卡片启动</p>
          </div>
        ) : null}

        {/* 添加/编辑表单 */}
        {showForm ? (
          <div className="border border-blue-100 rounded-xl bg-blue-50/40 p-4 space-y-3">
            <p className="text-xs font-semibold text-blue-600 uppercase tracking-wide">
              {editing ? "编辑工具" : "添加工具"}
            </p>

            {/* 图标选择 */}
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1.5">图标</label>
              <div className="flex gap-1.5 flex-wrap">
                {COMMON_ICONS.map((ic) => (
                  <button
                    key={ic}
                    onClick={() => set("icon", ic)}
                    className={`w-8 h-8 rounded-lg text-base flex items-center justify-center border transition-colors ${
                      form.icon === ic
                        ? "border-blue-400 bg-blue-50"
                        : "border-gray-200 bg-white hover:border-gray-300"
                    }`}
                  >
                    {ic}
                  </button>
                ))}
                <input
                  className="w-8 h-8 rounded-lg border border-gray-200 text-center text-base bg-white outline-none focus:border-blue-400"
                  value={COMMON_ICONS.includes(form.icon) ? "" : form.icon}
                  onChange={(e) => set("icon", e.target.value)}
                  placeholder="…"
                  maxLength={2}
                  title="自定义 emoji"
                />
              </div>
            </div>

            {/* 名称 + 路径 */}
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-600 mb-1">名称 *</label>
                <input
                  className={inputCls}
                  value={form.name}
                  onChange={(e) => set("name", e.target.value)}
                  placeholder="RealityCapture"
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-600 mb-1">启动参数（可选）</label>
                <input
                  className={`${inputCls} font-mono`}
                  value={form.args ?? ""}
                  onChange={(e) => set("args", e.target.value)}
                  placeholder="-load project.rcproj"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">程序路径 *</label>
              <div className="flex gap-2">
                <input
                  className={`${inputCls} font-mono flex-1`}
                  value={form.exe_path}
                  onChange={(e) => set("exe_path", e.target.value)}
                  placeholder="C:\Program Files\...\app.exe"
                />
                <button
                  onClick={pickExe}
                  className="px-3 py-2 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 shrink-0"
                >
                  浏览
                </button>
              </div>
            </div>

            <div className="flex justify-end gap-2 pt-1">
              <button
                onClick={() => setShowForm(false)}
                className="px-3 py-1.5 text-sm border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50"
              >
                取消
              </button>
              <button
                onClick={handleSave}
                disabled={saving}
                className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
              >
                {saving ? "保存中…" : "保存"}
              </button>
            </div>
          </div>
        ) : (
          <button
            onClick={openAdd}
            className="w-full py-2.5 rounded-lg border border-dashed border-gray-300 text-sm text-gray-500 hover:border-blue-400 hover:text-blue-600 hover:bg-blue-50/40 transition-colors"
          >
            + 添加工具
          </button>
        )}
      </div>

      <div className="flex justify-end px-6 py-4 border-t border-gray-100">
        <button
          onClick={onClose}
          className="px-4 py-2 rounded-lg text-sm border border-gray-200 text-gray-600 hover:bg-gray-50"
        >
          完成
        </button>
      </div>
    </Dialog>
  );
}
