import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { getMentorContext, getProjectNotes, type MentorContext, type ProjectNote } from "../../lib/commands";

interface Props {
  projectId: string;
  projectName: string;
  onClose: () => void;
}

export function MentorPanel({ projectId, projectName, onClose }: Props) {
  const [copied, setCopied] = useState(false);

  const { data: ctx, isLoading, isError, error } = useQuery<MentorContext>({
    queryKey: ["mentorContext", projectId],
    queryFn: () => getMentorContext(projectId),
    staleTime: 30000,
    retry: false,
  });

  const { data: notes = [] } = useQuery<ProjectNote[]>({
    queryKey: ["projectNotes", projectId],
    queryFn: () => getProjectNotes(projectId),
    staleTime: 30000,
    retry: false,
  });

  const handleCopy = () => {
    if (!ctx) return;
    navigator.clipboard.writeText(ctx.mentor_markdown).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col mx-4">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 shrink-0">
          <div>
            <h2 className="text-base font-semibold text-gray-900">项目导师</h2>
            <p className="text-xs text-gray-400 mt-0.5">{projectName}</p>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 transition-colors p-1"
            aria-label="关闭"
          >
            <svg className="w-5 h-5" viewBox="0 0 16 16" fill="currentColor">
              <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
            </svg>
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto min-h-0 px-6 py-5">
          {isLoading && (
            <div className="flex items-center justify-center py-16 text-gray-400 text-sm">
              加载中…
            </div>
          )}

          {isError && (
            <div className="flex items-center gap-2 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
              <span>❌</span>
              <span>{String(error)}</span>
            </div>
          )}

          {ctx && (
            <div className="flex flex-col gap-5">
              {/* 本地健康 */}
              <section>
                <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">本地健康</h3>
                <div className="flex flex-col gap-1.5">
                  <HealthRow
                    ok={ctx.health.path_valid}
                    label="本地路径"
                    ok_text="有效"
                    fail_text="路径不存在"
                  />
                  <HealthRow
                    ok={ctx.health.has_git}
                    label="Git 仓库"
                    ok_text="已初始化"
                    fail_text="未找到 .git 目录"
                    warn={!ctx.health.has_git}
                  />
                  {ctx.health.tech_stack && (
                    <div className="flex items-center gap-2 text-xs">
                      <span className="text-gray-400 w-16 shrink-0">技术栈</span>
                      <span className="text-gray-700">{ctx.health.tech_stack}</span>
                    </div>
                  )}
                  {ctx.health.last_commit && (
                    <div className="flex items-center gap-2 text-xs">
                      <span className="text-gray-400 w-16 shrink-0">最近提交</span>
                      <code className="text-gray-700 font-mono text-[11px] bg-gray-50 px-1.5 py-0.5 rounded">
                        {ctx.health.last_commit}
                      </code>
                    </div>
                  )}
                </div>
              </section>

              {/* 蓝图状态 */}
              <section>
                <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">蓝图状态</h3>
                {ctx.blueprint_summary ? (
                  ctx.blueprint_summary.module_count === 0 ? (
                    <p className="text-xs text-gray-400">蓝图存在，但暂无模块数据。</p>
                  ) : (
                    <div className="grid grid-cols-3 gap-2">
                      {[
                        { label: "模块", value: `${ctx.blueprint_summary.done_count}/${ctx.blueprint_summary.module_count}` },
                        { label: "任务", value: `${ctx.blueprint_summary.done_tasks}/${ctx.blueprint_summary.total_tasks}` },
                        { label: "可派发", value: String(ctx.blueprint_summary.dispatchable) },
                        { label: "进行中", value: String(ctx.blueprint_summary.in_progress) },
                        { label: "已规划", value: String(ctx.blueprint_summary.planned) },
                      ].map(({ label, value }) => (
                        <div key={label} className="bg-gray-50 rounded-lg px-3 py-2 flex flex-col gap-0.5">
                          <span className="text-[11px] text-gray-400">{label}</span>
                          <span className="text-sm font-semibold text-gray-800">{value}</span>
                        </div>
                      ))}
                    </div>
                  )
                ) : (
                  <p className="text-xs text-gray-400">该项目尚未接入蓝图（无 .blueprint/manifest.yaml）。</p>
                )}
              </section>

              {/* 近期错误日志 */}
              <section>
                <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">近期错误日志</h3>
                {ctx.recent_errors.length === 0 ? (
                  <p className="text-xs text-gray-400">无错误记录 ✅</p>
                ) : (
                  <ul className="flex flex-col gap-1 max-h-40 overflow-y-auto">
                    {ctx.recent_errors.map((e, i) => (
                      <li key={i} className="flex gap-2 text-[11px]">
                        <span className={`shrink-0 font-semibold ${e.level === "error" ? "text-red-500" : "text-yellow-500"}`}>
                          {e.level === "error" ? "❌" : "⚠️"}
                        </span>
                        <span className="text-gray-400 shrink-0 font-mono">{e.ts.slice(0, 19)}</span>
                        <span className="text-gray-500 shrink-0">[{e.category}]</span>
                        <span className="text-gray-700 break-all">{e.message}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </section>

              {/* AI 笔记 */}
              <section>
                <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">AI 笔记</h3>
                {notes.length === 0 ? (
                  <p className="text-xs text-gray-400">暂无笔记。Claude 通过 MCP 分析项目后会在此留下洞察。</p>
                ) : (
                  <ul className="flex flex-col gap-2 max-h-48 overflow-y-auto">
                    {notes.map((note) => (
                      <li key={note.id} className="flex flex-col gap-1 rounded-lg bg-indigo-50 border border-indigo-100 px-3 py-2">
                        <div className="flex items-center justify-between">
                          <span className="text-[10px] font-medium text-indigo-400 uppercase tracking-wide">
                            {note.source === "mcp" ? "Claude · MCP" : "手动"}
                          </span>
                          <span className="text-[10px] text-gray-400 font-mono">{note.created_at.slice(0, 16)}</span>
                        </div>
                        <p className="text-xs text-gray-700 whitespace-pre-wrap leading-relaxed">{note.content}</p>
                      </li>
                    ))}
                  </ul>
                )}
              </section>
            </div>
          )}
        </div>

        {/* Footer */}
        {ctx && (
          <div className="px-6 py-4 border-t border-gray-100 shrink-0 flex items-center justify-between">
            <p className="text-xs text-gray-400">生成导师报告后粘贴给 Claude，即可获得质量分析和成长建议</p>
            <button
              onClick={handleCopy}
              className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-indigo-600 text-white text-xs font-medium hover:bg-indigo-700 transition-colors shrink-0"
            >
              {copied ? (
                <>
                  <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
                  </svg>
                  已复制
                </>
              ) : (
                <>
                  <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"/>
                    <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"/>
                  </svg>
                  生成导师报告
                </>
              )}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// ── 辅助组件 ──────────────────────────────────────────────────────────────────

function HealthRow({
  ok,
  label,
  ok_text,
  fail_text,
  warn,
}: {
  ok: boolean;
  label: string;
  ok_text: string;
  fail_text: string;
  warn?: boolean;
}) {
  const icon = ok ? "✅" : warn ? "⚠️" : "❌";
  const textColor = ok ? "text-green-700" : warn ? "text-yellow-700" : "text-red-700";
  return (
    <div className="flex items-center gap-2 text-xs">
      <span className="text-gray-400 w-16 shrink-0">{label}</span>
      <span>{icon}</span>
      <span className={textColor}>{ok ? ok_text : fail_text}</span>
    </div>
  );
}