/**
 * 左栏 · 规则目录
 * 显示文件名、分数进度条、搜索、评查点分组列表
 */
import { useState, useMemo } from 'react';
import type { ReviewPoint } from '../ReviewPointsList';

interface Statistics {
  total: number;
  success: number;
  warning: number;
  error: number;
  notApplicable: number;
  score: number;
}

interface RulesDirectoryProps {
  reviewPoints: ReviewPoint[];
  statistics: Statistics;
  activeReviewPointResultId: string | null;
  fileName: string;
  onRuleSelect: (id: string) => void;
  onBack: () => void;
}

type PointStatus = 'pass' | 'warn' | 'fail' | 'skipped';

function classifyPoint(p: ReviewPoint): PointStatus {
  if (p.status === 'notApplicable' || p.status === 'not_applicable') return 'skipped';
  if (p.result === true || (p.result === undefined && p.status === 'success')) return 'pass';
  if (p.result === false) {
    if (p.status === 'error') return 'fail';
    if (p.status === 'warning' || p.status === 'info') return 'warn';
  }
  return 'pass';
}

const STATUS_ICON: Record<PointStatus, { icon: string; color: string }> = {
  pass: { icon: 'ri-checkbox-circle-fill', color: 'text-emerald-500' },
  warn: { icon: 'ri-lightbulb-flash-fill', color: 'text-amber-500' },
  fail: { icon: 'ri-close-circle-fill', color: 'text-red-500' },
  skipped: { icon: 'ri-forbid-2-line', color: 'text-slate-400' },
};

function RuleListItem({
  point,
  isActive,
  showCategory,
  onClick,
}: {
  point: ReviewPoint;
  isActive: boolean;
  showCategory?: boolean;
  onClick: () => void;
}) {
  const cls = classifyPoint(point);
  const s = STATUS_ICON[cls];

  return (
    <button
      type="button"
      className={`rule-item relative w-full py-2 px-3 text-left transition ${
        isActive ? 'bg-[rgba(0,104,74,0.08)]' : 'hover:bg-slate-50'
      }`}
      onClick={onClick}
    >
      {isActive && (
        <span className="absolute left-0 top-2 bottom-2 w-0.5 bg-[#00684a] rounded-r" />
      )}
      <div className="flex items-center gap-2 min-w-0">
        <i className={`${s.icon} ${s.color} shrink-0 text-[14px]`} />
        <span
          className={`text-[12.5px] text-slate-800 truncate flex-1 ${
            isActive ? 'font-semibold' : ''
          }`}
        >
          {point.pointName}
        </span>
        {showCategory && (
          <span className="shrink-0 text-[10px] text-slate-400">
            {point.groupName}
          </span>
        )}
      </div>
    </button>
  );
}

export function RulesDirectory({
  reviewPoints,
  statistics,
  activeReviewPointResultId,
  fileName,
  onRuleSelect,
  onBack,
}: RulesDirectoryProps) {
  const [searchText, setSearchText] = useState('');
  const [passOpen, setPassOpen] = useState(true);
  const [openCategories, setOpenCategories] = useState<Set<string>>(new Set());

  const q = searchText.toLowerCase();

  const matchSearch = (p: ReviewPoint) =>
    !q ||
    (p.pointName?.toLowerCase().includes(q)) ||
    (p.pointCode?.toLowerCase().includes(q)) ||
    (p.groupName?.toLowerCase().includes(q));

  const { needAttention, passed, passedByGroup } = useMemo(() => {
    const filtered = reviewPoints.filter(matchSearch);
    const needAttention = filtered.filter(
      (p) => classifyPoint(p) !== 'pass' && classifyPoint(p) !== 'skipped'
    );
    const passed = filtered.filter((p) => classifyPoint(p) === 'pass');

    const passedByGroup: Record<string, ReviewPoint[]> = {};
    passed.forEach((p) => {
      const key = p.groupName || '未分组';
      (passedByGroup[key] = passedByGroup[key] || []).push(p);
    });

    return { needAttention, passed, passedByGroup };
  }, [reviewPoints, searchText]);

  // 计算进度条百分比
  const total = statistics.total || reviewPoints.length;
  const passPct = total > 0 ? (statistics.success / total) * 100 : 0;
  const warnPct = total > 0 ? (statistics.warning / total) * 100 : 0;
  const errPct = total > 0 ? (statistics.error / total) * 100 : 0;
  const naPct =
    total > 0
      ? ((statistics.notApplicable || 0) / total) * 100
      : 0;

  const attentionCount = needAttention.length;
  const passedCount = passed.length;

  const toggleCategory = (cat: string) => {
    setOpenCategories((prev) => {
      const next = new Set(prev);
      if (next.has(cat)) next.delete(cat);
      else next.add(cat);
      return next;
    });
  };

  return (
    <aside className="border-r border-slate-200 bg-white flex flex-col min-h-0">
      {/* 顶部区域: 文件名 + 分数 + 进度条 */}
      <div className="shrink-0 px-3 py-3 border-b border-slate-100 space-y-2">
        {/* 文件名 */}
        <div className="flex items-center gap-1.5 text-[11px] text-slate-500">
          <button
            type="button"
            className="w-5 h-5 grid place-items-center rounded hover:bg-slate-100 text-slate-400 shrink-0"
            title="返回"
            onClick={onBack}
          >
            <i className="ri-arrow-left-line" />
          </button>
          <i className="ri-file-text-line text-slate-400 shrink-0" />
          <span className="flex-1 break-all">{fileName}</span>
        </div>

        {/* 分数 + 进度条 */}
        <div className="flex items-center gap-2">
          <span className="text-[22px] font-semibold text-slate-900 tabular-nums leading-none">
            {Math.round(statistics.score)}
          </span>
          <span className="text-[10.5px] text-slate-400">/100</span>
          <div className="flex-1 h-1.5 rounded-full overflow-hidden bg-slate-100 ml-1">
            <div className="flex h-full">
              <div
                className="bg-emerald-500"
                style={{ width: `${passPct}%` }}
              />
              <div
                className="bg-amber-400"
                style={{ width: `${warnPct}%` }}
              />
              <div
                className="bg-red-500"
                style={{ width: `${errPct}%` }}
              />
              <div
                className="bg-slate-300"
                style={{ width: `${naPct}%` }}
              />
            </div>
          </div>
        </div>

        {/* 状态摘要 */}
        <div className="flex items-center justify-between text-[11px]">
          <span className="inline-flex items-center gap-1 text-orange-700 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5 font-medium">
            <i className="ri-focus-3-line" />{' '}
            <span className="font-mono">{attentionCount}</span> 项需关注
          </span>
          <span className="text-slate-400">
            <span className="font-mono text-slate-500">{passedCount}</span> /{' '}
            {total} 已通过
          </span>
        </div>
      </div>

      {/* 搜索框 */}
      <div className="shrink-0 p-2.5 border-b border-slate-100">
        <div className="relative">
          <i className="ri-search-line absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[14px]" />
          <input
            placeholder="搜索规则"
            className="w-full h-8 pl-8 pr-2 bg-slate-50 border border-slate-200 rounded-md text-[12.5px] focus:outline-none focus:bg-white focus:border-[#00684a] focus:ring-2 focus:ring-[#00684a]/15"
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
          />
        </div>
      </div>

      {/* 评查点列表 */}
      <div className="flex-1 min-h-0 overflow-y-auto scroll-slim py-1">
        {/* 需关注 */}
        {needAttention.length > 0 ? (
          <div>
            {needAttention.map((p) => (
              <RuleListItem
                key={p.id}
                point={p}
                isActive={p.id === activeReviewPointResultId}
                showCategory
                onClick={() => onRuleSelect(p.id)}
              />
            ))}
          </div>
        ) : (
          <div className="text-center py-6 text-[12px] text-slate-400">
            <i className="ri-check-double-line text-2xl text-emerald-400" />
            <div className="mt-1">
              {q ? '没有匹配' : '已全部处理'}
            </div>
          </div>
        )}

        {/* 已通过 */}
        {passed.length > 0 && (
          <div className="border-t border-slate-200 mt-2">
            <button
              type="button"
              className="w-full flex items-center gap-2 px-3 py-2 bg-slate-50/60 hover:bg-slate-100 text-left"
              onClick={() => setPassOpen(!passOpen)}
            >
              <i
                className={`ri-arrow-right-s-line text-slate-400 text-[12px] transition-transform ${
                  passOpen ? 'rotate-90' : ''
                }`}
              />
              <i className="ri-checkbox-circle-fill text-emerald-500 text-[14px]" />
              <span className="text-[12px] text-slate-600">已通过</span>
              <span className="ml-auto font-mono text-[11px] text-slate-400">
                {passed.length}
              </span>
            </button>

            {passOpen &&
              Object.entries(passedByGroup).map(([cat, points]) => {
                const catOpen = openCategories.has(cat);
                return (
                  <div key={cat}>
                    <button
                      type="button"
                      className="w-full flex items-center gap-1.5 px-3 py-1.5 bg-slate-50/40 hover:bg-slate-100 text-left"
                      onClick={() => toggleCategory(cat)}
                    >
                      <i
                        className={`ri-arrow-right-s-line text-slate-400 text-[11px] transition-transform ${
                          catOpen ? 'rotate-90' : ''
                        }`}
                      />
                      <span className="text-[10px] font-medium text-slate-500 uppercase tracking-wider">
                        {cat}
                      </span>
                      <span className="ml-auto font-mono text-[10px] text-slate-400">
                        {points.length}
                      </span>
                    </button>
                    {catOpen &&
                      points.map((p) => (
                        <RuleListItem
                          key={p.id}
                          point={p}
                          isActive={p.id === activeReviewPointResultId}
                          onClick={() => onRuleSelect(p.id)}
                        />
                      ))}
                  </div>
                );
              })}
          </div>
        )}
      </div>
    </aside>
  );
}
