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

export function Page2({
  data,
  editing,
  onChange,
}: {
  data: OilSpillReportData;
  editing: boolean;
  onChange: (d: OilSpillReportData) => void;
}) {
  const setTide = (i: number, k: string, v: string) => {
    const t = [...data.tide];
    t[i] = { ...t[i], [k]: v };
    onChange({ ...data, tide: t });
  };
  const setWeather = (i: number, k: string, v: string) => {
    const w = [...data.weather];
    w[i] = { ...w[i], [k]: v };
    onChange({ ...data, weather: w });
  };
  const setSpread = (i: number, k: string, v: string) => {
    const s = [...data.spread];
    s[i] = { ...s[i], [k]: v };
    onChange({ ...data, spread: s });
  };

  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}>2. 해양기상정보</div>
      <div style={S.subHeader}>조석 정보</div>
      <table style={S.table}>
        <thead>
          <tr>
            <th style={S.th}>일자</th>
            <th style={S.th}>물때</th>
            <th style={S.th} colSpan={2}>
              저조
            </th>
            <th style={S.th} colSpan={2}>
              고조
            </th>
          </tr>
        </thead>
        <tbody>
          {data.tide.map((t, i) => (
            <tr key={i}>
              <ECell value={t.date} editing={editing} onChange={(v) => setTide(i, 'date', v)} />
              <ECell
                value={t.tideType}
                editing={editing}
                onChange={(v) => setTide(i, 'tideType', v)}
              />
              <ECell
                value={t.lowTide1}
                editing={editing}
                onChange={(v) => setTide(i, 'lowTide1', v)}
              />
              <ECell
                value={t.lowTide2}
                editing={editing}
                onChange={(v) => setTide(i, 'lowTide2', v)}
              />
              <ECell
                value={t.highTide1}
                editing={editing}
                onChange={(v) => setTide(i, 'highTide1', v)}
              />
              <ECell
                value={t.highTide2}
                editing={editing}
                onChange={(v) => setTide(i, 'highTide2', v)}
              />
            </tr>
          ))}
        </tbody>
      </table>
      {editing && (
        <AddRowBtn
          onClick={() =>
            onChange({
              ...data,
              tide: [
                ...data.tide,
                {
                  date: '',
                  tideType: '',
                  lowTide1: '',
                  highTide1: '',
                  lowTide2: '',
                  highTide2: '',
                },
              ],
            })
          }
        />
      )}

      <div style={S.subHeader}>기상 정보</div>
      <table style={S.table}>
        <thead>
          <tr>
            <th style={S.th}>기상 예측시간</th>
            <th style={S.th}>일출</th>
            <th style={S.th}>일몰</th>
            <th style={S.th}>풍향</th>
            <th style={S.th}>풍속(m/s)</th>
            <th style={S.th}>유향</th>
            <th style={S.th}>유속(knot/m/s)</th>
            <th style={S.th}>파고(m)</th>
          </tr>
        </thead>
        <tbody>
          {data.weather.map((w, i) => (
            <tr key={i}>
              <ECell value={w.time} editing={editing} onChange={(v) => setWeather(i, 'time', v)} />
              <ECell
                value={w.sunrise}
                editing={editing}
                onChange={(v) => setWeather(i, 'sunrise', v)}
              />
              <ECell
                value={w.sunset}
                editing={editing}
                onChange={(v) => setWeather(i, 'sunset', v)}
              />
              <ECell
                value={w.windDir}
                editing={editing}
                onChange={(v) => setWeather(i, 'windDir', v)}
              />
              <ECell
                value={w.windSpeed}
                editing={editing}
                onChange={(v) => setWeather(i, 'windSpeed', v)}
              />
              <ECell
                value={w.currentDir}
                editing={editing}
                onChange={(v) => setWeather(i, 'currentDir', v)}
              />
              <ECell
                value={w.currentSpeed}
                editing={editing}
                onChange={(v) => setWeather(i, 'currentSpeed', v)}
              />
              <ECell
                value={w.waveHeight}
                editing={editing}
                onChange={(v) => setWeather(i, 'waveHeight', v)}
              />
            </tr>
          ))}
        </tbody>
      </table>
      {editing && (
        <AddRowBtn
          onClick={() =>
            onChange({
              ...data,
              weather: [
                ...data.weather,
                {
                  time: '',
                  sunrise: '',
                  sunset: '',
                  windDir: '',
                  windSpeed: '',
                  currentDir: '',
                  currentSpeed: '',
                  waveHeight: '',
                },
              ],
            })
          }
        />
      )}

      <div style={S.sectionTitle}>3. 유출유 확산예측</div>
      <div className="flex gap-4 mb-4">
        <div style={{ flex: 1, minWidth: 0 }}>
          {data.step3MapImage ? (
            <img
              src={data.step3MapImage}
              alt="확산예측 3시간 지도"
              style={{
                width: '100%',
                height: 'auto',
                display: 'block',
                borderRadius: '4px',
                border: '1px solid var(--stroke-default)',
              }}
            />
          ) : (
            <div style={S.mapPlaceholder}>확산예측 3시간 지도</div>
          )}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          {data.step6MapImage ? (
            <img
              src={data.step6MapImage}
              alt="확산예측 6시간 지도"
              style={{
                width: '100%',
                height: 'auto',
                display: 'block',
                borderRadius: '4px',
                border: '1px solid var(--stroke-default)',
              }}
            />
          ) : (
            <div style={S.mapPlaceholder}>확산예측 6시간 지도</div>
          )}
        </div>
      </div>
      <div style={S.subHeader}>시간별 상세정보</div>
      <table style={S.table}>
        <thead>
          <tr>
            <th style={S.th}>경과시간</th>
            <th style={S.th}>풍화량(kl)</th>
            <th style={S.th}>해상잔존량(kl)</th>
            <th style={S.th}>연안부착량(kl)</th>
            <th style={S.th}>오염해역면적(km²)</th>
          </tr>
        </thead>
        <tbody>
          {data.spread.map((s, i) => (
            <tr key={i}>
              <ECell
                value={s.elapsed}
                editing={editing}
                onChange={(v) => setSpread(i, 'elapsed', v)}
              />
              <ECell
                value={s.weathered}
                editing={editing}
                onChange={(v) => setSpread(i, 'weathered', v)}
              />
              <ECell
                value={s.seaRemain}
                editing={editing}
                onChange={(v) => setSpread(i, 'seaRemain', v)}
              />
              <ECell
                value={s.coastAttach}
                editing={editing}
                onChange={(v) => setSpread(i, 'coastAttach', v)}
              />
              <ECell value={s.area} editing={editing} onChange={(v) => setSpread(i, 'area', v)} />
            </tr>
          ))}
        </tbody>
      </table>
      {editing && (
        <AddRowBtn
          onClick={() =>
            onChange({
              ...data,
              spread: [
                ...data.spread,
                { elapsed: '', weathered: '', seaRemain: '', coastAttach: '', area: '' },
              ],
            })
          }
        />
      )}
    </div>
  );
}
