interface TheoryItem {
  title: string;
  source: string;
  desc: string;
  tags?: string[];
}

interface TheorySection {
  title: string;
  items: TheoryItem[];
  dividerAfter?: number;
  dividerLabel?: string;
}

const THEORY_SECTIONS: TheorySection[] = [
  {
    title: '방제선 성능 기준',
    items: [
      {
        title: '해양경찰청 방제선 성능기준 고시',
        source:
          '해양경찰청 고시 제2022-11호 | 방제선·방제정 등급별 회수용량·속력·펌프사양 기준 정의',
        desc: '1~5등급 방제선 기준 · 회수능력(㎥/h) · 오일펜스 전장 탑재량 · WING 자산 등급 필터링 근거',
      },
      {
        title: 'IMO OPRC 1990 — 방제자원 비축 기준',
        source:
          'International Convention on Oil Pollution Preparedness, Response and Co-operation | IMO, 1990',
        desc: '국가 방제역량 비축 최저 기준 · 항만별 Tier 1/2/3 대응자원 분류 · 국내 방제자원 DB 설계 기초',
      },
      {
        title: '해양오염방제업 등록기준 (해양환경관리법 시행규칙)',
        source: '해양수산부령 | 별표 9 — 방제업 종류별 방제선·기자재 보유기준',
        desc: '제1종·제2종 방제업 자산 보유기준 · 오일펜스 전장·회수기 용량 법적 최저기준 · WING 자산현황 적법성 검증 기준',
      },
    ],
  },
  {
    title: '오일펜스·흡착재 규격',
    items: [
      {
        title: 'ASTM F625 — Standard Guide for Selecting Mechanical Oil Spill Equipment',
        source: 'ASTM International | 오일펜스·회수기·흡착재 성능시험·선정 기준 가이드',
        desc: '오일펜스 인장강도·부력기준 · 흡착포 흡수율(g/g) 측정법 · WING 자산 성능등급 분류 참조 기준',
      },
      {
        title: '기름오염방제시 오일펜스 사용지침 (ITOPF TIP 03 한국어판)',
        source: 'ITOPF | 해양경찰청·해양환경관리공단 번역, 2011',
        desc: '커튼형·펜스형·해안용 규격분류 · 유속별 운용한계(0.7~3.0 kt) · 힘 계산식 F=100·A·V² · 앵커 파지력 기준표',
      },
    ],
  },
  {
    title: '방제자원 배치·동원 이론',
    dividerAfter: 2,
    dividerLabel: '최적화 수리모델 참고문헌',
    items: [
      {
        title:
          'An Emergency Scheduling Model for Oil Containment Boom in Dynamically Changing Marine Oil Spills',
        source:
          'Xu, Y. et al. | Ningbo Univ. | Systems 2025, 13, 716 · DOI: 10.3390/systems13080716',
        desc: 'IMOGWO 다목적 최적화 · 스케줄링 시간+경제·생태손실 동시 최소화 · 동적 오일필름 기반 방제정 라우팅',
      },
      {
        title: 'Dynamic Resource Allocation to Support Oil Spill Response Planning',
        source: 'Garrett, R.A. et al. | Eur. J. Oper. Res. 257:272–286, 2017',
        desc: '불확실성 하 방제자원 동적 배분 최적화 · 시나리오별 비축량 산정 · WING 자산 우선순위 배치 알고리즘 이론 기반',
      },
      {
        title: '해양오염방제 국가긴급방제계획 (NOSCP)',
        source: '해양경찰청 | 국가긴급방제계획, 2023년판',
        desc: 'Tier 3급 대형사고 자원 동원체계 · 기관별 역할분담·지휘계통 · WING 방제자산 연계 법적 근거',
      },
      {
        title:
          'A Mixed Integer Programming Approach to Improve Oil Spill Response Resource Allocation in the Canadian Arctic',
        source:
          'Das, T., Goerlandt, F. & Pelot, R. | Multimodal Transportation Vol.3 No.1, 100110, 2023',
        desc: '혼합정수계획법으로 응급 방제자원 거점 위치 선택 + 자원 할당 동시 최적화. 비용·응답시간 트레이드오프 파레토 분석.',
        tags: ['MIP 수리모델', '자원 위치 선택', '북극해 적용'],
      },
      {
        title: '유전알고리즘을 이용하여 최적화된 방제자원 배치안의 분포도 분석',
        source: '김혜진, 김용혁 | 한국융합학회논문지 Vol.11 No.4, pp.11–16, 2020',
        desc: 'GA(유전알고리즘)로 방제자원 배치 최적화 및 시뮬레이션 분포도 분석. 국내 해역 실정에 맞는 자원 배치 패턴 도출.',
        tags: ['GA 메타휴리스틱', '국내 연구', '배치 분포도 분석'],
      },
      {
        title:
          'A Two-Stage Stochastic Optimization Framework for Environmentally Sensitive Oil Spill Response Resource Allocation',
        source: 'Rahman, M.A., Kuhel, M.T. & Novoa, C. | arXiv preprint arXiv:2511.22218, 2025',
        desc: '확률적 MILP 2단계 프레임워크로 불확실성 포함 최적 자원 배치. 환경민감구역 가중치 반영.',
        tags: ['확률적 MILP', '2단계 최적화', '환경민감구역'],
      },
      {
        title:
          'Mixed-Integer Dynamic Optimization for Oil-Spill Response Planning with Integration of Dynamic Oil Weathering Model',
        source: 'You, F. & Leyffer, S. | Argonne National Laboratory Technical Note, 2008',
        desc: '동적 최적화(MINLP/MILP) 프레임워크로 오일스필 대응 스케줄링 + 오일 풍화·거동 물리모델 통합.',
        tags: ['MINLP 동적 최적화', '오일 풍화 모델 통합'],
      },
    ],
  },
  {
    title: '자산 현행화·데이터 관리',
    items: [
      {
        title: '해양오염방제자원 현황관리 지침',
        source: '해양경찰청 예규 | 방제자원 등록·현행화·이력관리 절차 규정',
        desc: '분기별 자산 실사 기준 · 자산분류코드 체계 · WING 업로드 양식(xlsx) 필드 정의 근거',
      },
      {
        title: 'ISO 55000 — Asset Management: Overview, Principles and Terminology',
        source: 'International Organization for Standardization | ISO 55000:2014',
        desc: '자산 생애주기 관리 원칙 · 자산가치·상태 평가 프레임워크 · WING 자산 노후도·교체주기 산정 이론 기준',
      },
    ],
  },
];

function TheoryCard({ section }: { section: TheorySection }) {
  return (
    <div className="bg-bg-card border border-stroke rounded-md overflow-hidden">
      {/* Section Header */}
      <div className="px-4 py-3 border-b border-stroke">
        <span className="text-label-1 font-semibold text-fg font-korean">{section.title}</span>
      </div>

      {/* Items */}
      <div className="px-4 py-3.5 flex flex-col gap-2 text-caption">
        {section.items.map((item, i) => (
          <div key={i}>
            {/* Divider */}
            {section.dividerAfter !== undefined && i === section.dividerAfter + 1 && (
              <div className="mt-1 mb-3 pt-2 border-t border-dashed border-stroke">
                <div className="text-caption font-semibold text-fg mb-1.5">
                  {section.dividerLabel}
                </div>
              </div>
            )}
            <div className="px-2.5 py-2 bg-bg-base rounded-md">
              <div className="font-semibold mb-0.5">{item.title}</div>
              <div className="text-fg-disabled leading-[1.6]">{item.source}</div>
              {item.tags && <div className="mt-0.5 text-fg-disabled">{item.tags.join(' | ')}</div>}
              <div className="mt-0.5 text-fg-sub">{item.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AssetTheory() {
  return (
    <div className="flex flex-col gap-0">
      <div className="text-title-1 font-bold mb-1">📚 방제자원 이론</div>
      <div className="text-caption text-fg-disabled mb-6">
        방제자산 운용 기준·성능 이론 및 관련 법령·고시 근거 문헌
      </div>

      <div className="grid gap-[18px] items-start" style={{ gridTemplateColumns: '1fr 1fr' }}>
        {/* Left column */}
        <div className="flex flex-col gap-3.5">
          {THEORY_SECTIONS.slice(0, 2).map((sec) => (
            <TheoryCard key={sec.title} section={sec} />
          ))}
        </div>
        {/* Right column */}
        <div className="flex flex-col gap-3.5">
          {THEORY_SECTIONS.slice(2).map((sec) => (
            <TheoryCard key={sec.title} section={sec} />
          ))}
        </div>
      </div>
    </div>
  );
}

export default AssetTheory;