/* ── 논문 아이템 타입 ── */
interface PaperItem {
  number: string;
  numberBg: string;
  numberColor?: string;
  title: string;
  citation: React.ReactNode;
  tags: { label: string; color: string }[];
  description: string;
}

/* ── 논문 카드 ── */
function PaperCard({ item }: { item: PaperItem }) {
  return (
    <div
      className="grid gap-2 rounded-md bg-bg-base p-[8px_10px]"
      style={{ gridTemplateColumns: '24px 1fr' }}
    >
      <div
        className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-label-2 font-bold"
        style={{ background: item.numberBg, color: item.numberColor }}
      >
        {item.number}
      </div>
      <div>
        <div className="mb-0.5 text-label-1 font-bold text-fg">{item.title}</div>
        <div className="text-label-2 leading-relaxed text-fg-disabled">{item.citation}</div>
        <div className="mt-1 flex flex-wrap gap-1">
          {item.tags.map((t) => (
            <span
              key={t.label}
              className="rounded px-1.5 py-px text-label-2"
              style={{
                background: `color-mix(in srgb, ${t.color} 8%, transparent)`,
                border: `1px solid color-mix(in srgb, ${t.color} 20%, transparent)`,
                color: t.color,
              }}
            >
              {t.label}
            </span>
          ))}
        </div>
        <div className="mt-0.5 text-label-2 text-fg-sub">{item.description}</div>
      </div>
    </div>
  );
}

/* ── 섹션 카드 (헤더 + 논문 목록) ── */
function SectionCard({
  icon,
  title,
  papers,
}: {
  icon: string;
  title: string;
  papers: PaperItem[];
}) {
  return (
    <div className="overflow-hidden rounded-[var(--radius-md)] border border-stroke bg-bg-card">
      <div className="flex items-center gap-2 border-b border-stroke bg-bg-base px-4 py-3">
        <span className="text-title-3">{icon}</span>
        <span className="text-label-1 font-bold font-korean text-fg">{title}</span>
      </div>
      <div className="flex flex-col gap-2 p-[14px_16px] text-label-2 font-korean">
        {papers.map((p) => (
          <PaperCard key={p.number + p.title} item={p} />
        ))}
      </div>
    </div>
  );
}

/* ── 논문 데이터 ── */
const DOI_LINK_CLASS = 'text-color-info no-underline';

const optimizationPapers: PaperItem[] = [
  {
    number: '①',
    numberBg: 'rgba(6,182,212,.2)',
    numberColor: 'var(--color-accent)',
    title:
      'A Multi-Objective Optimization Method for Maritime SAR Resource Allocation: South China Sea',
    citation: (
      <>
        Dong, Y. et al. | <i>J. Marine Science and Engineering</i> Vol.12(1):184, 2024 · DOI:{' '}
        <a
          href="https://doi.org/10.3390/jmse12010184"
          target="_blank"
          rel="noreferrer"
          className={DOI_LINK_CLASS}
        >
          10.3390/jmse12010184
        </a>{' '}
        · MDPI Open Access
      </>
    ),
    tags: [
      { label: 'DNSGA-II', color: 'var(--color-accent)' },
      { label: '다목적 최적화', color: 'var(--color-tertiary)' },
      { label: '구조선·항공기 배치', color: 'var(--color-info)' },
    ],
    description:
      '해상 사고 후 구조자원(구조선·항공기) 배치 최적화. 비용·응답시간 동시 최소화 DNSGA-II 진화적 최적화. 남중국해 적용 검증. WING 긴급구난 자산 우선순위 배치 알고리즘의 직접 참고 모델.',
  },
  {
    number: '②',
    numberBg: 'rgba(6,182,212,.2)',
    numberColor: 'var(--color-accent)',
    title: 'Optimized Maritime Emergency Resource Allocation under Dynamic Demand',
    citation: (
      <>
        Zhang, W., Yan, X. &amp; Yang, J. | <i>PLoS ONE</i> 12(12):e0189411, 2017 · DOI:{' '}
        <a
          href="https://doi.org/10.1371/journal.pone.0189411"
          target="_blank"
          rel="noreferrer"
          className={DOI_LINK_CLASS}
        >
          10.1371/journal.pone.0189411
        </a>{' '}
        · Open Access
      </>
    ),
    tags: [
      { label: '동적 수요 모델', color: 'var(--color-accent)' },
      { label: '강건 최적화(Robust)', color: 'var(--color-warning)' },
      { label: '불확실 수요 대응', color: 'var(--color-tertiary)' },
    ],
    description:
      '동적·불확실 수요 반영 긴급구난 자원 배치 다목적 최적화 및 강건 최적화. WING 해상 상황 변화에 따른 실시간 자원 재배치 모델 이론 근거.',
  },
  {
    number: '③',
    numberBg: 'rgba(6,182,212,.12)',
    title: 'A Method for Optimizing Maritime Emergency Resource Allocation in Inland Waterways',
    citation: (
      <>
        Ma, Q. et al. | <i>Ocean Engineering</i> Vol.282:116224, 2023 · DOI:{' '}
        <a
          href="https://doi.org/10.1016/j.oceaneng.2023.116224"
          target="_blank"
          rel="noreferrer"
          className={DOI_LINK_CLASS}
        >
          10.1016/j.oceaneng.2023.116224
        </a>{' '}
        · Open Access
      </>
    ),
    tags: [
      { label: 'AHP', color: 'var(--color-success)' },
      { label: 'DEA 효율성 평가', color: 'var(--color-info)' },
      { label: '내수로 적용', color: 'var(--color-warning)' },
    ],
    description:
      'AHP(계층분석법)+DEA(자료포락분석)로 긴급구난 자원 효율성 평가 및 최적 배치. WING 자원 효율성 지수 산정·우선순위 결정 방법론 참조.',
  },
];

const oilSpillPapers: PaperItem[] = [
  {
    number: '①',
    numberBg: 'rgba(249,115,22,.2)',
    numberColor: 'var(--color-warning)',
    title:
      'Dynamic Optimization of Emergency Resource Scheduling in a Large-Scale Maritime Oil Spill Accident',
    citation: (
      <>
        Zhang, L. | LJMU Research Online, 2020 ·{' '}
        <a
          href="https://researchonline.ljmu.ac.uk/id/eprint/14880/3/Dynamic%20optimization%20of%20emergency%20resource%20scheduling%20in%20a%20large-scale%20maritime%20oil%20spill%20accident.pdf"
          target="_blank"
          rel="noreferrer"
          className={DOI_LINK_CLASS}
        >
          PDF 공개
        </a>
      </>
    ),
    tags: [
      { label: 'Location-Routing 최적화', color: 'var(--color-warning)' },
      { label: '하이브리드 휴리스틱', color: 'var(--color-tertiary)' },
      { label: 'Pareto 다목적', color: 'var(--color-accent)' },
    ],
    description:
      '동적 Location-Routing 최적화 모델 + 하이브리드 휴리스틱 알고리즘으로 대규모 해양 오일스필 응급자원 스케줄링·라우팅 다목적 최적화. WING 방제정 동적 라우팅 모델의 이론 선행연구.',
  },
];

const uavPapers: PaperItem[] = [
  {
    number: '①',
    numberBg: 'rgba(168,85,247,.12)',
    title: 'From Forecast to Action: UAV-Based Maritime SAR Deployment Optimization',
    citation: (
      <>
        arXiv:2512.09260 ·{' '}
        <a
          href="https://arxiv.org/abs/2512.09260"
          target="_blank"
          rel="noreferrer"
          className={DOI_LINK_CLASS}
        >
          arxiv.org/abs/2512.09260
        </a>
      </>
    ),
    tags: [
      { label: '예측 기반 UAV 배치', color: 'var(--color-tertiary)' },
      { label: 'SAR 최적화', color: 'var(--color-success)' },
    ],
    description:
      '해상 조난 예측 → UAV 사전 배치 최적화. 예측-행동 연계 프레임워크. WING 항공탐색 연동 구조자원 선제 배치 참고 연구.',
  },
  {
    number: '②',
    numberBg: 'rgba(168,85,247,.12)',
    title: 'UAV-Assisted SAR Latency Optimization',
    citation: (
      <>
        arXiv:2511.00844 ·{' '}
        <a
          href="https://arxiv.org/abs/2511.00844"
          target="_blank"
          rel="noreferrer"
          className={DOI_LINK_CLASS}
        >
          arxiv.org/abs/2511.00844
        </a>
      </>
    ),
    tags: [
      { label: 'UAV 지원 구조', color: 'var(--color-tertiary)' },
      { label: '응답 지연 최소화', color: 'var(--color-danger)' },
    ],
    description: 'UAV 지원 해상 구조 처리·지연 최적화. 통신·처리 지연 모델링 및 UAV 경로 최적화.',
  },
  {
    number: '③',
    numberBg: 'rgba(168,85,247,.12)',
    title: 'UAV Path Planning for SAR: Performance Evaluation',
    citation: (
      <>
        arXiv:2402.01494 ·{' '}
        <a
          href="https://arxiv.org/abs/2402.01494"
          target="_blank"
          rel="noreferrer"
          className={DOI_LINK_CLASS}
        >
          arxiv.org/abs/2402.01494
        </a>
      </>
    ),
    tags: [
      { label: 'UAV 경로계획', color: 'var(--color-tertiary)' },
      { label: '성능 평가', color: 'var(--color-info)' },
    ],
    description: 'SAR 임무용 UAV 경로계획 알고리즘 성능 비교 평가. 탐색 커버리지·효율성 지표 분석.',
  },
  {
    number: '④',
    numberBg: 'rgba(168,85,247,.12)',
    title: 'Probabilistic Submarine Search and Rescue Strategy',
    citation: (
      <>
        arXiv:2505.02186 ·{' '}
        <a
          href="https://arxiv.org/abs/2505.02186"
          target="_blank"
          rel="noreferrer"
          className={DOI_LINK_CLASS}
        >
          arxiv.org/abs/2505.02186
        </a>
      </>
    ),
    tags: [
      { label: '확률론적 탐색', color: 'var(--color-tertiary)' },
      { label: '잠수함 구조', color: 'var(--color-danger)' },
    ],
    description:
      '잠수함 구조 전략 확률론적 최적화. Bayesian 탐색 이론 기반 구조자원 투입 전략 도출.',
  },
];

/* ── 비교 요약 테이블 데이터 ── */
const comparisonRows = [
  { paper: 'Dong et al. (2024)', keyword: 'DNSGA-II 다목적 최적화', usage: '구조자산 배치 최적화' },
  { paper: 'Zhang et al. (2017)', keyword: '동적수요·강건 최적화', usage: '실시간 자원 재배치' },
  { paper: 'Ma et al. (2023)', keyword: 'AHP + DEA', usage: '자원 효율성 평가' },
  { paper: 'Zhang (2020)', keyword: '동적 Location-Routing', usage: '방제정 라우팅 모델' },
  { paper: 'arXiv:2512.09260', keyword: '예측→UAV 배치', usage: '항공탐색 연동 선제배치' },
  { paper: 'arXiv:2505.02186', keyword: '확률론적 탐색전략', usage: '구조구역 확률 탐색' },
];

/* ── 긴급구난 관련 논문 데이터 ── */
interface RelatedPaper {
  tags: { label: string; color: string }[];
  year: string;
  title: string;
  meta: string;
  abstract: string;
}

const relatedPapers: RelatedPaper[] = [
  {
    tags: [
      { label: '수색구조', color: 'var(--color-info)' },
      { label: '의사결정지원', color: 'var(--fg-default)' },
    ],
    year: '2025',
    title: '지능형 해양수색구조 의사결정지원시스템: 신속한 대응을 위한 데이터와 기술 활용',
    meta: '김충기, 정해상, 이성숙, 윤종휘 | 한국해양환경·에너지학회 학술대회논문집 | 2025.5 | pp.160',
    abstract:
      '초고해상도 3차원 연안 해양예측모델, 다중모델 앙상블 기법, AI 기반 확률론적 표류경로 예측 기술을 통합한 지능형 해양 수색구조 의사결정지원시스템 개발. 실해역 부유체 표류 실험과 예측 모델 검증을 통해 고정밀 성능을 확보하고, 수색 성공 확률 기반 스마트 수색계획 자동화 및 최적 자원 동원 알고리즘을 개발. 사고 발생부터 표류 예측, 수색계획 수립, 자원배치, 결과보고에 이르는 전 과정을 통합한 플랫폼을 시범 구축하고 시뮬레이션을 통해 현장 활용성을 확인. 해양경찰청 지원(RS-2022-KS221629).',
  },
  {
    tags: [
      { label: 'AI·SAR', color: 'var(--color-info)' },
      { label: '한국형 시스템', color: 'var(--color-accent)' },
      { label: '표류예측', color: 'var(--color-success)' },
    ],
    year: '2024',
    title: 'AI 기반 한국형 해양수색구조 의사결정 지원시스템',
    meta: '김충기, 정해상, 윤종휘, 박창석, 김종호 | 한국환경연구원 물국토연구본부, 한국해양대학교 해양경찰학부 | 한국해양환경·에너지학회 추계학술대회 | 2024.11 | pp.127',
    abstract:
      '한국형 부유체 표류특성을 분석하고, 초고해상도 3차원 연안 해양예측 모델 개발, 다중모델 앙상블 해양기상 예측, AI 기반 부유체 표류경로 예측, AI 기반 수색전략 수립 지원 등 AI 기반 한국형 해양수색구조 의사결정 지원 시스템을 구축. 연간 해양사고 경제적 손실 4,390억~5,420억 원 규모에 대응하여 신속하고 정확한 수색구조 활동을 지원하고 조난자의 생존 확률을 높이고 구조인력의 안전을 보장. 해양경찰청 지원(RS-2022-KS221629, 지능형 해양사고 대응 플랫폼 구축).',
  },
];

/* ═══ 메인 컴포넌트 ═══ */
export function RescueTheoryView() {
  return (
    <div
      className="flex flex-1 flex-col overflow-hidden bg-bg-base"
      style={{ height: '100%', width: '100%' }}
    >
      <div
        className="flex-1 overflow-y-auto px-9 py-7"
        style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}
      >
        {/* ── 헤더 ── */}
        <div className="mb-1 text-title-1 font-bold font-korean">📚 긴급구난모델 이론</div>
        <div className="mb-6 text-label-1 font-korean text-fg-disabled">
          해상 긴급구난 자원 배치·최적화 이론 및 참고 연구 문헌
        </div>

        {/* ── 2열 그리드 ── */}
        <div className="grid grid-cols-2 items-start gap-[18px]">
          {/* 왼쪽 컬럼 */}
          <div className="flex flex-col gap-3.5">
            <SectionCard icon="⚙️" title="다목적 최적화 자원 배치" papers={optimizationPapers} />
            <SectionCard icon="🛢" title="오일스필 동적 자원 스케줄링" papers={oilSpillPapers} />
          </div>

          {/* 오른쪽 컬럼 */}
          <div className="flex flex-col gap-3.5">
            <SectionCard icon="🚁" title="UAV·예측 기반 해상구조 (보조자료)" papers={uavPapers} />

            {/* 비교 요약 테이블 */}
            <div className="overflow-hidden rounded-[var(--radius-md)] border border-stroke bg-bg-card">
              <div className="flex items-center gap-2 border-b border-stroke bg-bg-base px-4 py-3">
                <span className="text-title-3">📊</span>
                <span className="text-label-1 font-bold font-korean text-fg">논문 비교 요약</span>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full border-collapse text-label-2 font-korean">
                  <thead>
                    <tr className="bg-bg-base">
                      {['논문', '키워드', 'WING 활용'].map((h) => (
                        <th
                          key={h}
                          className="border-b border-stroke px-2.5 py-2 text-left font-bold text-fg-sub"
                        >
                          {h}
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {comparisonRows.map((r, i) => (
                      <tr
                        key={r.paper}
                        className={i < comparisonRows.length - 1 ? 'border-b border-stroke' : ''}
                      >
                        <td className="px-2.5 py-[7px] font-bold text-fg">{r.paper}</td>
                        <td className="px-2.5 py-[7px] text-fg-sub">{r.keyword}</td>
                        <td className="px-2.5 py-[7px] text-fg-disabled">{r.usage}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        {/* ── 긴급구난 관련 논문 ── */}
        <div className="mt-[18px] overflow-hidden rounded-xl border border-stroke bg-bg-card p-4">
          <div className="mb-3.5 flex items-center gap-2.5">
            <div className="flex h-[30px] w-[30px] flex-shrink-0 items-center justify-content-center rounded-[7px] border border-stroke bg-bg-base text-title-3">
              📄
            </div>
            <div>
              <div className="text-label-1 font-bold font-korean text-fg">긴급구난 관련 논문</div>
              <div className="mt-0.5 text-label-2 font-korean text-fg-disabled">
                해양수색구조 의사결정지원 · 실시간 데이터·AI 기반 신속 대응
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-2">
            {relatedPapers.map((p) => (
              <div key={p.title} className="rounded-[9px] border border-stroke bg-bg-surface p-3">
                <div className="mb-1.5 flex items-center justify-between">
                  <div className="flex items-center gap-1.5">
                    {p.tags.map((t) => (
                      <span
                        key={t.label}
                        className="rounded px-[7px] py-0.5 text-label-2 font-bold font-korean"
                        style={{
                          background: `color-mix(in srgb, ${t.color} 10%, transparent)`,
                          border: `1px solid color-mix(in srgb, ${t.color} 22%, transparent)`,
                          color: t.color,
                        }}
                      >
                        {t.label}
                      </span>
                    ))}
                  </div>
                  <span className="text-label-2 font-korean text-fg-disabled">{p.year}</span>
                </div>
                <div className="mb-1 text-label-2 font-bold font-korean text-fg">{p.title}</div>
                <div className="mb-1.5 text-label-2 font-korean text-fg-disabled">{p.meta}</div>
                <div className="text-label-2 font-korean leading-[1.7] text-fg-sub">
                  {p.abstract}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}