import type { Incident } from '@interfaces/incidents/IncidentsInterface';

export function SplitPanelContent({
  tag,
  incident,
}: {
  tag?: { icon: string; label: string; color: string };
  incident: Incident | null;
}) {
  if (!tag) {
    return (
      <div className="flex-1 flex items-center justify-center text-fg-disabled text-label-2">
        R&D 분석 결과를 선택하세요
      </div>
    );
  }

  const mockData: Record<
    string,
    {
      title: string;
      model: string;
      items: { label: string; value: string; color?: string }[];
      summary: string;
    }
  > = {
    유출유: {
      title: '유출유 확산예측 결과',
      model: 'KOSPS + OpenDrift · BUNKER-C 150kL',
      items: [
        { label: '예측 시간', value: '72시간 (3일)' },
        { label: '최대 확산거리', value: '12.3 NM', color: 'var(--color-warning)' },
        { label: '해안 도달 시간', value: '18시간 후', color: 'var(--color-danger)' },
        { label: '영향 해안선', value: '27.5 km' },
        { label: '풍화율', value: '32.4%' },
        { label: '잔존유량', value: '101.4 kL', color: 'var(--color-warning)' },
      ],
      summary:
        '여수항 남동쪽 방향 확산, 18시간 후 돌산도 해안 도달 예상. 조류 영향으로 남서쪽 이동.',
    },
    HNS: {
      title: 'HNS 대기확산 결과',
      model: 'ALOHA + PHAST · 톨루엔 5톤',
      items: [
        { label: 'IDLH 범위', value: '1.2 km', color: 'var(--color-danger)' },
        { label: 'ERPG-2 범위', value: '2.8 km', color: 'var(--color-warning)' },
        { label: 'ERPG-1 범위', value: '5.1 km', color: 'var(--color-caution)' },
        { label: '풍향', value: 'SW → NE 방향' },
        { label: '대기 안정도', value: 'D등급 (중립)' },
        { label: '영향 인구', value: '약 2,400명', color: 'var(--color-danger)' },
      ],
      summary: '남서풍에 의해 북동쪽 내륙 방향 확산. IDLH 1.2km 이내 즉시 대피 필요.',
    },
    구난: {
      title: '긴급구난 SAR 결과',
      model: 'SAROPS · Monte Carlo 10,000회 시뮬레이션',
      items: [
        { label: '95% 확률 범위', value: '8.5 NM²', color: 'var(--color-accent)' },
        { label: '최적 탐색 경로', value: 'Sector Search' },
        { label: '예상 표류 속도', value: '1.8 kn' },
        { label: '표류 방향', value: 'NE (045°)' },
        { label: '생존 가능 시간', value: '36시간', color: 'var(--color-danger)' },
        { label: '필요 자산', value: '헬기 2 + 경비정 3', color: 'var(--color-warning)' },
      ],
      summary: '북동쪽 방향 표류 예상. 06:00 기준 최적 탐색 패턴: 섹터탐색(Sector Search).',
    },
  };

  const data = mockData[tag.label] || mockData['유출유'];

  return (
    <>
      <div
        className="rounded-sm"
        style={{
          padding: '10px 12px',
          background: `color-mix(in srgb, ${tag.color} 8%, transparent)`,
          border: `1px solid color-mix(in srgb, ${tag.color} 20%, transparent)`,
        }}
      >
        <div className="text-label-2 font-bold" style={{ color: tag.color, marginBottom: 4 }}>
          {tag.icon} {data.title}
        </div>
        <div className="text-caption text-fg-disabled font-mono">{data.model}</div>
        {incident && (
          <div className="text-caption text-fg-disabled" style={{ marginTop: 2 }}>
            사고: {incident.name} · {incident.date} {incident.time}
          </div>
        )}
      </div>

      <div className="rounded-sm border border-stroke overflow-hidden">
        {data.items.map((item, i) => (
          <div
            key={i}
            className="flex justify-between items-center"
            style={{
              padding: '6px 10px',
              borderBottom: i < data.items.length - 1 ? '1px solid var(--stroke-default)' : 'none',
              background: i % 2 === 0 ? 'var(--bg-surface)' : 'var(--bg-elevated)',
            }}
          >
            <span className="text-caption text-fg-disabled">{item.label}</span>
            <span
              className="text-caption font-semibold font-mono"
              style={{ color: item.color || 'var(--fg)' }}
            >
              {item.value}
            </span>
          </div>
        ))}
      </div>

      <div
        className="rounded-sm text-caption text-fg-sub"
        style={{
          padding: '8px 10px',
          background: `color-mix(in srgb, ${tag.color} 6%, transparent)`,
          border: `1px solid color-mix(in srgb, ${tag.color} 15%, transparent)`,
          lineHeight: 1.6,
        }}
      >
        💡 {data.summary}
      </div>

      <div
        className="rounded-sm bg-bg-base border border-stroke flex items-center justify-center flex-col gap-1"
        style={{ height: 120 }}
      >
        <div className="text-[32px] opacity-30">{tag.icon}</div>
        <div className="text-caption text-fg-disabled">시각화 영역</div>
      </div>
    </>
  );
}
