import type { AccidentType } from '@/types/rescue/RescueType';
import { MetricCard } from './MetricCard';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function DamageStabilityPanel(_props: { activeType: AccidentType }) {
  return (
    <div className="flex flex-col p-2.5 gap-2">
      <div className="text-label-1 font-bold text-fg font-korean">
        손상 복원성 (DAMAGE STABILITY)
      </div>
      <div className="text-caption text-fg-disabled font-korean leading-snug">
        사고유형에 따른 손상 후 선체 복원력 분석
        <br />
        IMO A.749(18) / SOLAS Ch.II-1 기준 평가
      </div>

      {/* GZ Curve SVG */}
      <div className="bg-bg-card border border-stroke rounded-md p-2.5">
        <div className="text-caption font-bold text-fg-sub font-korean mb-1.5">
          GZ 복원력 곡선 (Righting Lever Curve)
        </div>
        <svg viewBox="0 0 260 120" className="w-full" style={{ height: '100px' }}>
          <line x1="30" y1="10" x2="30" y2="100" stroke="var(--stroke-default)" strokeWidth=".5" />
          <line
            x1="30"
            y1="100"
            x2="255"
            y2="100"
            stroke="var(--stroke-default)"
            strokeWidth=".5"
          />
          <line
            x1="30"
            y1="55"
            x2="255"
            y2="55"
            stroke="var(--stroke-default)"
            strokeWidth=".3"
            strokeDasharray="3,3"
          />
          <line
            x1="30"
            y1="32"
            x2="255"
            y2="32"
            stroke="var(--stroke-default)"
            strokeWidth=".3"
            strokeDasharray="3,3"
          />
          <polyline
            points="30,100 55,80 80,55 105,38 130,30 155,32 180,42 205,60 230,85 250,100"
            fill="none"
            stroke="var(--color-info)"
            strokeWidth="1.5"
          />
          <text x="135" y="25" fill="var(--color-info)" fontSize="5" textAnchor="middle">
            비손상 GZ
          </text>
          <polyline
            points="30,100 55,88 80,72 105,62 130,58 155,62 180,75 205,92 220,100"
            fill="none"
            stroke="var(--color-danger)"
            strokeWidth="1.5"
          />
          <text x="140" y="54" fill="var(--color-danger)" fontSize="5" textAnchor="middle">
            손상 GZ
          </text>
          <line
            x1="30"
            y1="78"
            x2="255"
            y2="78"
            stroke="var(--color-danger)"
            strokeWidth=".6"
            strokeDasharray="4,2"
          />
          <text
            x="240"
            y="76"
            fill="var(--color-danger)"
            fontSize="4.5"
            fontFamily="var(--font-mono)"
          >
            IMO MIN
          </text>
          <text x="5" y="14" fill="var(--fg-disabled)" fontSize="5" fontFamily="var(--font-mono)">
            GZ(m)
          </text>
          <text x="5" y="35" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="var(--font-mono)">
            0.6
          </text>
          <text x="5" y="58" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="var(--font-mono)">
            0.4
          </text>
          <text x="5" y="82" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="var(--font-mono)">
            0.2
          </text>
          <text
            x="5"
            y="104"
            fill="var(--fg-disabled)"
            fontSize="4.5"
            fontFamily="var(--font-mono)"
          >
            0
          </text>
          <text
            x="30"
            y="112"
            fill="var(--fg-disabled)"
            fontSize="4.5"
            fontFamily="var(--font-mono)"
          >
            0°
          </text>
          <text
            x="80"
            y="112"
            fill="var(--fg-disabled)"
            fontSize="4.5"
            fontFamily="var(--font-mono)"
          >
            15°
          </text>
          <text
            x="130"
            y="112"
            fill="var(--fg-disabled)"
            fontSize="4.5"
            fontFamily="var(--font-mono)"
          >
            30°
          </text>
          <text
            x="180"
            y="112"
            fill="var(--fg-disabled)"
            fontSize="4.5"
            fontFamily="var(--font-mono)"
          >
            45°
          </text>
          <text
            x="230"
            y="112"
            fill="var(--fg-disabled)"
            fontSize="4.5"
            fontFamily="var(--font-mono)"
          >
            60°
          </text>
        </svg>
      </div>

      {/* 복원성 지표 */}
      <div className="grid grid-cols-2 gap-1.5">
        <MetricCard
          label="GZ_max (최대복원력)"
          value="0.25"
          unit="m"
          color="var(--color-danger)"
          sub="기준: 0.2m 이상 ⚠"
        />
        <MetricCard
          label="θ_max (최대복원각)"
          value="28"
          unit="°"
          color="var(--color-danger)"
          sub="기준: 25° 이상 ✓"
        />
      </div>
      <div className="grid grid-cols-2 gap-1.5">
        <div className="bg-bg-card border border-stroke rounded-md p-2">
          <div className="text-caption text-fg-disabled font-korean">침수 구획수</div>
          <div className="text-title-3 font-bold text-fg-sub font-mono">
            2 <span className="text-caption">구획</span>
          </div>
          <div className="text-caption text-fg-disabled font-korean">#1 선수탱크 / #3 좌현탱크</div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-md p-2">
          <div className="text-caption text-fg-disabled font-korean">Margin Line 여유</div>
          <div className="text-title-3 font-bold text-fg-sub font-mono">
            0.12 <span className="text-caption">m</span>
          </div>
          <div className="text-caption text-fg-disabled font-korean">침수 임계점 임박</div>
        </div>
      </div>

      {/* SOLAS 판정 */}
      <div className="bg-bg-card border border-stroke rounded-md p-2.5">
        <div className="text-label-2 font-bold text-color-danger font-korean mb-1">
          ⚠ SOLAS 손상복원성 판정: 부적합 (FAIL)
        </div>
        <div className="text-caption text-fg-disabled font-korean leading-snug">
          · Area(0~θ_f): 0.028 m·rad (기준 0.015 ✓)
          <br />
          · GZ_max ≥ 0.1m: 0.25m ✓ | θ_max ≥ 15°: 28° ✓<br />·{' '}
          <span className="text-color-danger">
            Margin Line 침수: 0.12m — 추가 침수 시 전복 위험
          </span>
        </div>
      </div>

      {/* 좌초시 복원성 */}
      <div className="bg-bg-card border border-stroke rounded-md p-2">
        <div className="text-caption font-bold text-fg-sub font-korean mb-1">
          좌초시 복원성 (Grounded Stability)
        </div>
        <div className="grid grid-cols-2 gap-1 text-caption font-mono">
          {[
            { label: '지반반력', value: '1,240 kN' },
            { label: '접촉 면적', value: '12.5 m²' },
            { label: '제거력(Removal)', value: '1,850 kN' },
            { label: '좌초 GM', value: '0.65 m' },
          ].map((r, i) => (
            <div key={i} className="px-1.5 py-1 bg-bg-card rounded-sm">
              <span className="text-fg-disabled font-korean text-caption">{r.label}</span>
              <br />
              <b className="text-fg-sub">{r.value}</b>
            </div>
          ))}
        </div>
      </div>

      {/* 탱크 상태 */}
      <div className="bg-bg-card border border-stroke rounded-md p-2">
        <div className="text-caption font-bold text-fg-sub font-korean mb-1">
          탱크 상태 (Tank Volume Status)
        </div>
        <div className="flex flex-col gap-0.5 text-caption font-korean">
          {[
            { name: '#1 FP Tank', pct: 100, status: '침수', danger: true },
            { name: '#3 Port Tank', pct: 85, status: '85%', danger: true },
            { name: '#2 DB Tank', pct: 45, status: '45%', danger: false },
            { name: 'Ballast #4', pct: 72, status: '72%', danger: false },
            { name: 'Fuel Oil #5', pct: 68, status: '68%', danger: false },
          ].map((t, i) => (
            <div key={i} className="flex items-center gap-1">
              <div
                className={`w-2 h-2 rounded-sm flex-shrink-0 ${t.danger ? 'bg-color-danger' : 'bg-color-info'}`}
              />
              <span className="w-[65px] text-fg-disabled">{t.name}</span>
              <div className="flex-1 h-1 bg-bg-surface-hover rounded-sm">
                <div
                  className={`h-full rounded-sm ${t.danger ? 'bg-color-danger' : 'bg-color-info'}`}
                  style={{ width: `${t.pct}%` }}
                />
              </div>
              <span
                className={`min-w-[35px] text-right ${t.danger ? 'text-fg-sub' : 'text-fg-disabled'}`}
              >
                {t.status}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
