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

export function Page4({
  data,
  editing,
  onChange,
}: {
  data: OilSpillReportData;
  editing: boolean;
  onChange: (d: OilSpillReportData) => void;
}) {
  const setArr = <T extends Record<string, string>>(
    key: keyof OilSpillReportData,
    arr: T[],
    i: number,
    k: string,
    v: string,
  ) => {
    const copy = [...arr];
    copy[i] = { ...copy[i], [k]: v };
    onChange({ ...data, [key]: copy });
  };

  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}>4. 민감자원 및 민감도 평가</div>
      <SensitiveResourceMapSection data={data} editing={editing} onChange={onChange} />

      <div style={{ ...S.subHeader, marginTop: '16px' }}>양식장 분포</div>
      <table style={S.table}>
        <thead>
          <tr>
            <th style={S.th}>구분</th>
            <th style={S.th}>면적(ha)</th>
            <th style={S.th}>사고지점과의 거리(km)</th>
          </tr>
        </thead>
        <tbody>
          {data.aquaculture.map((a, i) => (
            <tr key={i}>
              <ECell
                value={a.type}
                editing={editing}
                onChange={(v) => setArr('aquaculture', data.aquaculture, i, 'type', v)}
                placeholder="-"
              />
              <ECell
                value={a.area}
                editing={editing}
                onChange={(v) => setArr('aquaculture', data.aquaculture, i, 'area', v)}
              />
              <ECell
                value={a.distance}
                editing={editing}
                onChange={(v) => setArr('aquaculture', data.aquaculture, i, 'distance', v)}
              />
            </tr>
          ))}
        </tbody>
      </table>
      {editing && (
        <AddRowBtn
          onClick={() =>
            onChange({
              ...data,
              aquaculture: [...data.aquaculture, { type: '', area: '', distance: '' }],
            })
          }
        />
      )}

      <div className="grid grid-cols-2 gap-5">
        <div>
          <div style={S.subHeader}>해수욕장 분포</div>
          <table style={S.table}>
            <thead>
              <tr>
                <th style={S.th}>구분</th>
                <th style={S.th}>이격거리(km)</th>
              </tr>
            </thead>
            <tbody>
              {data.beaches.map((b, i) => (
                <tr key={i}>
                  <ECell
                    value={b.name}
                    editing={editing}
                    onChange={(v) => setArr('beaches', data.beaches, i, 'name', v)}
                    align="left"
                  />
                  <ECell
                    value={b.distance}
                    editing={editing}
                    onChange={(v) => setArr('beaches', data.beaches, i, 'distance', v)}
                  />
                </tr>
              ))}
            </tbody>
          </table>
          {editing && (
            <AddRowBtn
              onClick={() =>
                onChange({ ...data, beaches: [...data.beaches, { name: '', distance: '' }] })
              }
            />
          )}
        </div>
        <div>
          <div style={S.subHeader}>수산시장 분포</div>
          <table style={S.table}>
            <thead>
              <tr>
                <th style={S.th}>구분</th>
                <th style={S.th}>이격거리(km)</th>
              </tr>
            </thead>
            <tbody>
              {data.markets.map((m, i) => (
                <tr key={i}>
                  <ECell
                    value={m.name}
                    editing={editing}
                    onChange={(v) => setArr('markets', data.markets, i, 'name', v)}
                    align="left"
                  />
                  <ECell
                    value={m.distance}
                    editing={editing}
                    onChange={(v) => setArr('markets', data.markets, i, 'distance', v)}
                  />
                </tr>
              ))}
            </tbody>
          </table>
          {editing && (
            <AddRowBtn
              onClick={() =>
                onChange({ ...data, markets: [...data.markets, { name: '', distance: '' }] })
              }
            />
          )}
        </div>
      </div>

      <div className="grid grid-cols-2 gap-5 mt-2">
        <div>
          <div style={S.subHeader}>해안선(ESI) 분포</div>
          <table style={S.table}>
            <thead>
              <tr>
                <th style={S.th}>구분</th>
                <th style={S.th}>유형</th>
                <th style={S.th}>분포 길이</th>
              </tr>
            </thead>
            <tbody>
              {data.esi.map((e, i) => (
                <tr key={i}>
                  <td style={{ ...S.td, fontWeight: 600, fontSize: 'var(--font-size-caption)' }}>
                    {e.code}
                  </td>
                  <td style={S.tdLeft}>{e.type}</td>
                  <ECell
                    value={e.length}
                    editing={editing}
                    onChange={(v) => setArr('esi', data.esi, i, 'length', v)}
                  />
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div>
          <div style={S.subHeader}>생물종(보호종) 분포</div>
          <table style={S.table}>
            <thead>
              <tr>
                <th style={S.th}>구분</th>
                <th style={S.th}>종</th>
              </tr>
            </thead>
            <tbody>
              {data.species.map((s, i) => (
                <tr key={i}>
                  <td style={{ ...S.td, fontWeight: 600 }}>{s.category}</td>
                  <ECell
                    value={s.species}
                    editing={editing}
                    onChange={(v) => setArr('species', data.species, i, 'species', v)}
                    align="left"
                    placeholder="-"
                  />
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ ...S.subHeader, marginTop: '16px' }}>서식지 분포</div>
          <table style={S.table}>
            <thead>
              <tr>
                <th style={S.th}>구분</th>
                <th style={S.th}>분포넓이</th>
              </tr>
            </thead>
            <tbody>
              {data.habitat.map((h, i) => (
                <tr key={i}>
                  <ECell
                    value={h.type}
                    editing={editing}
                    onChange={(v) => setArr('habitat', data.habitat, i, 'type', v)}
                  />
                  <ECell
                    value={h.area}
                    editing={editing}
                    onChange={(v) => setArr('habitat', data.habitat, i, 'area', v)}
                  />
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
