import { useState, useEffect } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import {
  getSpaces, setCurrentSpace, createSpace, updateSpace, deleteSpace,
  getSettings, updateSettings,
  type Space, type GitAccount,
} from "../../lib/commands";
import { useUIStore } from "../../store/ui";
import { RepoRegistryModal } from "../dashboard/RepoRegistryModal";

export type Page = "overview" | "dashboard" | "source-library" | "devtools" | "proxy" | "settings" | "health";

const NAV_ITEMS: { id: Page; label: string }[] = [
  { id: "overview",        label: "仪表盘" },
  { id: "dashboard",       label: "项目管理" },
  { id: "source-library",  label: "源码库" },
  { id: "devtools",        label: "开发环境" },
  { id: "proxy",           label: "WSL 代理" },
  { id: "health",          label: "健康中心" },
  { id: "settings",        label: "设置" },
];

interface Props {
  account: GitAccount;
  onLogout: () => void;
  page: Page;
  onPageChange: (page: Page) => void;
}

export function Sidebar({ account, onLogout, page, onPageChange }: Props) {
  const [spaceOpen, setSpaceOpen] = useState(true);
  const [showForm, setShowForm] = useState<Space | null | undefined>(undefined);
  const [deleteTarget, setDeleteTarget] = useState<Space | null>(null);
  const [showAppSettings, setShowAppSettings] = useState(false);
  const [showRepoRegistry, setShowRepoRegistry] = useState(false);
  const qc = useQueryClient();
  const showToast = useUIStore((s) => s.showToast);

  const { data: spaces = [], refetch } = useQuery({
    queryKey: ["spaces"],
    queryFn: getSpaces,
  });
  const currentSpace = spaces.find((s) => s.is_current);

  const handleSwitch = async (id: string) => {
    await setCurrentSpace(id);
    refetch();
    qc.invalidateQueries({ queryKey: ["projects"] });
  };

  const handleDelete = async (space: Space) => {
    await deleteSpace(space.id);
    refetch();
    showToast("已删除");
    setDeleteTarget(null);
  };

  return (
    <>
      <aside className="w-48 shrink-0 bg-slate-900 border-r border-slate-700 flex flex-col">

        {/* Logo */}
        <div className="h-14 flex items-center px-4 border-b border-slate-700 shrink-0">
          <span className="font-bold text-white text-sm tracking-tight">炼境</span>
        </div>

        {/* 导航区（随当前空间） */}
        <nav className="px-2 pt-3 pb-2 space-y-0.5 shrink-0">
          {NAV_ITEMS.map(({ id, label }) => (
            <button
              key={id}
              onClick={() => onPageChange(id)}
              className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
                page === id
                  ? "bg-slate-700 text-white font-medium"
                  : "text-slate-400 hover:bg-slate-800 hover:text-slate-200"
              }`}
            >
              {label}
            </button>
          ))}
        </nav>

        {/* 弹性留白 */}
        <div className="flex-1" />

        {/* 空间下拉列表 */}
        <div className="border-t border-slate-700">
          {/* 标题行 */}
          <button
            onClick={() => setSpaceOpen((v) => !v)}
            className="w-full flex items-center justify-between px-4 py-2.5 text-xs font-semibold text-slate-400 uppercase tracking-wider hover:text-slate-200 transition-colors"
          >
            <span>空间</span>
            <div className="flex items-center gap-1.5">
              <span
                onClick={(e) => { e.stopPropagation(); setShowForm(null); }}
                className="w-4 h-4 flex items-center justify-center rounded text-slate-500 hover:text-white hover:bg-slate-700 transition-colors leading-none cursor-pointer"
                title="新建空间"
              >
                +
              </span>
              <svg
                className={`w-3 h-3 transition-transform ${spaceOpen ? "rotate-180" : ""}`}
                viewBox="0 0 16 16" fill="currentColor"
              >
                <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/>
              </svg>
            </div>
          </button>

          {/* 空间列表 */}
          {spaceOpen && (
            <div className="px-2 pb-2 space-y-0.5">
              {spaces.length === 0 && (
                <p className="text-xs text-slate-500 px-2 py-2 text-center">点击 + 新建空间</p>
              )}
              {spaces.map((s) => {
                const isCurrent = s.id === currentSpace?.id;
                return (
                  <div
                    key={s.id}
                    onClick={() => !isCurrent && handleSwitch(s.id)}
                    className={`group flex items-center gap-1.5 px-2 py-1.5 rounded-lg transition-colors ${
                      isCurrent
                        ? "bg-slate-700 text-white"
                        : "text-slate-400 hover:bg-slate-800 hover:text-slate-200 cursor-pointer"
                    }`}
                  >
                    <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${isCurrent ? "bg-blue-400" : "bg-transparent"}`} />
                    <span className="flex-1 text-xs truncate">{s.name}</span>
                    {/* UD 操作 */}
                    <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
                      <button
                        onClick={(e) => { e.stopPropagation(); setShowForm(s); }}
                        className="p-0.5 rounded hover:bg-slate-600 text-slate-400 hover:text-white"
                        title="编辑"
                      >
                        <svg className="w-3 h-3" viewBox="0 0 16 16" fill="currentColor">
                          <path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81 3.22 11.34a.25.25 0 00-.064.108l-.65 2.278 2.278-.65a.25.25 0 00.108-.065L11.19 6.25z"/>
                        </svg>
                      </button>
                      {!isCurrent && (
                        <button
                          onClick={(e) => { e.stopPropagation(); setDeleteTarget(s); }}
                          className="p-0.5 rounded hover:bg-red-900 text-slate-400 hover:text-red-400"
                          title="删除"
                        >
                          <svg className="w-3 h-3" viewBox="0 0 16 16" fill="currentColor">
                            <path d="M11 1.75V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 10-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"/>
                          </svg>
                        </button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* 仓库管理 */}
        <div className="border-t border-slate-700 px-3 py-2 shrink-0">
          <button
            onClick={() => setShowRepoRegistry(true)}
            className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors"
          >
            <svg className="w-3.5 h-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor">
              <path d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8z"/>
            </svg>
            <span>仓库管理</span>
          </button>
        </div>

        {/* 应用设置 */}
        <div className="border-t border-slate-700 px-3 py-2 shrink-0">
          <button
            onClick={() => setShowAppSettings(true)}
            className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors"
          >
            <svg className="w-3.5 h-3.5 shrink-0" viewBox="0 0 16 16" fill="currentColor">
              <path fillRule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.063.13.002.21-.048.253l-.809.645a1.975 1.975 0 00-.703 1.248 5.33 5.33 0 000 .572c.025.385.284.781.703 1.248l.809.645c.05.043.111.123.048.253a6.37 6.37 0 01-.573.989c-.02.03-.085.076-.195.046l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.593 6.593 0 01-1.142 0c-.036-.003-.108-.036-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.372 6.372 0 01-.573-.989c-.063-.13-.002-.21.048-.253l.809-.645a1.974 1.974 0 00.703-1.248 5.322 5.322 0 000-.572 1.974 1.974 0 00-.703-1.248l-.809-.645c-.05-.043-.111-.123-.048-.253.163-.348.354-.679.573-.989.02-.03.085-.076.195-.046l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" clipRule="evenodd"/>
            </svg>
            <span>应用设置</span>
          </button>
        </div>

        {/* GitHub 账户 */}
        <div className="border-t border-slate-700 px-3 py-3 shrink-0">
          <div className="flex items-center gap-2 mb-2">
            {account.avatar_url ? (
              <img src={account.avatar_url} alt="" className="w-6 h-6 rounded-full shrink-0" />
            ) : (
              <div className="w-6 h-6 rounded-full bg-slate-600 flex items-center justify-center text-xs font-bold shrink-0">
                {account.username[0]?.toUpperCase()}
              </div>
            )}
            <div className="min-w-0 flex-1">
              <p className="text-xs font-medium text-slate-200 truncate">{account.username}</p>
              <p className="text-[10px] text-slate-500">GitHub</p>
            </div>
          </div>
          <button
            onClick={onLogout}
            className="w-full text-left px-2 py-1.5 rounded-md text-xs text-slate-400 hover:bg-slate-700 hover:text-red-400 transition-colors"
          >
            退出登录
          </button>
        </div>
      </aside>

      {/* 新建/编辑模态框 */}
      {showForm !== undefined && (
        <SpaceFormModal
          space={showForm}
          onClose={() => setShowForm(undefined)}
          onSaved={() => {
            setShowForm(undefined);
            refetch();
            showToast(showForm ? "已更新" : "已创建");
          }}
        />
      )}

      {/* 应用设置弹窗 */}
      {showAppSettings && (
        <AppSettingsModal onClose={() => setShowAppSettings(false)} />
      )}

      {/* 仓库管理弹窗 */}
      {showRepoRegistry && (
        <RepoRegistryModal onClose={() => setShowRepoRegistry(false)} />
      )}

      {/* 删除确认 */}
      {deleteTarget && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-2xl w-80 p-6 space-y-4">
            <h2 className="text-base font-semibold text-gray-800">删除空间</h2>
            <p className="text-sm text-gray-600">
              确定删除空间「<span className="font-medium">{deleteTarget.name}</span>」？该空间下的项目记录不会删除。
            </p>
            <div className="flex justify-end gap-3">
              <button onClick={() => setDeleteTarget(null)} className="px-4 py-2 rounded-lg text-sm border border-gray-200 text-gray-600 hover:bg-gray-50">取消</button>
              <button onClick={() => handleDelete(deleteTarget)} className="px-4 py-2 rounded-lg text-sm bg-red-600 text-white hover:bg-red-700">删除</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function SpaceFormModal({ space, onClose, onSaved }: {
  space: Space | null;
  onClose: () => void;
  onSaved: () => void;
}) {
  const [name, setName] = useState(space?.name ?? "");
  const [saving, setSaving] = useState(false);

  const handleSave = async () => {
    if (!name.trim()) return;
    setSaving(true);
    try {
      if (space) {
        await updateSpace(space.id, name.trim());
      } else {
        await createSpace(name.trim());
      }
      onSaved();
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl shadow-2xl w-80 p-6 space-y-4">
        <h2 className="text-base font-semibold text-gray-800">{space ? "编辑空间" : "新建空间"}</h2>
        <div>
          <label className="block text-xs font-medium text-gray-600 mb-1">空间名称</label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="笔记本 / 日本服务器 / 公司台式机"
            className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200"
            autoFocus
            onKeyDown={(e) => e.key === "Enter" && handleSave()}
          />
        </div>
        <div className="flex justify-end gap-3 pt-2">
          <button onClick={onClose} className="px-4 py-2 rounded-lg text-sm border border-gray-200 text-gray-600 hover:bg-gray-50">取消</button>
          <button
            onClick={handleSave}
            disabled={!name.trim() || saving}
            className="px-4 py-2 rounded-lg text-sm bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
          >
            {saving ? "保存中…" : "保存"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── 应用设置弹窗（GitHub OAuth，全局级别）─────────────────────────────────────

function AppSettingsModal({ onClose }: { onClose: () => void }) {
  const showToast = useUIStore((s) => s.showToast);
  const qc = useQueryClient();

  const { data: settings } = useQuery({ queryKey: ["settings"], queryFn: () => getSettings() });

  const [clientId, setClientId] = useState(settings?.github_client_id ?? "");
  const [clientSecret, setClientSecret] = useState(settings?.github_client_secret ?? "");
  const [saving, setSaving] = useState(false);

  // settings 异步加载后回填
  useEffect(() => {
    if (settings) {
      setClientId(settings.github_client_id ?? "");
      setClientSecret(settings.github_client_secret ?? "");
    }
  }, [settings]);

  const handleSave = async () => {
    if (!clientId.trim() || !clientSecret.trim()) {
      showToast("❌ Client ID 和 Client Secret 均不能为空");
      return;
    }
    setSaving(true);
    try {
      await updateSettings({ github_client_id: clientId.trim(), github_client_secret: clientSecret.trim() });
      qc.invalidateQueries({ queryKey: ["settings"] });
      showToast("已保存 ✓");
      onClose();
    } catch (e) {
      showToast(`❌ ${e}`);
    } finally {
      setSaving(false);
    }
  };

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

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl shadow-2xl w-96 p-6 space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-base font-semibold text-gray-800">应用设置</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl leading-none">×</button>
        </div>

        <div className="space-y-3">
          <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">GitHub OAuth</h3>
          <p className="text-xs text-gray-400">
            在 GitHub → Settings → Developer settings → OAuth Apps 创建应用，
            Callback URL 填 <code className="bg-gray-100 px-1 rounded">http://localhost</code>。
          </p>
          <div>
            <label className="block text-xs font-medium text-gray-600 mb-1">Client ID</label>
            <input
              className={inputCls}
              value={clientId}
              onChange={(e) => setClientId(e.target.value)}
              placeholder="Ov23li..."
            />
          </div>
          <div>
            <label className="block text-xs font-medium text-gray-600 mb-1">Client Secret</label>
            <input
              type="password"
              className={inputCls}
              value={clientSecret}
              onChange={(e) => setClientSecret(e.target.value)}
              placeholder="••••••••••••••••••••••••••••••••••••••••"
            />
            <p className="text-xs text-gray-400 mt-1">
              仅存储本机 SQLite，由 Rust 完成 token 交换，不经中间服务器。
            </p>
          </div>
        </div>

        <div className="flex justify-end gap-3 pt-2">
          <button onClick={onClose} className="px-4 py-2 rounded-lg text-sm border border-gray-200 text-gray-600 hover:bg-gray-50">
            取消
          </button>
          <button
            onClick={handleSave}
            disabled={saving}
            className="px-4 py-2 rounded-lg text-sm bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
          >
            {saving ? "保存中…" : "保存"}
          </button>
        </div>
      </div>
    </div>
  );
}
