type DeptKey = 'hrm' | 'hrd' | 'ex' | 'ga';

interface ProjectItem {
  name: string;
  period: string;
  summary: string;
  progress: number;
}

interface DeptBlock {
  key: DeptKey;
  icon: string;
  name: string;
  code: string;
  projects: ProjectItem[];
}

const DUMMY_DEPARTMENTS: DeptBlock[] = [
  {
    key: 'hrm',
    icon: '👥',
    name: '인사관리',
    code: 'HRM',
    projects: [
      {
        name: '상반기 채용 운영',
        period: '2026.04 ~ 2026.06',
        summary: '채용공고, 서류검토, 면접, 사후협의 진행',
        progress: 75,
      },
      {
        name: '평가제도 개선',
        period: '2026.03 ~ 2026.07',
        summary: '평가항목 정비, 부서 의견수렴, 피드백 방식 개선',
        progress: 60,
      },
    ],
  },
  {
    key: 'hrd',
    icon: '📚',
    name: '인재육성',
    code: 'HRD',
    projects: [
      {
        name: '신규입사자 온보딩 프로그램',
        period: '2026.04 ~ 2026.06',
        summary: '신규입사자 교육, 조직 적응 프로그램 운영',
        progress: 85,
      },
      {
        name: '팀장 리더십 교육',
        period: '2026.05 ~ 2026.06',
        summary: '팀장 대상 리더십·코칭·피드백 교육 실시',
        progress: 100,
      },
    ],
  },
  {
    key: 'ex',
    icon: '🤝',
    name: '조직문화',
    code: 'EX',
    projects: [
      {
        name: '조직문화 진단',
        period: '2026.04 ~ 2026.05',
        summary: '만족도 조사, 직원 의견수렴, 개선과제 도출',
        progress: 100,
      },
      {
        name: '복리후생제도 개선',
        period: '2026.05 ~ 2026.08',
        summary: '복지제도 이용현황 분석, 개선안 검토',
        progress: 50,
      },
    ],
  },
  {
    key: 'ga',
    icon: '🏢',
    name: '총무관리',
    code: 'GA',
    projects: [
      {
        name: '사무공간 재배치',
        period: '2026.04 ~ 2026.07',
        summary: '좌석 재배치, 회의실 운영 개선',
        progress: 70,
      },
      {
        name: '안전·보안 점검 강화',
        period: '2026.04 ~ 2026.06',
        summary: '출입통제, 보안카드, 시설안전, 소방점검 관리',
        progress: 85,
      },
    ],
  },
];

const HUB_MESSAGE = '인사·육성·문화·총무 개선과제 정상 추진';

const ROUTINE_ITEMS = ['채용 운영', '교육 운영', '직원 소통', '자산·시설 관리', '문서·행정 지원'];

const FOCUS_ITEMS = ['핵심직무 채용 완료', '복지제도 개선안 확정', '안전보안 점검 강화'];

function deptByKey(key: DeptKey): DeptBlock {
  return DUMMY_DEPARTMENTS.find((d) => d.key === key)!;
}

function DeptCard({ dept }: { dept: DeptBlock }) {
  return (
    <section className={`qboard-dept-card qboard-dept-card--${dept.key}`}>
      <div className="qboard-dept-head">
        <div className={`qboard-dept-icon qboard-dept-icon--${dept.key}`}>{dept.icon}</div>
        <h2 className="qboard-dept-name">
          {dept.name}
          <span>{dept.code}</span>
        </h2>
      </div>
      {dept.projects.map((project) => (
        <article key={project.name} className="qboard-project-block">
          <div className="qboard-project-fields">
            <p className="qboard-field-row">
              <span className="qboard-field-label">프로젝트명</span>
              <span className="qboard-field-value">{project.name}</span>
            </p>
            <p className="qboard-field-row">
              <span className="qboard-field-label">기간</span>
              <span className="qboard-field-value">{project.period}</span>
            </p>
            <p className="qboard-field-row">
              <span className="qboard-field-label">주요 내용</span>
              <span className="qboard-field-value">{project.summary}</span>
            </p>
          </div>
          <div className={`qboard-progress-ring qboard-progress-ring--${dept.key}`}>{project.progress}%</div>
        </article>
      ))}
    </section>
  );
}

function CenterHub() {
  return (
    <aside className="qboard-hub">
      <div className="qboard-hub-box qboard-hub-box--message">
        <div className="qboard-hub-box-title">📢 분기 핵심 메시지</div>
        <p className="qboard-hub-box-text">{HUB_MESSAGE}</p>
      </div>

      <div className="qboard-hub-diamond">
        <div className="qboard-hub-diamond-title">상시업무</div>
        <ul>
          {ROUTINE_ITEMS.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>

      <div className="qboard-hub-box qboard-hub-box--focus">
        <div className="qboard-hub-box-title">🎯 다음 분기 중점관리</div>
        <ul>
          {FOCUS_ITEMS.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    </aside>
  );
}

export function QuarterStatusBoard() {
  return (
    <div className="qboard-wrap">
      <h1 className="qboard-page-title">2026년 2분기 인사총무 프로젝트 현황 Dashboard</h1>
      <p className="qboard-page-subtitle">인사관리(HRM) · 인재육성(HRD) · 조직문화(EX) · 총무관리(GA)</p>

      <div className="qboard-layout">
        <DeptCard dept={deptByKey('hrm')} />
        <DeptCard dept={deptByKey('hrd')} />
        <CenterHub />
        <DeptCard dept={deptByKey('ex')} />
        <DeptCard dept={deptByKey('ga')} />
      </div>
    </div>
  );
}
