import { apiGet, apiPostForm } from '../api.js';
import { saveDraft, loadDraft, clearDraft } from '../drafts.js';

export async function renderTreatment(root, { incidentId }) {
  if (!incidentId) {
    root.innerHTML = '<div class="alert alert-warning">Incident invalide.</div>';
    return;
  }

  root.innerHTML = `
    <div class="d-flex align-items-center justify-content-between mb-2">
      <div class="h5 mb-0">Traitement</div>
      <a class="btn btn-outline-secondary btn-sm" href="#/assigned">Retour</a>
    </div>

    <div id="meta" class="mb-2 text-body-secondary"></div>

    <div class="alert alert-info" id="draftInfo" style="display:none"></div>
    <div class="alert alert-success" id="okBox" style="display:none"></div>
    <div class="alert alert-danger" id="errBox" style="display:none"></div>

    <form id="treatForm" class="card card-body" enctype="multipart/form-data">
      <input type="hidden" name="incident_id" value="${incidentId}" />

      <div class="row g-3">
        <div class="col-12">
          <div class="fw-semibold">Équipe</div>
        </div>
        <div class="col-12">
          <label class="form-label">Nom équipe</label>
          <input class="form-control" name="team_name" />
        </div>
        <div class="col-12">
          <label class="form-label">Contact équipe</label>
          <input class="form-control" name="team_contact" />
        </div>

        <div class="col-12"><hr class="my-2" /></div>

        <div class="col-12">
          <div class="fw-semibold">Diagnostic</div>
        </div>
        <div class="col-12">
          <label class="form-label">Type d'incident</label>
          <input class="form-control" name="type_of_incident" />
        </div>
        <div class="col-12">
          <label class="form-label">Mode de détection</label>
          <input class="form-control" name="detection_mode" />
        </div>
        <div class="col-12">
          <label class="form-label">Distance coupure (km)</label>
          <input class="form-control" name="cut_distance_km" inputmode="decimal" />
        </div>
        <div class="col-6">
          <label class="form-label">GPS Lat</label>
          <input class="form-control" name="gps_lat" inputmode="decimal" />
        </div>
        <div class="col-6">
          <label class="form-label">GPS Lng</label>
          <input class="form-control" name="gps_lng" inputmode="decimal" />
        </div>
        <div class="col-12">
          <label class="form-label">Nature de défaut</label>
          <textarea class="form-control" name="fault_nature" rows="2"></textarea>
        </div>

        <div class="col-12"><hr class="my-2" /></div>

        <div class="col-12">
          <div class="fw-semibold">Intervention</div>
        </div>
        <div class="col-12">
          <label class="form-label">Prise en charge</label>
          <input class="form-control" type="datetime-local" name="takeover_at" />
        </div>
        <div class="col-6">
          <label class="form-label">Début</label>
          <input class="form-control" type="datetime-local" name="intervention_start" />
        </div>
        <div class="col-6">
          <label class="form-label">Fin</label>
          <input class="form-control" type="datetime-local" name="intervention_end" />
        </div>
        <div class="col-12">
          <label class="form-label">Type de réparation</label>
          <input class="form-control" name="repair_type" />
        </div>
        <div class="col-12">
          <label class="form-label">Commentaires</label>
          <textarea class="form-control" name="work_comments" rows="3"></textarea>
        </div>

        <div class="col-12"><hr class="my-2" /></div>

        <div class="col-12">
          <div class="fw-semibold">OTDR & pièces</div>
        </div>
        <div class="col-12">
          <label class="form-label">Résultat OTDR</label>
          <input class="form-control" name="otdr_result" placeholder="Conforme / Non conforme" />
        </div>
        <div class="col-12">
          <label class="form-label">Fichier OTDR avant</label>
          <input class="form-control" type="file" name="otdr_before" />
        </div>
        <div class="col-12">
          <label class="form-label">Fichier OTDR après</label>
          <input class="form-control" type="file" name="otdr_after" />
        </div>
        <div class="col-12">
          <label class="form-label">Devis</label>
          <input class="form-control" type="file" name="quote_file" />
        </div>

        <div class="col-12"><hr class="my-2" /></div>

        <div class="col-12">
          <div class="fw-semibold">Statut</div>
        </div>
        <div class="col-12">
          <label class="form-label">Statut de résolution</label>
          <input class="form-control" name="resolution_status" />
        </div>
        <div class="col-12">
          <label class="form-label">Besoin de complément</label>
          <select class="form-select" name="need_additional">
            <option value="0">Non</option>
            <option value="1">Oui</option>
          </select>
        </div>

        <div class="col-12"><hr class="my-2" /></div>

        <div class="col-12">
          <div class="fw-semibold">Matériels (1 ligne)</div>
        </div>
        <div class="col-7">
          <label class="form-label">Désignation</label>
          <input class="form-control" name="materials_designation[]" />
        </div>
        <div class="col-2">
          <label class="form-label">Qté</label>
          <input class="form-control" name="materials_qty[]" inputmode="decimal" />
        </div>
        <div class="col-3">
          <label class="form-label">Référence</label>
          <input class="form-control" name="materials_reference[]" />
        </div>
        <div class="col-12">
          <label class="form-label">Coût unitaire</label>
          <input class="form-control" name="materials_unit_cost[]" inputmode="decimal" />
        </div>

        <div class="col-12"><hr class="my-2" /></div>

        <div class="col-12">
          <div class="fw-semibold">Photos</div>
        </div>
        <div class="col-12">
          <label class="form-label">Photos (photos[])</label>
          <input class="form-control" type="file" name="photos[]" multiple accept="image/*" />
        </div>

        <div class="col-12">
          <label class="form-label">Photos intervention (interv_photo[])</label>
          <input class="form-control" type="file" name="interv_photo[]" multiple accept="image/*" />
        </div>

        <div class="col-12">
          <label class="form-label">Observations (interv_obs[])</label>
          <input class="form-control" name="interv_obs[]" placeholder="1 valeur par photo" />
        </div>

        <div class="col-6">
          <label class="form-label">Lat (interv_lat[])</label>
          <input class="form-control" name="interv_lat[]" inputmode="decimal" />
        </div>
        <div class="col-6">
          <label class="form-label">Lng (interv_lng[])</label>
          <input class="form-control" name="interv_lng[]" inputmode="decimal" />
        </div>

        <div class="col-12">
          <label class="form-label">Pris à (interv_taken_at[])</label>
          <input class="form-control" type="datetime-local" name="interv_taken_at[]" />
        </div>

        <div class="col-12"><hr class="my-2" /></div>

        <div class="col-12 d-flex gap-2">
          <button class="btn btn-outline-secondary" id="btnSaveDraft" type="button">Sauvegarder brouillon (offline)</button>
          <button class="btn btn-primary" id="btnSyncDraft" type="button">Sync (draft)</button>
          <button class="btn btn-success" id="btnSubmit" type="button">Soumettre</button>
        </div>
      </div>
    </form>
  `;

  const meta = root.querySelector('#meta');
  const draftInfo = root.querySelector('#draftInfo');
  const okBox = root.querySelector('#okBox');
  const errBox = root.querySelector('#errBox');
  const form = root.querySelector('#treatForm');

  function showOk(msg) {
    okBox.textContent = msg;
    okBox.style.display = 'block';
    errBox.style.display = 'none';
  }

  function showErr(msg) {
    errBox.textContent = msg;
    errBox.style.display = 'block';
    okBox.style.display = 'none';
  }

  function fillFromObject(obj) {
    if (!obj) return;
    const entries = Object.entries(obj);
    for (const [k, v] of entries) {
      const el = form.querySelector(`[name="${cssEscape(k)}"]`);
      if (!el) continue;
      if (el.type === 'checkbox') {
        el.checked = Boolean(v);
      } else if (el.type === 'select-one') {
        el.value = String(v ?? '');
      } else {
        el.value = String(v ?? '');
      }
    }
  }

  const d = loadDraft(incidentId);
  if (d?.payload) {
    draftInfo.style.display = 'block';
    draftInfo.textContent = `Brouillon local détecté (sauvé le ${d.savedAt}).`;
    fillFromObject(d.payload);
  }

  try {
    const res = await apiGet(`/api/mobile/treatment?id=${incidentId}`);
    if (res?.ok && res.incident) {
      const ticket = res.incident.ticket_id || `INC-${incidentId}`;
      meta.textContent = `${ticket} — ${res.incident.title || ''}`.trim();
      if (res.report) {
        fillFromObject({
          team_name: res.report.team_name,
          team_contact: res.report.team_contact,
          type_of_incident: res.report.type_of_incident,
          detection_mode: res.report.detection_mode,
          cut_distance_km: res.report.cut_distance_km,
          gps_lat: res.report.gps_lat,
          gps_lng: res.report.gps_lng,
          fault_nature: res.report.fault_nature,
          takeover_at: toLocal(res.report.takeover_at),
          intervention_start: toLocal(res.report.intervention_start),
          intervention_end: toLocal(res.report.intervention_end),
          repair_type: res.report.repair_type,
          work_comments: res.report.work_comments,
          otdr_result: res.report.otdr_result,
          resolution_status: res.report.resolution_status,
          need_additional: res.report.need_additional
        });
      }
    }
  } catch {
    meta.textContent = `INC-${incidentId}`;
  }

  function captureDraftPayload() {
    const payload = {};
    const fd = new FormData(form);
    for (const [k, v] of fd.entries()) {
      if (v instanceof File) continue;
      payload[k] = v;
    }
    return payload;
  }

  root.querySelector('#btnSaveDraft').addEventListener('click', () => {
    const payload = captureDraftPayload();
    saveDraft(incidentId, payload);
    showOk('Brouillon sauvegardé localement.');
  });

  async function sync(action) {
    okBox.style.display = 'none';
    errBox.style.display = 'none';

    const fd = new FormData(form);
    fd.set('action_type', action);

    if (!navigator.onLine) {
      const payload = captureDraftPayload();
      saveDraft(incidentId, payload);
      showOk('Hors-ligne: brouillon sauvegardé localement.');
      return;
    }

    try {
      const res = await apiPostForm('/api/mobile/treatment/save', fd);
      if (res?.ok) {
        if (action === 'submit') {
          clearDraft(incidentId);
          showOk('Traitement soumis.');
        } else {
          saveDraft(incidentId, captureDraftPayload());
          showOk('Traitement sauvegardé (draft).');
        }
        return;
      }
      showErr('Erreur lors de la sauvegarde.');
    } catch (e) {
      showErr('Erreur réseau ou serveur.');
    }
  }

  root.querySelector('#btnSyncDraft').addEventListener('click', () => sync('draft'));
  root.querySelector('#btnSubmit').addEventListener('click', () => sync('submit'));
}

function toLocal(sqlDateTime) {
  if (!sqlDateTime) return '';
  const s = String(sqlDateTime).replace(' ', 'T');
  return s.slice(0, 16);
}

function cssEscape(s) {
  return String(s).replaceAll('"', '\\"');
}