import type { Severity } from '@/types/hns/HnsType';

const CHART_DATA = [
  {
    id: 'S-01',
    label: 'T+0h',
    conc: 850,
    idlh: 1.2,
    erpg2: 2.8,
    pop: 3200,
    wind: 'SW 5.2',
    severity: 'CRITICAL' as Severity,
  },
  {
    id: 'S-02',
    label: 'T+1h',
    conc: 620,
    idlh: 0.9,
    erpg2: 3.4,
    pop: 5800,
    wind: 'SE 6.8',
    severity: 'CRITICAL' as Severity,
  },
  {
    id: 'S-03',
    label: 'T+3h',
    conc: 420,
    idlh: 0.5,
    erpg2: 2.1,
    pop: 1800,
    wind: 'S 4.1',
    severity: 'HIGH' as Severity,
  },
  {
    id: 'S-04',
    label: 'T+6h',
    conc: 85,
    idlh: 0,
    erpg2: 0.6,
    pop: 120,
    wind: 'W 3.5',
    severity: 'MEDIUM' as Severity,
  },
  {
    id: 'S-05',
    label: 'T+12h',
    conc: 8,
    idlh: 0,
    erpg2: 0,
    pop: 0,
    wind: 'NW 2.8',
    severity: 'RESOLVED' as Severity,
  },
];

const SEV_COLOR: Record<Severity, string> = {
  CRITICAL: 'var(--color-danger)',
  HIGH: 'var(--color-warning)',
  MEDIUM: 'var(--color-caution)',
  RESOLVED: 'var(--color-success)',
};

export function ScenarioComparison() {
  const D = CHART_DATA;
  // SVG coordinate helpers for concentration chart (viewBox 500x140)
  const concMax = 900;
  const concX = [50, 157, 264, 371, 480];
  const concY = D.map((d) => 10 + (1 - d.conc / concMax) * 110);
  const concPoly = concX.map((x, i) => `${x},${concY[i]}`).join(' ');
  const concArea = concPoly + ` ${concX[4]},120 ${concX[0]},120`;

  // Radius chart helpers (viewBox 240x100)
  const radMax = 4;
  const radX = [30, 80, 130, 180, 230];
  const idlhY = D.map((d) => 10 + (1 - d.idlh / radMax) * 75);
  const erpgY = D.map((d) => 10 + (1 - d.erpg2 / radMax) * 75);

  // Population chart helpers
  const popMax = 6000;
  const barW = 30;
  const barX = [30, 70, 110, 150, 190];

  return (
    <div
      className="flex-1 overflow-y-auto flex flex-col gap-3.5 px-5 py-4"
      style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}
    >
      {/* Title */}
      <div className="text-title-4 font-bold mb-0.5">
        📊 시나리오 비교 — 시간대별 대기확산 지표 추이
      </div>

      {/* ── Chart 1: 최대 지표면 농도 추이 (Line + Area) ── */}
      <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
        <div className="text-label-2 font-bold mb-2.5">최대 지표면 농도 (ppm) 변화 추이</div>
        <svg viewBox="0 0 500 140" className="w-full" style={{ height: '130px' }}>
          <defs>
            <linearGradient id="hnsGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#f97316" stopOpacity={0.12} />
              <stop offset="100%" stopColor="transparent" />
            </linearGradient>
          </defs>
          {/* Axes */}
          <line x1="50" y1="10" x2="50" y2="120" stroke="#21262d" strokeWidth={0.5} />
          <line x1="50" y1="120" x2="480" y2="120" stroke="#21262d" strokeWidth={0.5} />
          {/* Threshold lines */}
          <line
            x1="50"
            y1={10 + (1 - 500 / concMax) * 110}
            x2="480"
            y2={10 + (1 - 500 / concMax) * 110}
            stroke="rgba(59,130,246,.2)"
            strokeWidth={0.5}
            strokeDasharray="4,3"
          />
          <text
            x="5"
            y={10 + (1 - 500 / concMax) * 110 + 4}
            fill="#f87171"
            fontSize="7"
            fontFamily="var(--font-mono)"
          >
            500 IDLH
          </text>
          <line
            x1="50"
            y1={10 + (1 - 300 / concMax) * 110}
            x2="480"
            y2={10 + (1 - 300 / concMax) * 110}
            stroke="rgba(6,182,212,.2)"
            strokeWidth={0.5}
            strokeDasharray="4,3"
          />
          <text
            x="5"
            y={10 + (1 - 300 / concMax) * 110 + 4}
            fill="#fb923c"
            fontSize="7"
            fontFamily="var(--font-mono)"
          >
            300 ERPG2
          </text>
          {/* Area fill */}
          <polygon points={concArea} fill="url(#hnsGrad)" />
          {/* Line */}
          <polyline points={concPoly} fill="none" stroke="#f97316" strokeWidth={2} />
          {/* Data points + labels */}
          {D.map((d, i) => (
            <g key={d.id}>
              <circle
                cx={concX[i]}
                cy={concY[i]}
                r={4}
                fill={SEV_COLOR[d.severity]}
                stroke="#0d1117"
                strokeWidth={2}
              />
              <text
                x={concX[i] - 6}
                y={concY[i] - 8}
                fill={SEV_COLOR[d.severity]}
                fontSize="7"
                textAnchor="end"
                fontFamily="var(--font-mono)"
              >
                {d.conc}
              </text>
              <text
                x={concX[i]}
                y={134}
                fill="#8b949e"
                fontSize="7"
                textAnchor="middle"
                fontFamily="var(--font-mono)"
              >
                {d.label}
              </text>
            </g>
          ))}
        </svg>
      </div>

      {/* ── Charts 2 & 3: 2-column grid ── */}
      <div className="grid grid-cols-2 gap-[14px]">
        {/* Chart 2: 위험 반경 변화 (Multi-line) */}
        <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
          <div className="text-label-2 font-bold mb-2.5">위험 반경 (km) 변화</div>
          <svg viewBox="0 0 260 100" className="w-full" style={{ height: '85px' }}>
            <line x1="30" y1="10" x2="30" y2="85" stroke="#21262d" strokeWidth={0.5} />
            <line x1="30" y1="85" x2="230" y2="85" stroke="#21262d" strokeWidth={0.5} />
            {/* IDLH line (red solid) */}
            <polyline
              points={radX.map((x, i) => `${x},${idlhY[i]}`).join(' ')}
              fill="none"
              stroke="#ef4444"
              strokeWidth={1.5}
            />
            {/* ERPG-2 line (orange dashed) */}
            <polyline
              points={radX.map((x, i) => `${x},${erpgY[i]}`).join(' ')}
              fill="none"
              stroke="#f97316"
              strokeWidth={1.5}
              strokeDasharray="4,2"
            />
            {/* Data points */}
            {D.map((d, i) => {
              const c =
                d.idlh > 0
                  ? d.severity === 'CRITICAL' || d.severity === 'HIGH'
                    ? '#ef4444'
                    : '#fbbf24'
                  : '#22c55e';
              return (
                <g key={d.id}>
                  <circle
                    cx={radX[i]}
                    cy={idlhY[i]}
                    r={3}
                    fill={c}
                    stroke="#0d1117"
                    strokeWidth={1.5}
                  />
                  <text
                    x={radX[i]}
                    y={96}
                    fill="#8b949e"
                    fontSize="6"
                    textAnchor="middle"
                    fontFamily="var(--font-mono)"
                  >
                    {d.label.replace('+', '+')}
                  </text>
                </g>
              );
            })}
            {/* Legend */}
            <line x1="170" y1="14" x2="185" y2="14" stroke="#ef4444" strokeWidth={1.5} />
            <text x="188" y="17" fill="#ef4444" fontSize="6" fontFamily="var(--font-korean)">
              IDLH
            </text>
            <line
              x1="170"
              y1="24"
              x2="185"
              y2="24"
              stroke="#f97316"
              strokeWidth={1.5}
              strokeDasharray="4,2"
            />
            <text x="188" y="27" fill="#f97316" fontSize="6" fontFamily="var(--font-korean)">
              ERPG-2
            </text>
          </svg>
        </div>

        {/* Chart 3: 영향 인구 변화 (Bar) */}
        <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
          <div className="text-label-2 font-bold mb-2.5">영향 인구 (명) 변화</div>
          <svg viewBox="0 0 240 100" className="w-full" style={{ height: '85px' }}>
            <line x1="30" y1="10" x2="30" y2="85" stroke="#21262d" strokeWidth={0.5} />
            <line x1="30" y1="85" x2="230" y2="85" stroke="#21262d" strokeWidth={0.5} />
            {D.map((d, i) => {
              const h = Math.max(1, (d.pop / popMax) * 75);
              const y = 85 - h;
              const color = SEV_COLOR[d.severity];
              const barColor = `${color}33`;
              return (
                <g key={d.id}>
                  <rect x={barX[i]} y={y} width={barW} height={h} rx={2} fill={barColor} />
                  <text
                    x={barX[i] + barW / 2}
                    y={y - 3}
                    fill={color}
                    fontSize="6"
                    textAnchor="middle"
                    fontFamily="var(--font-mono)"
                  >
                    {d.pop > 0 ? d.pop.toLocaleString() : '0'}
                  </text>
                  <text
                    x={barX[i] + barW / 2}
                    y={96}
                    fill="#8b949e"
                    fontSize="6"
                    textAnchor="middle"
                    fontFamily="var(--font-mono)"
                  >
                    {d.label.replace('+', '+')}
                  </text>
                </g>
              );
            })}
          </svg>
        </div>
      </div>

      {/* ── Chart 4: 시나리오 비교표 ── */}
      <div className="rounded-md border border-stroke overflow-x-auto bg-bg-card p-[14px]">
        <div className="text-label-2 font-bold mb-2.5">📋 시나리오 비교표</div>
        <table className="w-full text-label-2 border-collapse">
          <thead>
            <tr className="bg-bg-base">
              {['지표', ...D.map((d) => `${d.id} (${d.label})`)].map((h, i) => (
                <th
                  key={i}
                  className="text-fg-disabled border-b border-stroke text-caption px-[10px] py-2"
                  style={{ textAlign: i === 0 ? 'left' : 'center' }}
                >
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {/* 최대농도 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">최대농도 (ppm)</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-mono font-semibold p-1.5"
                  style={{ color: SEV_COLOR[d.severity] }}
                >
                  {d.conc}
                </td>
              ))}
            </tr>
            {/* IDLH 반경 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">IDLH 반경 (km)</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-mono font-semibold p-1.5"
                  style={{ color: d.idlh > 0 ? 'var(--color-danger)' : 'var(--color-success)' }}
                >
                  {d.idlh || 0}
                </td>
              ))}
            </tr>
            {/* ERPG-2 반경 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">ERPG-2 반경 (km)</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-mono font-semibold p-1.5"
                  style={{ color: d.erpg2 > 0 ? 'var(--color-warning)' : 'var(--color-success)' }}
                >
                  {d.erpg2 || 0}
                </td>
              ))}
            </tr>
            {/* 영향인구 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">영향인구 (명)</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-mono font-semibold p-1.5"
                  style={{ color: SEV_COLOR[d.severity] }}
                >
                  {d.pop.toLocaleString()}
                </td>
              ))}
            </tr>
            {/* 풍향/풍속 */}
            <tr className="border-b border-stroke">
              <td className="text-fg-sub px-[10px] py-1.5">풍향 / 풍속</td>
              {D.map((d) => (
                <td key={d.id} className="text-center font-mono text-color-accent p-1.5">
                  {d.wind}
                </td>
              ))}
            </tr>
            {/* 위험 등급 */}
            <tr>
              <td className="text-fg-sub px-[10px] py-1.5">위험 등급</td>
              {D.map((d) => (
                <td
                  key={d.id}
                  className="text-center font-bold p-1.5"
                  style={{ color: SEV_COLOR[d.severity] }}
                >
                  {d.severity}
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}
