export function OptimizationPanel() {
  return (
    <>
      {/* 다목적 최적화 개요 */}
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div className="text-title-4 font-bold mb-2">
          다목적 최적화 문제 (Multi-Objective Optimization)
        </div>
        <div className="text-label-2 leading-[1.8] text-fg-sub">
          오일펜스 배치 최적화는 <b className="text-color-accent">상충하는 복수 목적함수</b>를
          동시에 만족해야 하는 전형적인 다목적 최적화 문제입니다. 차단 효율 최대화와 자원 사용
          최소화는 서로 트레이드오프 관계를 가지며,{' '}
          <b className="text-color-accent">파레토 최적(Pareto Optimal) 해집합</b>에서 의사결정자가
          선택합니다.
        </div>
      </div>

      {/* 목적함수 정의 */}
      <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3">📊 목적함수 및 제약조건 정의</div>
        <div className="grid grid-cols-2 gap-3 mb-3">
          <div
            className="rounded-lg p-3 bg-bg-base"
            style={{ border: '1px solid rgba(6,182,212,.2)' }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-accent">🎯 목적함수 F(x)</div>
            <div
              className="rounded-[5px] p-[9px] text-label-2 leading-[2.2] font-mono"
              style={{ background: 'rgba(6,182,212,.04)' }}
            >
              <b className="text-color-accent">최대화:</b>
              <br />
              f₁(x) = Σ A<sub>blocked,i</sub> · w<sub>ESI,i</sub>{' '}
              <span className="text-caption text-fg-default">(가중 차단면적)</span>
              <br />
              f₂(x) = T<sub>deadline</sub> − T<sub>deploy</sub>{' '}
              <span className="text-caption text-fg-default">(여유시간)</span>
              <br />
              <b className="text-color-info">최소화:</b>
              <br />
              f₃(x) = Σ L<sub>boom,j</sub>{' '}
              <span className="text-caption text-fg-default">(총 오일펜스 사용량)</span>
              <br />
              f₄(x) = Σ D<sub>vessel,k</sub>{' '}
              <span className="text-caption text-fg-default">(방제정 총 이동거리)</span>
            </div>
          </div>
          <div
            className="rounded-lg p-3 bg-bg-base"
            style={{ border: '1px solid rgba(59,130,246,.2)' }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-caution">🚫 제약조건 G(x)</div>
            <div
              className="rounded-[5px] p-[9px] text-label-2 leading-[2.2] font-mono"
              style={{ background: 'rgba(59,130,246,.04)' }}
            >
              g₁: U·sin(θ<sub>i</sub>) ≤ U<sub>c</sub> ∀i{' '}
              <span className="text-caption text-fg-default">(임계유속)</span>
              <br />
              g₂: Σ L<sub>j</sub> ≤ L<sub>max</sub>{' '}
              <span className="text-caption text-fg-default">(자원 한계)</span>
              <br />
              g₃: T<sub>deploy,i</sub> ≤ T<sub>arrive,i</sub>{' '}
              <span className="text-caption text-fg-default">(시간 제약)</span>
              <br />
              g₄: d(p<sub>i</sub>, shore) ≥ d<sub>min</sub>{' '}
              <span className="text-caption text-fg-default">(연안 이격)</span>
              <br />
              g₅: h(p<sub>i</sub>) ≥ h<sub>min</sub>{' '}
              <span className="text-caption text-fg-default">(수심 조건)</span>
            </div>
          </div>
        </div>

        {/* ESI 가중치 */}
        <div
          className="rounded-lg p-3 bg-bg-base"
          style={{ border: '1px solid rgba(6,182,212,.2)' }}
        >
          <div className="text-label-2 font-bold mb-2 text-color-caution">
            🏖️ ESI 가중치 w<sub>ESI</sub> 설계
          </div>
          <div className="grid grid-cols-5 gap-[5px] text-caption text-fg-sub">
            {[
              {
                grade: 'ESI 1~2',
                desc: '노출암반',
                w: 'w = 0.2',
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.06)',
              },
              {
                grade: 'ESI 3~4',
                desc: '모래해변',
                w: 'w = 0.4',
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.06)',
              },
              {
                grade: 'ESI 5~6',
                desc: '자갈·조약',
                w: 'w = 0.6',
                color: 'var(--color-caution)',
                bg: 'rgba(6,182,212,.06)',
              },
              {
                grade: 'ESI 7~8',
                desc: '갯벌·조간대',
                w: 'w = 0.85',
                color: 'var(--color-accent)',
                bg: 'rgba(6,182,212,.06)',
              },
              {
                grade: 'ESI 9~10',
                desc: '맹그로브·습지',
                w: 'w = 1.0',
                color: 'var(--color-info)',
                bg: 'rgba(59,130,246,.08)',
                bd: 'rgba(59,130,246,.2)',
              },
            ].map((esi, i) => (
              <div
                key={i}
                className="p-1.5 rounded text-center"
                style={{ background: esi.bg, border: esi.bd ? `1px solid ${esi.bd}` : undefined }}
              >
                <div className="font-bold" style={{ color: esi.color }}>
                  {esi.grade}
                </div>
                <div className="text-fg-default">{esi.desc}</div>
                <div className="font-bold">{esi.w}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* NSGA-II 알고리즘 */}
      <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold mb-3 text-color-accent">
          🧬 NSGA-II (Non-dominated Sorting Genetic Algorithm II)
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
              WING의 오일펜스 배치 최적화는 다목적 유전알고리즘{' '}
              <b className="text-color-accent">NSGA-II</b>(Deb et al., 2002)를 핵심 엔진으로
              사용합니다. 파레토 전면(Pareto Front)을 탐색하여 차단 효율과 자원 효율의 최적 해집합을
              제공합니다.
            </div>
            <div className="flex flex-col gap-1 text-caption text-fg-sub">
              {[
                '염색체 구조 : [배치지점 좌표, 방향각θ, 길이L, 형태, 배치순서]',
                '집단 크기 : 100~200개체 · 세대수 50~200',
                '교배 연산 : SBX(Simulated Binary Crossover) · ηc=20',
                '변이 연산 : 다항식 변이(Polynomial Mutation) · ηm=20',
                '선택 방식 : 비지배 정렬 + 혼잡도 거리(Crowding Distance)',
              ].map((item, i) => (
                <div
                  key={i}
                  className="px-2 py-[5px] rounded text-fg-sub"
                  style={{
                    background: 'rgba(6,182,212,.05)',
                    border: '1px solid rgba(6,182,212,.12)',
                  }}
                >
                  <b className="text-color-accent">{item.split(' : ')[0]}</b> :{' '}
                  {item.split(' : ')[1]}
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="text-label-2 font-bold mb-[7px] text-fg-sub">
              NSGA-II 5단계 진화 루프
            </div>
            <div className="flex flex-col gap-[5px] text-caption text-fg-sub">
              {[
                {
                  step: '①',
                  title: '초기 집단 생성',
                  desc: '확산예측 결과 기반 랜덤 + 휴리스틱 배치안 혼합 초기화',
                },
                {
                  step: '②',
                  title: '적합도 평가',
                  desc: '유출유 확산 시뮬레이터로 각 배치안의 차단면적·도달시간 계산',
                },
                {
                  step: '③',
                  title: '비지배 정렬',
                  desc: '목적함수 공간에서 파레토 전면 계층(F₁, F₂, F₃…) 분류',
                },
                {
                  step: '④',
                  title: '교배·변이',
                  desc: 'SBX + 다항식 변이로 자식 세대 생성. 제약조건 위반 수리(repair)',
                },
                {
                  step: '⑤',
                  title: '엘리트 선택',
                  desc: '부모+자식 2N 집단에서 비지배 정렬+혼잡도 기준으로 N개 선택 → 수렴까지 반복',
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="flex gap-2 px-[9px] py-1.5 rounded-[5px]"
                  style={{
                    background: i === 4 ? 'rgba(6,182,212,.05)' : 'rgba(6,182,212,.04)',
                    border: i === 4 ? '1px solid rgba(6,182,212,.12)' : undefined,
                  }}
                >
                  <span className="min-w-[20px] font-extrabold text-color-accent">{item.step}</span>
                  <div className="leading-[1.6] text-fg-sub">
                    <b>{item.title}</b> : {item.desc}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 보조 알고리즘 비교 */}
      <div className="rounded-md p-3.5 bg-bg-card border border-stroke">
        <div className="text-label-2 font-bold mb-2.5">🔬 보조 최적화 알고리즘 비교 적용</div>
        <div className="overflow-x-auto">
          <table className="w-full text-label-2 border-collapse">
            <thead>
              <tr
                style={{
                  background: 'rgba(255,255,255,.03)',
                  borderBottom: '1px solid var(--stroke-light)',
                }}
              >
                {['알고리즘', '유형', '장점', '단점', 'WING 활용'].map((h) => (
                  <th
                    key={h}
                    className="py-[7px] px-2.5 font-semibold text-fg-default"
                    style={{ textAlign: h === '알고리즘' ? 'left' : 'center' }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                {
                  name: 'NSGA-II',
                  color: 'var(--color-accent)',
                  type: '다목적 GA',
                  pros: '파레토 전면 탐색\n다양성 유지 우수',
                  cons: '계산비용 높음\n수렴 느림',
                  wing: '메인 엔진',
                  wingColor: 'var(--color-accent)',
                },
                {
                  name: 'PSO',
                  color: 'var(--color-accent)',
                  type: '입자군집',
                  pros: '빠른 수렴\n구현 단순',
                  cons: '조기수렴\n다목적 취약',
                  wing: '단일목적 빠른 배치',
                  wingColor: 'var(--fg-sub)',
                },
                {
                  name: 'SA',
                  color: 'var(--color-info)',
                  type: '모의담금질',
                  pros: '전역 탈출 우수\n국소최적 회피',
                  cons: '매개변수 민감\n느린 수렴',
                  wing: '긴급 단순 배치',
                  wingColor: 'var(--fg-sub)',
                },
                {
                  name: 'Greedy+휴리스틱',
                  color: 'var(--color-accent)',
                  type: '결정론적',
                  pros: '즉시 결과\n해석 용이',
                  cons: '전역최적 미보장',
                  wing: '실시간 초기 제안',
                  wingColor: 'var(--color-accent)',
                },
              ].map((row, i) => (
                <tr
                  key={i}
                  style={{
                    borderBottom: '1px solid rgba(255,255,255,.04)',
                    background: i % 2 === 1 ? 'rgba(255,255,255,.01)' : undefined,
                  }}
                >
                  <td className="py-[7px] px-2.5 font-bold" style={{ color: row.color }}>
                    {row.name}
                  </td>
                  <td className="py-[7px] px-2.5 text-center text-fg-sub">{row.type}</td>
                  <td className="py-[7px] px-2.5 text-center text-fg-sub whitespace-pre-line">
                    {row.pros}
                  </td>
                  <td className="py-[7px] px-2.5 text-center text-fg-sub whitespace-pre-line">
                    {row.cons}
                  </td>
                  <td className="py-[7px] px-2.5 text-center" style={{ color: row.wingColor }}>
                    {row.wing}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}
