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

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function LongStrengthPanel(_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">
        종강도 분석 (LONGITUDINAL STRENGTH)
      </div>
      <div className="text-caption text-fg-disabled font-korean leading-snug">
        선체 종방향 구조 응력 분석
        <br />
        IACS CSR / Classification Society 기준
      </div>

      {/* 전단력 분포 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">
          전단력 분포 (Shear Force Distribution)
        </div>
        <svg viewBox="0 0 260 90" className="w-full" style={{ height: '75px' }}>
          <line x1="25" y1="45" x2="255" y2="45" stroke="var(--stroke-default)" strokeWidth=".5" />
          <line x1="25" y1="10" x2="25" y2="80" stroke="var(--stroke-default)" strokeWidth=".5" />
          <line
            x1="25"
            y1="18"
            x2="255"
            y2="18"
            stroke="color-mix(in srgb, var(--color-danger) 25%, transparent)"
            strokeWidth=".5"
            strokeDasharray="3,2"
          />
          <line
            x1="25"
            y1="72"
            x2="255"
            y2="72"
            stroke="color-mix(in srgb, var(--color-danger) 25%, transparent)"
            strokeWidth=".5"
            strokeDasharray="3,2"
          />
          <text
            x="240"
            y="15"
            fill="color-mix(in srgb, var(--color-danger) 40%, transparent)"
            fontSize="4"
          >
            LIMIT
          </text>
          <polyline
            points="25,45 50,38 75,28 100,22 120,20 140,25 160,35 180,45 200,52 220,58 240,55 255,50"
            fill="none"
            stroke="var(--color-info)"
            strokeWidth="1.5"
          />
          <polyline
            points="25,45 50,35 75,22 100,16 120,14 140,18 160,30 180,45 200,56 220,64 240,60 255,55"
            fill="none"
            stroke="var(--color-danger)"
            strokeWidth="1.2"
            strokeDasharray="3,2"
          />
          <text x="80" y="12" fill="var(--color-danger)" fontSize="4.5">
            손상 후 SF ▲
          </text>
          <text x="2" y="14" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            +SF
          </text>
          <text x="2" y="48" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            0
          </text>
          <text x="2" y="78" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            -SF
          </text>
          <text x="25" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            AP
          </text>
          <text x="130" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            MID
          </text>
          <text x="245" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            FP
          </text>
        </svg>
      </div>

      {/* 굽힘모멘트 분포 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">
          굽힘모멘트 분포 (Bending Moment Distribution)
        </div>
        <svg viewBox="0 0 260 90" className="w-full" style={{ height: '75px' }}>
          <line x1="25" y1="45" x2="255" y2="45" stroke="var(--stroke-default)" strokeWidth=".5" />
          <line x1="25" y1="10" x2="25" y2="80" stroke="var(--stroke-default)" strokeWidth=".5" />
          <line
            x1="25"
            y1="15"
            x2="255"
            y2="15"
            stroke="color-mix(in srgb, var(--color-danger) 25%, transparent)"
            strokeWidth=".5"
            strokeDasharray="3,2"
          />
          <text
            x="240"
            y="12"
            fill="color-mix(in srgb, var(--color-danger) 40%, transparent)"
            fontSize="4"
          >
            LIMIT
          </text>
          <polyline
            points="25,45 50,40 75,32 100,22 130,18 160,22 190,32 220,40 255,45"
            fill="none"
            stroke="var(--color-info)"
            strokeWidth="1.5"
          />
          <polyline
            points="25,45 50,38 75,26 100,16 130,12 160,16 190,28 220,38 255,45"
            fill="none"
            stroke="var(--color-danger)"
            strokeWidth="1.2"
            strokeDasharray="3,2"
          />
          <text x="115" y="8" fill="var(--color-danger)" fontSize="4.5">
            손상 후 BM ▲
          </text>
          <text x="2" y="14" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            +BM
          </text>
          <text x="2" y="48" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            0
          </text>
          <text x="25" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            AP
          </text>
          <text x="130" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            MID
          </text>
          <text x="245" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
            FP
          </text>
        </svg>
      </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">SF 최대/허용 비율</div>
          <div className="text-title-3 font-bold text-fg-sub font-mono">
            88<span className="text-caption">%</span>
          </div>
          <div className="h-[5px] bg-bg-surface-hover rounded-sm mt-0.5">
            <div className="h-full rounded-sm w-[88%] bg-color-danger" />
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-md p-2">
          <div className="text-caption text-fg-disabled font-korean">BM 최대/허용 비율</div>
          <div className="text-title-3 font-bold text-fg-sub font-mono">
            92<span className="text-caption">%</span>
          </div>
          <div className="h-[5px] bg-bg-surface-hover rounded-sm mt-0.5">
            <div className="h-full rounded-sm w-[92%] bg-color-danger" />
          </div>
        </div>
      </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">Section Modulus 여유</div>
          <div className="text-title-3 font-bold text-fg-sub font-mono">1.08</div>
          <div className="text-caption text-fg-disabled font-korean">Req'd: 1.00 이상 ✓</div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-md p-2">
          <div className="text-caption text-fg-disabled font-korean">Hull Girder ULS</div>
          <div className="text-title-3 font-bold text-fg-sub font-mono">1.12</div>
          <div className="text-caption text-fg-disabled font-korean">Req'd: 1.10 이상 ⚠</div>
        </div>
      </div>

      {/* 판정 */}
      <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">
          ⚠ 종강도 판정: 주의 (CAUTION)
        </div>
        <div className="text-caption text-fg-disabled font-korean leading-snug">
          · SF 최대: 허용치의 88% — <span className="text-color-danger">주의 구간</span>
          <br />· BM 최대: 허용치의 92% — <span className="text-color-danger">경고 구간</span>
          <br />
          · 중앙부 Hogging 모멘트 증가 — 추가 침수 시 선체 절단 위험
          <br />· <span className="text-color-danger">밸러스트 이동으로 BM 분산 필요</span>
        </div>
      </div>
    </div>
  );
}
