// ─────────────────────────────────────────────────────
// TAREAS (de trabajo) — admin view.
// Backend: /api/tareas-trabajo (CRUD, role-based, GUT-18).
// Gate: rol === 'admin' enforced in app.jsx (can.tareas).
// Features: list with filters (estado, operario, pedido),
//           create/edit modal, detail drawer with timeline.
// ─────────────────────────────────────────────────────

const TT_ESTADOS = [
  { key: 'pendiente',   label: 'Pendiente',   cls: 'warn' },
  { key: 'en_progreso', label: 'En progreso', cls: 'info' },
  { key: 'completada',  label: 'Completada',  cls: 'ok'   },
  { key: 'cancelada',   label: 'Cancelada',   cls: ''     },
];
const TT_ESTADO_MAP = TT_ESTADOS.reduce((m, e) => (m[e.key] = e, m), {});

const ttFmtDateTime = (s) => {
  if (!s) return '—';
  try {
    const d = new Date(s);
    if (isNaN(d.getTime())) return s;
    return d.toLocaleString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
  } catch { return s; }
};

// ─────────────────────────────────────────────────────
// Create / Edit modal
// ─────────────────────────────────────────────────────
const TareaForm = ({ tarea, usuarios, pedidos, onClose, onSaved, onToast }) => {
  const isEdit = !!tarea;
  const [form, setForm] = React.useState({
    titulo:      tarea?.titulo      || '',
    descripcion: tarea?.descripcion || '',
    estado:      tarea?.estado      || 'pendiente',
    operario_id: tarea?.operario_id || '',
    pedido_id:   tarea?.pedido_id   || '',
    producto_proceso_id: tarea?.producto_proceso_id || '',
    material_id:         tarea?.material_id         || '',
  });
  const [saving, setSaving] = React.useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.titulo.trim()) return onToast && onToast('Título requerido', true);
    setSaving(true);
    const toInt = (v) => v === '' || v == null ? null : parseInt(v, 10);
    const payload = {
      titulo:      form.titulo.trim(),
      descripcion: form.descripcion.trim() || null,
      estado:      form.estado,
      operario_id: toInt(form.operario_id),
      pedido_id:   toInt(form.pedido_id),
      producto_proceso_id: toInt(form.producto_proceso_id),
      material_id:         toInt(form.material_id),
    };
    try {
      isEdit
        ? await API.patch(`/api/tareas-trabajo/${tarea.id}`, payload)
        : await API.post(`/api/tareas-trabajo`, payload);
      onToast && onToast(isEdit ? 'Tarea actualizada ✓' : 'Tarea creada ✓');
      onSaved && onSaved();
      onClose();
    } catch (err) {
      onToast && onToast(err.message || 'Error al guardar', true);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="modal-bg open"
      style={{position:'fixed',inset:0,background:'rgba(0,0,0,.35)',zIndex:200,display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'40px 20px',overflow:'auto'}}
      onClick={(e)=>{ if (e.target.classList.contains('modal-bg')) onClose(); }}>
      <form onSubmit={submit}
        style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:8,width:'min(560px,100%)',boxShadow:'0 20px 60px rgba(0,0,0,.18)'}}
        onClick={e=>e.stopPropagation()}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'14px 18px',borderBottom:'1px solid var(--line)'}}>
          <h3 style={{margin:0,fontSize:15}}>{isEdit ? 'Editar tarea' : 'Nueva tarea'}</h3>
          <button type="button" className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div style={{padding:'16px 18px',display:'flex',flexDirection:'column',gap:12}}>
          <div className="field">
            <label>Título *</label>
            <input value={form.titulo} onChange={e=>set('titulo', e.target.value)} autoFocus required/>
          </div>
          <div className="field">
            <label>Descripción</label>
            <textarea rows={3} value={form.descripcion} onChange={e=>set('descripcion', e.target.value)}/>
          </div>
          <div className="fields-grid">
            <div className="field">
              <label>Estado</label>
              <select value={form.estado} onChange={e=>set('estado', e.target.value)}>
                {TT_ESTADOS.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Asignar a</label>
              <select value={form.operario_id} onChange={e=>set('operario_id', e.target.value)}>
                <option value="">Sin asignar</option>
                {usuarios.map(u => <option key={u.id} value={u.id}>{u.username}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Pedido</label>
              <select value={form.pedido_id} onChange={e=>set('pedido_id', e.target.value)}>
                <option value="">—</option>
                {pedidos.map(p => (
                  <option key={p.id} value={p.id}>
                    {p.numero ? `#${p.numero}` : `#${p.id}`}{p.nombre_cliente ? ` · ${p.nombre_cliente}` : ''}
                  </option>
                ))}
              </select>
            </div>
            <div className="field">
              <label>Producto proceso (id)</label>
              <input type="number" value={form.producto_proceso_id} onChange={e=>set('producto_proceso_id', e.target.value)}/>
            </div>
            <div className="field">
              <label>Material (id)</label>
              <input type="number" value={form.material_id} onChange={e=>set('material_id', e.target.value)}/>
            </div>
          </div>
        </div>
        <div style={{display:'flex',justifyContent:'flex-end',padding:'12px 18px',borderTop:'1px solid var(--line)',gap:8}}>
          <button type="button" className="btn ghost" onClick={onClose}>Cancelar</button>
          <button type="submit" className="btn primary" disabled={saving}>
            {saving ? 'Guardando…' : (isEdit ? 'Guardar' : 'Crear')}
          </button>
        </div>
      </form>
    </div>
  );
};

// ─────────────────────────────────────────────────────
// Detail drawer (right side panel) with timeline.
// Timeline uses timestamps stored by the backend
// (no history table → minimal reasonable choice).
// ─────────────────────────────────────────────────────
const TareaDrawer = ({ tarea, usuarios, pedidos, onClose, onEdit, onChanged, onToast }) => {
  const [detail, setDetail] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => {
    if (!tarea) { setDetail(null); return; }
    let alive = true;
    API.get(`/api/tareas-trabajo/${tarea.id}`).then(r => {
      if (alive) setDetail(r);
    }).catch(()=>{ if (alive) setDetail(tarea); });
    return () => { alive = false; };
  }, [tarea && tarea.id]);

  if (!tarea) return null;
  const t = detail || tarea;
  const e = TT_ESTADO_MAP[t.estado] || { label: t.estado || '—', cls: '' };
  const operario = usuarios.find(u => u.id === t.operario_id);
  const pedido = pedidos.find(p => p.id === t.pedido_id);

  const onChangeEstado = async (estado) => {
    setBusy(true);
    try {
      const updated = await API.patch(`/api/tareas-trabajo/${t.id}`, { estado });
      setDetail(updated);
      onChanged && onChanged();
      onToast && onToast('Estado actualizado ✓');
    } catch (err) {
      onToast && onToast(err.message || 'Error al actualizar', true);
    } finally {
      setBusy(false);
    }
  };

  const onDelete = async () => {
    if (!confirm('¿Eliminar esta tarea?')) return;
    try {
      await API.del(`/api/tareas-trabajo/${t.id}`);
      onToast && onToast('Tarea eliminada');
      onChanged && onChanged();
      onClose();
    } catch (err) {
      onToast && onToast(err.message || 'Error al eliminar', true);
    }
  };

  // Build timeline from timestamps already stored on the row.
  // Note: backend (GUT-18) does not maintain a state-change history table,
  // so the timeline shows the lifecycle markers we do have.
  const timeline = [];
  if (t.fecha_creacion) timeline.push({ ts: t.fecha_creacion, label: 'Tarea creada', cls: '' });
  if (t.fecha_inicio)   timeline.push({ ts: t.fecha_inicio,   label: 'Inicio',        cls: 'info' });
  if (t.fecha_fin)      timeline.push({ ts: t.fecha_fin,      label: 'Fin',           cls: 'ok' });
  if (t.updated_at && t.updated_at !== t.created_at) {
    timeline.push({ ts: t.updated_at, label: `Última actualización (estado: ${e.label})`, cls: e.cls });
  }
  timeline.sort((a, b) => new Date(a.ts) - new Date(b.ts));

  return (
    <>
      <div className="drawer-bg open" onClick={onClose}/>
      <aside className="drawer open">
        <div className="dr-head">
          <span className="id">#{t.id}</span>
          <h2 style={{flex:1,minWidth:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{t.titulo}</h2>
          <span className={`pill ${e.cls}`}><span className="d"/>{e.label}</span>
          <div className="actions">
            <button className="icon-btn" onClick={onEdit} title="Editar"><Icon name="edit"/></button>
            <button className="icon-btn" onClick={onDelete} title="Eliminar"><Icon name="trash"/></button>
            <button className="icon-btn" onClick={onClose} title="Cerrar"><Icon name="x"/></button>
          </div>
        </div>
        <div className="dr-body">
          <div className="section-title">Detalles</div>
          <div className="fields-grid">
            <div className="field">
              <label>Estado</label>
              <select value={t.estado} disabled={busy}
                onChange={e=>onChangeEstado(e.target.value)}>
                {TT_ESTADOS.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Operario</label>
              <div className="v">{operario ? operario.username : (t.operario_id ? `#${t.operario_id}` : '—')}</div>
            </div>
            <div className="field">
              <label>Pedido</label>
              <div className="v">{pedido ? (pedido.numero ? `#${pedido.numero}` : `#${pedido.id}`) : (t.pedido_id ? `#${t.pedido_id}` : '—')}</div>
            </div>
            <div className="field">
              <label>Producto proceso</label>
              <div className="v">{t.producto_proceso_id || '—'}</div>
            </div>
            <div className="field">
              <label>Material</label>
              <div className="v">{t.material_id || '—'}</div>
            </div>
            <div className="field full">
              <label>Descripción</label>
              <div className="v" style={{whiteSpace:'pre-wrap',minHeight:60,alignItems:'flex-start',paddingTop:8}}>
                {t.descripcion || '—'}
              </div>
            </div>
          </div>

          <div className="section-title">Timeline</div>
          <div style={{display:'flex',flexDirection:'column',gap:10,paddingLeft:8,borderLeft:'2px solid var(--line)',marginLeft:6}}>
            {timeline.length === 0 && (
              <div style={{color:'var(--ink-3)',fontSize:12.5,padding:'6px 10px'}}>Sin eventos registrados.</div>
            )}
            {timeline.map((ev, i) => (
              <div key={i} style={{display:'flex',alignItems:'center',gap:10,paddingLeft:6}}>
                <span className="d" style={{display:'inline-block',width:8,height:8,borderRadius:'50%',background:'var(--accent)',marginLeft:-14,flexShrink:0}}/>
                <div style={{display:'flex',flexDirection:'column',gap:2}}>
                  <span style={{fontSize:12.5,fontWeight:500}}>{ev.label}</span>
                  <span style={{fontSize:11.5,color:'var(--ink-3)'}}>{ttFmtDateTime(ev.ts)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </aside>
    </>
  );
};

// ─────────────────────────────────────────────────────
// Main list view
// ─────────────────────────────────────────────────────
const TareasView = ({ onToast }) => {
  const [rows, setRows]         = React.useState([]);
  const [usuarios, setUsuarios] = React.useState([]);
  const [pedidos, setPedidos]   = React.useState([]);
  const [loading, setLoading]   = React.useState(true);
  const [refreshKey, setRefresh] = React.useState(0);

  const [search, setSearch] = React.useState('');
  const [estadoFilter, setEstadoFilter]   = React.useState('todos');
  const [operarioFilter, setOperarioFilter] = React.useState('');
  const [pedidoFilter, setPedidoFilter]   = React.useState('');

  const [formOpen, setFormOpen] = React.useState(false);
  const [editTarea, setEditTarea] = React.useState(null);
  const [openTarea, setOpenTarea] = React.useState(null);

  // Load lookups once (admin endpoints)
  React.useEffect(() => {
    API.get('/api/usuarios').then(setUsuarios).catch(()=>setUsuarios([]));
    API.get('/api/compras').then(rows => setPedidos(Array.isArray(rows) ? rows : []))
      .catch(()=>setPedidos([]));
  }, []);

  // Load tareas
  React.useEffect(() => {
    let alive = true;
    setLoading(true);
    API.get('/api/tareas-trabajo').then(data => {
      if (!alive) return;
      setRows(Array.isArray(data) ? data : []);
      setLoading(false);
    }).catch(err => {
      if (!alive) return;
      setLoading(false);
      onToast && onToast(err.message || 'Error al cargar tareas', true);
    });
    return () => { alive = false; };
  }, [refreshKey]);

  const refresh = () => setRefresh(k => k + 1);

  // Client-side filter
  const q = search.trim().toLowerCase();
  const filtered = rows.filter(r => {
    if (estadoFilter !== 'todos' && r.estado !== estadoFilter) return false;
    if (operarioFilter) {
      if (operarioFilter === 'null') { if (r.operario_id != null) return false; }
      else if (String(r.operario_id || '') !== operarioFilter) return false;
    }
    if (pedidoFilter   && String(r.pedido_id   || '') !== pedidoFilter)   return false;
    if (q) {
      const blob = `${r.titulo || ''} ${r.descripcion || ''}`.toLowerCase();
      if (!blob.includes(q)) return false;
    }
    return true;
  });

  const counts = TT_ESTADOS.reduce((m, e) => {
    m[e.key] = rows.filter(r => r.estado === e.key).length;
    return m;
  }, {});

  const userById = (id) => usuarios.find(u => u.id === id);
  const pedidoById = (id) => pedidos.find(p => p.id === id);

  return (
    <>
      <div className="page-h">
        <div>
          <h1>Tareas de trabajo</h1>
          <div className="sub">Gestión y asignación de tareas a operarios · {filtered.length} de {rows.length}</div>
        </div>
        <div className="page-h-actions">
          <button className="btn primary" onClick={()=>{ setEditTarea(null); setFormOpen(true); }}>
            <Icon name="plus"/> Nueva tarea
          </button>
        </div>
      </div>

      {/* KPIs por estado */}
      <div className="kpi-grid">
        <div className="kpi">
          <div className="lbl">Total</div>
          <div className="row"><div className="num">{rows.length}</div></div>
        </div>
        {TT_ESTADOS.map(e => (
          <div key={e.key} className="kpi">
            <div className="lbl">
              <span className="dot" style={{
                background: e.cls === 'ok' ? 'var(--ok)'
                         : e.cls === 'info' ? 'var(--info)'
                         : e.cls === 'warn' ? 'var(--warn)'
                         : 'var(--ink-3)'
              }}/> {e.label}
            </div>
            <div className="row"><div className="num">{counts[e.key]}</div></div>
          </div>
        ))}
      </div>

      {/* Toolbar */}
      <div className="toolbar">
        <div className="tb-search">
          <Icon name="search"/>
          <input placeholder="Buscar por título o descripción…" value={search} onChange={e=>setSearch(e.target.value)}/>
        </div>
        <div className="tb-divider"/>
        <select value={operarioFilter} onChange={e=>setOperarioFilter(e.target.value)}
          style={{padding:'4px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12}}>
          <option value="">Operario: todos</option>
          <option value="null">Sin asignar</option>
          {usuarios.map(u => <option key={u.id} value={u.id}>{u.username}</option>)}
        </select>
        <select value={pedidoFilter} onChange={e=>setPedidoFilter(e.target.value)}
          style={{padding:'4px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12}}>
          <option value="">Pedido: todos</option>
          {pedidos.map(p => (
            <option key={p.id} value={p.id}>
              {p.numero ? `#${p.numero}` : `#${p.id}`}{p.nombre_cliente ? ` · ${p.nombre_cliente}` : ''}
            </option>
          ))}
        </select>
        <div className="tb-spacer"/>
        <div className="seg">
          <button className={estadoFilter==='todos'?'on':''} onClick={()=>setEstadoFilter('todos')}>Todos</button>
          {TT_ESTADOS.map(e => (
            <button key={e.key} className={estadoFilter===e.key?'on':''} onClick={()=>setEstadoFilter(e.key)}>{e.label}</button>
          ))}
        </div>
      </div>

      {/* Table */}
      <div className="tbl-wrap">
        <div className="tbl-scroll">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{width:60}}>ID</th>
                <th>Título</th>
                <th>Estado</th>
                <th>Operario</th>
                <th>Pedido</th>
                <th>Creada</th>
                <th>Actualizada</th>
                <th style={{width:32}}/>
              </tr>
            </thead>
            <tbody>
              {loading && <tr><td colSpan={8} style={{textAlign:'center',padding:30,color:'var(--ink-3)'}}>Cargando…</td></tr>}
              {!loading && filtered.length === 0 && (
                <tr><td colSpan={8} style={{textAlign:'center',padding:30,color:'var(--ink-3)'}}>Sin resultados</td></tr>
              )}
              {!loading && filtered.map(r => {
                const e = TT_ESTADO_MAP[r.estado] || { label: r.estado || '—', cls: '' };
                const u = userById(r.operario_id);
                const p = pedidoById(r.pedido_id);
                return (
                  <tr key={r.id} onClick={()=>setOpenTarea(r)} style={{cursor:'pointer'}}>
                    <td className="num muted">#{r.id}</td>
                    <td className="strong truncate">{r.titulo}</td>
                    <td><span className={`pill ${e.cls}`}><span className="d"/>{e.label}</span></td>
                    <td>{u ? u.username : (r.operario_id ? `#${r.operario_id}` : <span className="muted">—</span>)}</td>
                    <td>{p ? (p.numero ? `#${p.numero}` : `#${p.id}`) : (r.pedido_id ? `#${r.pedido_id}` : <span className="muted">—</span>)}</td>
                    <td className="num muted">{ttFmtDateTime(r.fecha_creacion)}</td>
                    <td className="num muted">{ttFmtDateTime(r.updated_at)}</td>
                    <td onClick={ev=>ev.stopPropagation()}>
                      <button className="icon-btn" onClick={()=>{ setEditTarea(r); setFormOpen(true); }}>
                        <Icon name="edit" size={13}/>
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {formOpen && (
        <TareaForm
          tarea={editTarea}
          usuarios={usuarios}
          pedidos={pedidos}
          onClose={()=>{ setFormOpen(false); setEditTarea(null); }}
          onSaved={refresh}
          onToast={onToast}
        />
      )}

      {openTarea && (
        <TareaDrawer
          tarea={openTarea}
          usuarios={usuarios}
          pedidos={pedidos}
          onClose={()=>setOpenTarea(null)}
          onEdit={()=>{ setEditTarea(openTarea); setOpenTarea(null); setFormOpen(true); }}
          onChanged={refresh}
          onToast={onToast}
        />
      )}
    </>
  );
};

window.TareasView = TareasView;