/**
 * 검증게시판 — 좌측 이슈 목록 (단계 필터 + 검색)
 */
import React, { useMemo } from 'react';
import type { VerificationIssueDto } from '../../utils/verificationBoardApi';
import {
  VERIFICATION_ISSUE_STAGES,
  stageColor,
  stageLabel,
  type VerificationIssueStage,
} from '../../utils/verificationBoardStages';
import VerificationStageIcon from './VerificationStageIcon';
import { formatIsoDateTime } from '../../utils/timezone';

interface Props {
  issues: VerificationIssueDto[];
  selectedId: number | null;
  stageFilter: VerificationIssueStage | '';
  searchQuery: string;
  onStageFilterChange: (stage: VerificationIssueStage | '') => void;
  onSearchChange: (q: string) => void;
  onSelect: (issue: VerificationIssueDto) => void;
}

const VerificationIssueListPanel: React.FC<Props> = ({
  issues,
  selectedId,
  stageFilter,
  searchQuery,
  onStageFilterChange,
  onSearchChange,
  onSelect,
}) => {
  const filtered = useMemo(() => {
    const q = searchQuery.trim().toLowerCase();
    if (!q) return issues;
    return issues.filter(i =>
      i.title.toLowerCase().includes(q)
      || i.content.toLowerCase().includes(q)
      || (i.reproductionPath?.toLowerCase().includes(q) ?? false),
    );
  }, [issues, searchQuery]);

  return (
    <div className="vbd-list-panel">
      <div className="vbd-list-filters">
        <select
          className="vbd-stage-select"
          value={stageFilter}
          onChange={e => onStageFilterChange(e.target.value as VerificationIssueStage | '')}
          aria-label="이슈 단계 필터"
        >
          <option value="">전체 단계</option>
          {VERIFICATION_ISSUE_STAGES.map(s => (
            <option key={s.value} value={s.value}>{s.label}</option>
          ))}
        </select>
        <input
          type="search"
          className="vbd-search-input"
          placeholder="제목·내용·재현경로 검색…"
          value={searchQuery}
          onChange={e => onSearchChange(e.target.value)}
          aria-label="검색"
        />
      </div>

      <div className="vbd-list-count">
        {filtered.length}건
        {searchQuery.trim() && issues.length !== filtered.length && (
          <span className="vbd-list-count-sub"> / {issues.length}건 중</span>
        )}
      </div>

      <ul className="vbd-list">
        {filtered.length === 0 ? (
          <li className="vbd-list-empty">표시할 검증 이슈가 없습니다.</li>
        ) : filtered.map(issue => {
          const active = issue.id === selectedId;
          return (
            <li key={issue.id}>
              <button
                type="button"
                className={`vbd-list-item${active ? ' vbd-list-item--active' : ''}`}
                onClick={() => onSelect(issue)}
              >
                <VerificationStageIcon stage={issue.stage} size={34} />
                <span className="vbd-list-item-body">
                  <span className="vbd-list-item-top">
                    <span
                      className="vbd-stage-badge"
                      style={{ backgroundColor: `${stageColor(issue.stage)}22`, color: stageColor(issue.stage) }}
                    >
                      {stageLabel(issue.stage)}
                    </span>
                    <span className="vbd-list-meta">{formatIsoDateTime(issue.updatedAt ?? issue.createdAt, undefined, 'short')}</span>
                  </span>
                  <span className="vbd-list-title">{issue.title}</span>
                </span>
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default VerificationIssueListPanel;