/**
 * 左栏 / 规则目录
 * 展示文件信息、分数进度、搜索与评查点列表。
 */
import { useMemo, useState } 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 | number | null;
  fileName: string;
  onRuleSelect: (id: string | number) => void;
  onBack: () => void;
}

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

function classifyPoint(point: ReviewPoint): PointStatus {
  if (point.status === 'notApplicable' || point.status === 'not_applicable') return 'skipped';
  if (point.result === true || (point.result === undefined && point.status === 'success')) return 'pass';
  if (point.result === false) {
    if (point.status === 'error') return 'fail';
    if (point.status === 'warning' || point.status === 'info') return 'warn';
  }
  if (point.status === 'error') return 'fail';
  if (point.status === 'warning' || point.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' },
};

const FILTER_CHIPS: Array<{
  key: StatusFilter;
  label: string;
  getClassName: (active: boolean) => string;
}> = [
  {
    key: 'all',
    label: '全部',
    getClassName: (active) =>
      active
        ? 'bg-slate-700 text-white border-slate-700'
        : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50',
  },
  {
    key: 'warn',
    label: '提醒',
    getClassName: (active) =>
      active
        ? 'bg-amber-500 text-white border-amber-500'
        : 'bg-white text-amber-700 border-amber-200 hover:bg-amber-50',
  },
  {
    key: 'fail',
    label: '问题',
    getClassName: (active) =>
      active
        ? 'bg-red-500 text-white border-red-500'
        : 'bg-white text-red-700 border-red-200 hover:bg-red-50',
  },
  {
    key: 'pass',
    label: '通过',
    getClassName: (active) =>
      active
        ? 'bg-emerald-500 text-white border-emerald-500'
        : 'bg-white text-emerald-700 border-emerald-200 hover:bg-emerald-50',
  },
  {
    key: 'skipped',
    label: '跳过',
    getClassName: (active) =>
      active
        ? 'bg-slate-500 text-white border-slate-500'
        : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-100',
  },
];

function RuleListItem({
  point,
  isActive,
  showCategory,
  onClick,
}: {
  point: ReviewPoint;
  isActive: boolean;
  showCategory?: boolean;
  onClick: () => void;
}) {
  const status = classifyPoint(point);
  const statusMeta = STATUS_ICON[status];
  const trailingLabel = showCategory ? point.groupName : point.pointCode || point.pointId || '';

  return (
    <button
      type="button"
      className={`rule-item relative w-full py-2 px-3 text-left transition ${
        isActive ? 'bg-[#e8f3ef]' : '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={`${statusMeta.icon} ${statusMeta.color} shrink-0 text-[14px]`} />
        <span
          className={`text-[12.5px] text-slate-800 truncate flex-1 ${isActive ? 'font-semibold' : ''}`}
        >
          {point.pointName}
        </span>
        {trailingLabel && (
          <span className="shrink-0 text-[10px] text-slate-400 font-mono">{trailingLabel}</span>
        )}
      </div>
    </button>
  );
}

export function RulesDirectory({
  reviewPoints,
  statistics,
  activeReviewPointResultId,
  fileName,
  onRuleSelect,
  onBack,
}: RulesDirectoryProps) {
  const [searchText, setSearchText] = useState('');
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
  const [passOpen, setPassOpen] = useState(true);
  const [openCategories, setOpenCategories] = useState<Set<string>>(
    () => new Set(reviewPoints.map((point) => point.groupName).filter(Boolean))
  );

  const q = searchText.toLowerCase();

  const matchSearch = (point: ReviewPoint) =>
    !q ||
    point.pointName?.toLowerCase().includes(q) ||
    String(point.pointId ?? '').toLowerCase().includes(q) ||
    String(point.pointCode ?? '').toLowerCase().includes(q) ||
    point.groupName?.toLowerCase().includes(q);

  const matchStatus = (point: ReviewPoint) =>
    statusFilter === 'all' || classifyPoint(point) === statusFilter;

  const statusCounts = useMemo(() => {
    return reviewPoints.reduce<Record<StatusFilter, number>>(
      (acc, point) => {
        const status = classifyPoint(point);
        acc.all += 1;
        acc[status] += 1;
        return acc;
      },
      { all: 0, pass: 0, warn: 0, fail: 0, skipped: 0 }
    );
  }, [reviewPoints]);

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

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

    return {
      needAttention,
      passed,
      passedByGroup,
      hasSearchResult: filtered.length > 0,
    };
  }, [reviewPoints, q, statusFilter]);

  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 = reviewPoints.filter((point) => classifyPoint(point) !== 'pass').length;
  const passedCount = reviewPoints.filter((point) => classifyPoint(point) === 'pass').length;

  const toggleCategory = (category: string) => {
    setOpenCategories((prev) => {
      const next = new Set(prev);
      if (next.has(category)) next.delete(category);
      else next.add(category);
      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 space-y-2">
        <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 className="flex flex-wrap gap-1">
          {FILTER_CHIPS.map((filter) => {
            const isActive = statusFilter === filter.key;
            const count = statusCounts[filter.key];

            return (
              <button
                key={filter.key}
                type="button"
                className={`inline-flex items-center gap-1 px-2 h-6 rounded border text-[11px] font-medium transition ${filter.getClassName(
                  isActive
                )}`}
                onClick={() => setStatusFilter(filter.key)}
              >
                <span>{filter.label}</span>
                <span className="font-mono text-[10px] opacity-80">{count}</span>
              </button>
            );
          })}
        </div>
      </div>

      <div className="flex-1 min-h-0 overflow-y-auto scroll-slim py-1">
        {needAttention.length > 0 && (
          <div>
            <div className="px-3 pt-1 pb-1 text-[10px] font-medium uppercase tracking-[0.18em] text-slate-400">
              需关注
            </div>
            {needAttention.map((point) => (
              <RuleListItem
                key={point.id}
                point={point}
                isActive={point.id === activeReviewPointResultId}
                showCategory
                onClick={() => onRuleSelect(point.id)}
              />
            ))}
          </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(([category, points]) => {
                const isOpen = openCategories.has(category);
                return (
                  <div key={category}>
                    <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(category)}
                    >
                      <i
                        className={`ri-arrow-right-s-line text-slate-400 text-[11px] transition-transform ${
                          isOpen ? 'rotate-90' : ''
                        }`}
                      />
                      <span className="text-[10px] font-medium text-slate-500 uppercase tracking-wider">
                        {category}
                      </span>
                      <span className="ml-auto font-mono text-[10px] text-slate-400">
                        {points.length}
                      </span>
                    </button>
                    {isOpen &&
                      points.map((point) => (
                        <RuleListItem
                          key={point.id}
                          point={point}
                          isActive={point.id === activeReviewPointResultId}
                          onClick={() => onRuleSelect(point.id)}
                        />
                      ))}
                  </div>
                );
              })}
          </div>
        )}

        {!hasSearchResult && (
          <div className="text-center py-8 text-[12px] text-slate-400">
            <i
              className={`text-2xl ${
                q ? 'ri-search-eye-line text-slate-300' : 'ri-check-double-line text-emerald-400'
              }`}
            />
            <div className="mt-1">{q ? '没有匹配结果' : '当前筛选下暂无规则'}</div>
          </div>
        )}
      </div>
    </aside>
  );
}