import { card, cardBg, labelStyle } from '../OilSpillTheoryView';

export function RoadmapPanel() {
  return (
    <div>
      <div className="grid grid-cols-2 gap-3 mb-4">
        <div className={`${card} ${cardBg} m-0`}>
          <div style={labelStyle('var(--color-info)')}>현재 모델 한계</div>
          <div className="flex flex-col gap-2 text-label-2 text-fg-sub">
            <div
              className="rounded-md"
              style={{
                padding: '8px 10px',
                background: 'rgba(59,130,246,.04)',
                border: '1px solid rgba(59,130,246,.12)',
                color: 'var(--fg-sub)',
              }}
            >
              2D 표층 확산 모의 위주 → <b>3D 수직 구조 반영 미흡</b>
            </div>
            <div
              className="rounded-md"
              style={{
                padding: '8px 10px',
                background: 'rgba(59,130,246,.04)',
                border: '1px solid rgba(59,130,246,.12)',
                color: 'var(--fg-sub)',
              }}
            >
              기상·해양 결합 피드백 미적용 → <b>대규모 유출 시 정확도 저하</b>
            </div>
            <div
              className="rounded-md"
              style={{
                padding: '8px 10px',
                background: 'rgba(59,130,246,.04)',
                border: '1px solid rgba(59,130,246,.12)',
                color: 'var(--fg-sub)',
              }}
            >
              조류 조화상수 분해능 한계 → <b>항만·연안 세부 예측 오차</b>
            </div>
          </div>
        </div>
        <div className={`${card} ${cardBg} m-0`}>
          <div style={labelStyle('var(--color-info)')}>발전 방향</div>
          <div className="flex flex-col gap-2 text-label-2 text-fg-sub">
            {[
              { title: 'ROMS 3D 해양모델 결합', desc: '광역→상세역 Nesting 200m급 고해상도 구현' },
              { title: 'AI/ML 서로게이트 모델', desc: '수치모델 학습 기반 수초 내 근사 예측' },
              { title: '위성 SAR 실시간 동화', desc: '관측 유막 데이터 모델 보정 자동화' },
            ].map((r) => (
              <div
                key={r.title}
                className="rounded-md"
                style={{
                  padding: '8px 10px',
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.12)',
                }}
              >
                <div className="font-medium mb-0.5">{r.title}</div>
                <div className="text-label-2 text-fg-default">{r.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 로드맵 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--fg-default)')}>WING 유출유 모델 고도화 로드맵</div>
        <div className="flex gap-0 items-stretch">
          {[
            {
              phase: '✅ Phase 1 (완료)',
              title: '2D 앙상블',
              color: 'var(--color-accent)',
              desc: 'KOSPS + POSEIDON\n+ OpenDrift 3종\n표층 확산 앙상블',
              nextColor: 'var(--color-accent)',
            },
            {
              phase: '🔧 Phase 2 (진행중)',
              title: 'ROMS 결합',
              color: 'var(--color-accent)',
              desc: '3D 수직 구조\n고해상도 연안\n조류 정밀 반영',
              nextColor: 'var(--color-accent)',
            },
            {
              phase: '🔬 Phase 3 (계획)',
              title: 'AI 융합',
              color: 'var(--color-accent)',
              desc: 'ML 서로게이트\n위성 SAR 동화\n실시간 보정',
              nextColor: 'var(--color-info)',
            },
            {
              phase: '🎯 Phase 4 (목표)',
              title: '자동 대응',
              color: 'var(--color-accent)',
              desc: '사고감지→예측\n→방제자원 배치\n전 과정 자동화',
            },
          ].map((s, i) => (
            <div key={s.phase} className="flex-1 flex items-stretch">
              <div
                className="flex-1 p-2.5 text-center"
                style={{
                  background: `${s.color}0F`,
                  border: `1px solid ${s.color}33`,
                  borderRadius: i === 0 ? '8px 0 0 8px' : i === 3 ? '0 8px 8px 0' : '0',
                }}
              >
                <div className="text-label-2 font-bold mb-1" style={{ color: s.color }}>
                  {s.phase}
                </div>
                <div className="text-label-2 font-medium mb-1">{s.title}</div>
                <div className="text-label-2 whitespace-pre-line text-fg-default leading-normal">
                  {s.desc}
                </div>
              </div>
              {s.nextColor && (
                <div
                  style={{
                    width: '2px',
                    background: 'var(--stroke-default)',
                  }}
                />
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
