import type { OilSpillReportData } from '@interfaces/reports/ReportsInterface';
import { S } from '../OilSpillReportTemplate';
import { ECell } from './ECell';
import { AddRowBtn } from './AddRowBtn';

export function Page6({
  data,
  editing,
  onChange,
}: {
  data: OilSpillReportData;
  editing: boolean;
  onChange: (d: OilSpillReportData) => void;
}) {
  const setVessel = (i: number, k: string, v: string) => {
    const vs = [...data.vessels];
    vs[i] = { ...vs[i], [k]: v };
    onChange({ ...data, vessels: vs });
  };
  return (
    <div style={S.page}>
      <div className="absolute top-2.5 right-4 text-caption text-fg-disabled font-semibold">
        해양오염방제지원시스템
      </div>
      <div style={S.sectionTitle}>5. 방제전략 수립·실행</div>
      <div style={S.subHeader}>방제자원 배치 현황 (반경 30km내)</div>
      <div className="overflow-x-auto">
        <table style={S.table}>
          <thead>
            <tr>
              <th style={S.th} rowSpan={2}>
                #
              </th>
              <th style={S.th} rowSpan={2}>
                선명
              </th>
              <th style={S.th} rowSpan={2}>
                소속
              </th>
              <th style={S.th} rowSpan={2}>
                거리(km)
              </th>
              <th style={S.th} rowSpan={2}>
                속력(knots)
              </th>
              <th style={S.th} rowSpan={2}>
                크기(총톤수)
              </th>
              <th style={S.th} colSpan={2}>
                유회수기
              </th>
              <th style={S.th} colSpan={2}>
                오일펜스
              </th>
            </tr>
            <tr>
              <th style={S.th}>종류</th>
              <th style={S.th}>용량(kl)</th>
              <th style={S.th}>종류</th>
              <th style={S.th}>길이(m)</th>
            </tr>
          </thead>
          <tbody>
            {data.vessels.map((v, i) => (
              <tr key={i}>
                <td style={{ ...S.td, fontWeight: 600 }}>{i + 1}</td>
                <ECell
                  value={v.name}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'name', val)}
                />
                <ECell
                  value={v.org}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'org', val)}
                />
                <ECell
                  value={v.dist}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'dist', val)}
                />
                <ECell
                  value={v.speed}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'speed', val)}
                />
                <ECell
                  value={v.ton}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'ton', val)}
                />
                <ECell
                  value={v.collectorType}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'collectorType', val)}
                />
                <ECell
                  value={v.collectorCap}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'collectorCap', val)}
                />
                <ECell
                  value={v.boomType}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'boomType', val)}
                />
                <ECell
                  value={v.boomLength}
                  editing={editing}
                  onChange={(val) => setVessel(i, 'boomLength', val)}
                />
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {editing && (
        <AddRowBtn
          onClick={() =>
            onChange({
              ...data,
              vessels: [
                ...data.vessels,
                {
                  name: '',
                  org: '',
                  dist: '',
                  speed: '',
                  ton: '',
                  collectorType: '',
                  collectorCap: '',
                  boomType: '',
                  boomLength: '',
                },
              ],
            })
          }
        />
      )}
      <div style={S.subHeader}>기타 장비</div>
      {editing ? (
        <textarea
          value={data.etcEquipment}
          onChange={(e) => onChange({ ...data, etcEquipment: e.target.value })}
          placeholder="기타 장비 입력"
          style={{
            width: '100%',
            minHeight: '60px',
            background: 'var(--bg-base)',
            border: '1px solid var(--stroke-light)',
            borderRadius: '4px',
            padding: '12px',
            fontSize: 'var(--font-size-label-1)',
            outline: 'none',
            resize: 'vertical',
          }}
        />
      ) : (
        <div
          style={{
            minHeight: '60px',
            border: data.etcEquipment
              ? '1px solid var(--stroke-default)'
              : '2px dashed var(--stroke-default)',
            borderRadius: '4px',
            padding: '12px',
            color: data.etcEquipment ? 'var(--fg-default)' : 'var(--fg-disabled)',
            fontStyle: data.etcEquipment ? 'normal' : 'italic',
            fontSize: 'var(--font-size-label-1)',
          }}
        >
          {data.etcEquipment || '-'}
        </div>
      )}
    </div>
  );
}
