// ─────────────────────────────────────────────────────
// GUT-69 (F4.1) — MedicionesPanel: medición única por expediente.
// Una sola medición por pedido (upsert vía PUT). Card compacta con
// operario (catálogo /api/operarios), estado, fecha de medición y
// observación; debajo, croquis y planos reutilizando el sistema
// documental (GUT-68) → ArchivosPanel categoria='MEDICIONES'.
//
// Lo consume el drawer de expediente (GUT-63) vía window.MedicionesPanel.
// expedienteId = pedidos.id.
// API REST bajo /api/expedientes/:pedidoId/medicion (GUT-69).
// ─────────────────────────────────────────────────────

const MEDICION_ESTADOS = [
  { value: 'pendiente_medicion', label: 'Pendiente de medición', cls: 'warn' },
  { value: 'medido',            label: 'Medido',                cls: 'info' },
  { value: 'dibujado',          label: 'Dibujado',              cls: 'info' },
  { value: 'validado',          label: 'Validado',              cls: 'ok'   },
];

function fmtFechaMedicion(val) {
  if (!val) return '';
  const s = String(val).slice(0, 10);
  if (s.includes('/')) return s; // ya viene DD/MM/YYYY del backend
  const [y, m, d] = s.split('-');
  return (y && m && d) ? `${d}/${m}/${y}` : s;
}

// DD/MM/YYYY → YYYY-MM-DD para el <input type="date">.
function toInputDate(val) {
  if (!val) return '';
  const s = String(val).slice(0, 10);
  if (s.includes('-')) return s;
  const [d, m, y] = s.split('/');
  return (y && m && d) ? `${y}-${m}-${d}` : '';
}

const MedicionesPanel = ({ expedienteId, onToast }) => {
  const [medicion, setMedicion] = React.useState(null);
  const [operarios, setOperarios] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [busy, setBusy] = React.useState(false);
  const [form, setForm] = React.useState({
    operario_id: '', estado: 'pendiente_medicion', fecha_medicion: '', observacion: '',
  });

  const set = (k, val) => setForm(f => ({ ...f, [k]: val }));

  const load = React.useCallback(() => {
    if (!expedienteId) return;
    setLoading(true);
    API.get(`/api/expedientes/${expedienteId}/medicion`)
      .then(m => {
        setMedicion(m);
        setForm({
          operario_id: m && m.operario_id != null ? String(m.operario_id) : '',
          estado: (m && m.estado) || 'pendiente_medicion',
          fecha_medicion: m ? toInputDate(m.fecha_medicion) : '',
          observacion: (m && m.observacion) || '',
        });
      })
      .catch(e => { setMedicion(null); onToast && onToast(e.message || 'Error al cargar medición', true); })
      .finally(() => setLoading(false));
  }, [expedienteId]);

  React.useEffect(() => { load(); }, [load]);

  React.useEffect(() => {
    API.get('/api/operarios')
      .then(rows => setOperarios(Array.isArray(rows) ? rows : (rows && rows.data) || []))
      .catch(() => setOperarios([]));
  }, []);

  const guardar = async () => {
    setBusy(true);
    try {
      await API.put(`/api/expedientes/${expedienteId}/medicion`, {
        operario_id: form.operario_id === '' ? null : form.operario_id,
        estado: form.estado,
        fecha_medicion: form.fecha_medicion || null,
        observacion: form.observacion || null,
      });
      onToast && onToast('Medición guardada ✓');
      load();
    } catch (e) {
      onToast && onToast(e.message || 'Error al guardar medición', true);
    } finally {
      setBusy(false);
    }
  };

  if (!expedienteId) return <p className="muted" style={{fontSize:12}}>Expediente no disponible.</p>;
  if (loading) return <p className="muted" style={{fontSize:12}}>Cargando…</p>;

  const pill = MEDICION_ESTADOS.find(e => e.value === form.estado) || { cls: 'info', label: form.estado };

  return (
    <div>
      {/* Card de medición */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:12,marginBottom:12,flexWrap:'wrap'}}>
        <div className="section-title" style={{margin:0}}>Medición</div>
        <span className={`pill ${pill.cls}`}><span className="d"/>{pill.label}</span>
      </div>

      <div style={{padding:12,marginBottom:18,border:'1px solid var(--line)',borderRadius:8}}>
        <div className="fields-grid" style={{alignItems:'end'}}>
          <div className="field">
            <label>Operario / instalador</label>
            <select value={form.operario_id} onChange={e=>set('operario_id', e.target.value)}>
              <option value="">— Sin asignar —</option>
              {operarios.map(o => <option key={o.id} value={o.id}>{o.nombre}</option>)}
            </select>
          </div>
          <div className="field">
            <label>Estado</label>
            <select value={form.estado} onChange={e=>set('estado', e.target.value)}>
              {MEDICION_ESTADOS.map(e => <option key={e.value} value={e.value}>{e.label}</option>)}
            </select>
          </div>
          <div className="field">
            <label>Fecha de medición</label>
            <input type="date" value={form.fecha_medicion} onChange={e=>set('fecha_medicion', e.target.value)}/>
          </div>
          <div className="field" style={{gridColumn:'1 / -1'}}>
            <label>Observación</label>
            <textarea
              value={form.observacion}
              onChange={e=>set('observacion', e.target.value)}
              rows={2}
              placeholder="Notas de la medición…"
              style={{resize:'vertical',background:'var(--surface)',border:'1px solid var(--line)',borderRadius:'var(--r-md, 6px)',padding:'6px 10px',color:'var(--ink)',fontSize:12.5,fontFamily:'inherit'}}
            />
          </div>
          <div className="field" style={{display:'flex',gap:6}}>
            <button className="btn primary sm" onClick={guardar} disabled={busy}>{busy ? 'Guardando…' : 'Guardar'}</button>
          </div>
        </div>
        {medicion && medicion.fecha_medicion && (
          <div className="muted" style={{fontSize:11.5,marginTop:8}}>
            Última medición registrada: {fmtFechaMedicion(medicion.fecha_medicion)}
            {medicion.operario_nombre ? ` · ${medicion.operario_nombre}` : ''}
          </div>
        )}
      </div>

      {/* Validación de medidas — plantilla digital + comparativa (GUT-70) */}
      <div className="section-title">Validación de medidas</div>
      {window.ValidacionPanel && <window.ValidacionPanel expedienteId={expedienteId} onToast={onToast}/>}

      {/* Croquis y planos — reutiliza el sistema documental (GUT-68) */}
      <div className="section-title">Croquis y planos</div>
      <ArchivosPanel
        entityType="expedientes"
        entityId={expedienteId}
        categoria="MEDICIONES"
        title="Croquis y planos"
        onToast={onToast}
      />
    </div>
  );
};

window.MedicionesPanel = MedicionesPanel;