import React from 'react';
import {
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Circle,
  Database,
  FileCheck2,
  Loader2,
  Megaphone,
  Sparkles,
  Target,
  Users,
  Workflow,
  Zap,
} from 'lucide-react';
import { useTheme } from '../../contexts/ThemeContext';
import type { MainStepKey, StepStatus, SubStepKey } from './types';

interface SixStepProgressProps {
  mainStatus: Record<MainStepKey, StepStatus>;
  subStatus: Record<SubStepKey, StepStatus>;
  collapsed?: boolean;
  onToggleCollapse?: () => void;
}

interface StepItem<T extends string> {
  key: T;
  title: string;
  desc: string;
  icon: React.ComponentType<{ className?: string }>;
  color: { dark: string; light: string };
}

const MAIN_STEPS: StepItem<MainStepKey>[] = [
  { key: 'info',    title: '信息准备',      desc: '梳理输入素材与上下文',         icon: Database,   color: { dark: 'text-sky-300 bg-sky-500/15 border-sky-400/40',        light: 'text-sky-600 bg-sky-50 border-sky-200' } },
  { key: 'sixstep', title: '6 步法推演',    desc: '依次完成四个阶段推演',          icon: Workflow,   color: { dark: 'text-violet-300 bg-violet-500/15 border-violet-400/40', light: 'text-violet-600 bg-violet-50 border-violet-200' } },
  { key: 'final',   title: '最终结果生成',  desc: '汇总各阶段产出，输出结论',     icon: FileCheck2, color: { dark: 'text-emerald-300 bg-emerald-500/15 border-emerald-400/40', light: 'text-emerald-600 bg-emerald-50 border-emerald-200' } },
];

const SUB_STEPS: StepItem<SubStepKey>[] = [
  { key: 'purpose',   title: '目的生成',           desc: '识别核心目的方向',   icon: Target,   color: { dark: 'text-violet-300 bg-violet-500/15 border-violet-400/40',  light: 'text-violet-600 bg-orange-50 border-orange-200' } },
  { key: 'actor',     title: '行为体生成',          desc: '匹配行为体角色',     icon: Users,    color: { dark: 'text-cyan-300 bg-cyan-500/15 border-cyan-400/40',          light: 'text-red-600 bg-red-50 border-red-200' } },
  { key: 'behavior',  title: '预期行为与驱动因素',  desc: '推演行为与动因',     icon: Zap,      color: { dark: 'text-emerald-300 bg-emerald-500/15 border-emerald-400/40', light: 'text-emerald-600 bg-emerald-50 border-emerald-200' } },
  { key: 'narrative', title: '叙事生成',            desc: '构建叙事框架',       icon: Megaphone,color: { dark: 'text-amber-300 bg-amber-500/15 border-amber-400/40',       light: 'text-amber-600 bg-amber-50 border-amber-200' } },
];

function dotColor(status: StepStatus, isDark: boolean) {
  if (status === 'done')    return isDark ? 'bg-emerald-400' : 'bg-emerald-500';
  if (status === 'running') return isDark ? 'bg-cyan-400 sixstep-pulse' : 'bg-red-500 sixstep-pulse';
  return isDark ? 'bg-slate-600' : 'bg-gray-300';
}

function StatusIcon({ status, isDark }: { status: StepStatus; isDark: boolean }) {
  if (status === 'done')    return <CheckCircle2 className={`w-4 h-4 ${isDark ? 'text-emerald-300' : 'text-emerald-500'}`} />;
  if (status === 'running') return <Loader2 className={`w-4 h-4 sixstep-spin-soft ${isDark ? 'text-cyan-300' : 'text-red-500'}`} />;
  return <Circle className={`w-3.5 h-3.5 ${isDark ? 'text-slate-500' : 'text-gray-300'}`} />;
}

function cardBorder(status: StepStatus, isDark: boolean) {
  if (status === 'running') return isDark
    ? 'border-cyan-400/40 bg-cyan-500/5 shadow-[0_0_0_1px_rgba(34,211,238,0.15)]'
    : 'border-red-300 bg-red-50/60 shadow-sm';
  return isDark ? 'border-slate-700/60 bg-slate-800/40' : 'border-gray-200 bg-white';
}

function connectorColor(status: StepStatus, isDark: boolean) {
  return status === 'done'
    ? isDark ? 'bg-emerald-400/40' : 'bg-emerald-300'
    : isDark ? 'bg-slate-700/60' : 'bg-gray-200';
}

// ── Collapsed view ────────────────────────────────────────────────────────────
const CollapsedView: React.FC<{
  mainStatus: Record<MainStepKey, StepStatus>;
  subStatus: Record<SubStepKey, StepStatus>;
  isDark: boolean;
  onExpand: () => void;
}> = ({ mainStatus, subStatus, isDark, onExpand }) => {
  const sixstepUnlocked = mainStatus.sixstep !== 'pending';
  return (
    <div className={`h-full flex flex-col items-center py-3 gap-3 border-r ${
      isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/60'
    }`}>
      <button
        type="button"
        onClick={onExpand}
        title="展开进度面板"
        className={`w-9 h-9 rounded-xl flex items-center justify-center transition-colors ${
          isDark ? 'text-slate-400 hover:text-white hover:bg-slate-700/60' : 'text-gray-500 hover:text-gray-800 hover:bg-gray-100'
        }`}
      >
        <ChevronRight className="w-4 h-4" />
      </button>

      <div className="flex flex-col items-center gap-2 flex-1">
        {MAIN_STEPS.map((step) => {
          const status = mainStatus[step.key];
          const Icon = step.icon;
          const clr = step.color[isDark ? 'dark' : 'light'];
          return (
            <div key={step.key} className="relative flex flex-col items-center gap-1" title={step.title}>
              <div className={`w-9 h-9 rounded-xl border flex items-center justify-center ${clr} ${
                status === 'running' ? 'sixstep-pulse' : ''
              }`}>
                {status === 'running'
                  ? <Loader2 className="w-4 h-4 sixstep-spin-soft" />
                  : <Icon className="w-4 h-4" />
                }
              </div>
              <span className={`w-2 h-2 rounded-full ${dotColor(status, isDark)}`} />

              {step.key === 'sixstep' && sixstepUnlocked && (
                <div className="flex flex-col items-center gap-1 mt-1">
                  {SUB_STEPS.map((sub) => {
                    const ss = subStatus[sub.key];
                    const SubIcon = sub.icon;
                    const sc = sub.color[isDark ? 'dark' : 'light'];
                    return (
                      <div key={sub.key} title={sub.title} className={`w-7 h-7 rounded-lg border flex items-center justify-center ${sc} ${
                        ss === 'running' ? 'sixstep-pulse' : ''
                      }`}>
                        {ss === 'running'
                          ? <Loader2 className="w-3 h-3 sixstep-spin-soft" />
                          : <SubIcon className="w-3 h-3" />
                        }
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ── Expanded view ─────────────────────────────────────────────────────────────
const SixStepProgress: React.FC<SixStepProgressProps> = ({
  mainStatus,
  subStatus,
  collapsed = false,
  onToggleCollapse,
}) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const sixstepUnlocked = mainStatus.sixstep !== 'pending';
  const sixstepRunning  = mainStatus.sixstep === 'running';

  if (collapsed) {
    return (
      <CollapsedView
        mainStatus={mainStatus}
        subStatus={subStatus}
        isDark={isDark}
        onExpand={() => onToggleCollapse?.()}
      />
    );
  }

  return (
    <div className={`h-full flex flex-col overflow-hidden border-r ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/60'}`}>
      {/* Header */}
      <div className={`px-4 py-3 border-b flex items-center gap-2 ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
        <div className={`w-9 h-9 rounded-2xl flex items-center justify-center shrink-0 ${
          isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-50 text-red-500'
        }`}>
          <Sparkles className="w-5 h-5" />
        </div>
        <div className="flex-1 min-w-0">
          <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>生成进度</div>
          <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>实时跟踪推演阶段</div>
        </div>
        <button
          type="button"
          onClick={onToggleCollapse}
          title="收起进度面板"
          className={`w-8 h-8 rounded-xl flex items-center justify-center transition-colors shrink-0 ${
            isDark ? 'text-slate-400 hover:text-white hover:bg-slate-700/60' : 'text-gray-500 hover:text-gray-800 hover:bg-gray-100'
          }`}
        >
          <ChevronLeft className="w-4 h-4" />
        </button>
      </div>

      {/* Steps */}
      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
        {MAIN_STEPS.map((step, idx) => {
          const status = mainStatus[step.key];
          const Icon = step.icon;
          const clr = step.color[isDark ? 'dark' : 'light'];
          const showSubBlock = step.key === 'sixstep' && sixstepUnlocked;

          return (
            <div key={step.key} className="relative">
              {idx < MAIN_STEPS.length - 1 && (
                <div className={`absolute left-[22px] top-12 bottom-[-12px] w-px ${connectorColor(status, isDark)}`} />
              )}
              <div className={`relative rounded-2xl border p-3 transition-all ${cardBorder(status, isDark)}`}>
                <div className="flex items-start gap-3">
                  <div className={`w-11 h-11 rounded-2xl border flex items-center justify-center shrink-0 transition-colors ${clr} ${
                    status === 'running' ? 'sixstep-pulse' : ''
                  }`}>
                    {status === 'running'
                      ? <Loader2 className="w-5 h-5 sixstep-spin-soft" />
                      : <Icon className="w-5 h-5" />
                    }
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between gap-2">
                      <div className={`text-sm font-semibold truncate ${
                        status === 'running'
                          ? isDark ? 'text-white' : 'text-gray-900'
                          : status === 'done'
                            ? isDark ? 'text-slate-100' : 'text-gray-800'
                            : isDark ? 'text-slate-300' : 'text-gray-600'
                      }`}>{step.title}</div>
                      <span className={`px-2 py-0.5 rounded-full text-[10px] flex items-center gap-1 ${
                        status === 'done'
                          ? isDark ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-400/30' : 'bg-emerald-50 text-emerald-600 border border-emerald-200'
                          : status === 'running'
                            ? isDark ? 'bg-cyan-500/20 text-cyan-200 border border-cyan-400/40' : 'bg-red-50 text-red-600 border border-red-200'
                            : isDark ? 'bg-slate-700/40 text-slate-400 border border-slate-600/40' : 'bg-gray-100 text-gray-500 border border-gray-200'
                      }`}>
                        <StatusIcon status={status} isDark={isDark} />
                        <span>{status === 'done' ? '已完成' : status === 'running' ? '生成中' : '待开始'}</span>
                      </span>
                    </div>
                    <div className={`text-xs mt-1 ${
                      status === 'running'
                        ? isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'
                        : isDark ? 'text-slate-400' : 'text-gray-500'
                    }`}>{step.desc}</div>
                  </div>
                </div>

                {/* 6步法子阶段 */}
                {showSubBlock && (
                  <div className="mt-3 pl-1">
                    <div className={`text-[10px] font-medium tracking-wider uppercase mb-2 ${
                      isDark ? 'text-slate-500' : 'text-gray-400'
                    }`}>
                      6 步法 · 子阶段
                    </div>
                    <div className="space-y-2">
                      {SUB_STEPS.map((sub, subIdx) => {
                        const ss = subStatus[sub.key];
                        const SubIcon = sub.icon;
                        const sc = sub.color[isDark ? 'dark' : 'light'];
                        return (
                          <div key={sub.key} className="relative pl-4 sixstep-fade-up">
                            {subIdx < SUB_STEPS.length - 1 && (
                              <div className={`absolute left-[7px] top-7 bottom-[-8px] w-px ${connectorColor(ss, isDark)}`} />
                            )}
                            <div className={`absolute left-0 top-3 w-3.5 h-3.5 rounded-full border-2 flex items-center justify-center ${
                              ss === 'running'
                                ? isDark ? 'bg-cyan-500/30 border-cyan-300' : 'bg-red-100 border-red-400'
                                : ss === 'done'
                                  ? isDark ? 'bg-emerald-500/30 border-emerald-300' : 'bg-emerald-100 border-emerald-400'
                                  : isDark ? 'bg-slate-900 border-slate-600' : 'bg-white border-gray-300'
                            }`} />
                            <div className={`flex items-start gap-2 rounded-xl border p-2 ${
                              ss === 'running'
                                ? isDark ? 'border-cyan-400/40 bg-cyan-500/5' : 'border-red-300 bg-red-50/70'
                                : isDark ? 'border-slate-700/50 bg-slate-800/40' : 'border-gray-200 bg-white'
                            }`}>
                              <div className={`w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 ${sc} ${
                                ss === 'running' ? 'sixstep-pulse' : ''
                              }`}>
                                {ss === 'running'
                                  ? <Loader2 className="w-3.5 h-3.5 sixstep-spin-soft" />
                                  : <SubIcon className="w-3.5 h-3.5" />
                                }
                              </div>
                              <div className="flex-1 min-w-0">
                                <div className="flex items-center justify-between gap-2">
                                  <div className={`text-xs font-semibold truncate ${
                                    ss === 'done' ? isDark ? 'text-slate-100' : 'text-gray-800'
                                    : ss === 'running' ? isDark ? 'text-white' : 'text-gray-900'
                                    : isDark ? 'text-slate-300' : 'text-gray-600'
                                  }`}>{sub.title}</div>
                                  <StatusIcon status={ss} isDark={isDark} />
                                </div>
                                <div className={`text-[11px] mt-0.5 ${
                                  ss === 'running'
                                    ? isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'
                                    : isDark ? 'text-slate-500' : 'text-gray-400'
                                }`}>{sub.desc}</div>
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                    {sixstepRunning && (
                      <div className={`mt-2 text-[11px] flex items-center gap-1.5 ${isDark ? 'text-cyan-300' : 'text-red-500'}`}>
                        <Loader2 className="w-3 h-3 sixstep-spin-soft" />
                        <span className={isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}>推演正在进行...</span>
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default SixStepProgress;