// ── ARTESANOS — Gestión de artesanos y trabajos ──────

function Artesanos() {
  const { useState } = React;

  const [artesanos, setArtesanos] = useState(() => lsGet('artesanos', [
    { id:'A001', nombre:'Don Pedro', especialidad:'Platería fina', telefono:'', email:'', comision:15, activo:true, notas:'Maestro artesano, 20+ años experiencia' },
    { id:'A002', nombre:'Valentina T.', especialidad:'Filigrana y diseño', telefono:'', email:'', comision:18, activo:true, notas:'Especialista en piezas artesanales' },
    { id:'A003', nombre:'Juan C.', especialidad:'Grabado láser y 3D', telefono:'', email:'', comision:12, activo:true, notas:'Manejo de equipos láser y CAD' },
  ]));
  const [selId, setSel]       = useState('A001');
  const [modal, setModal]     = useState(false);
  const [editId, setEditId]   = useState(null);
  const [nuevo, setNuevo]     = useState({ nombre:'', especialidad:'', telefono:'', email:'', comision:15, activo:true, notas:'' });

  function guardarArtesano() {
    if (editId) {
      const upd = artesanos.map(a => a.id===editId ? { ...a, ...nuevo } : a);
      setArtesanos(upd); lsSet('artesanos', upd);
    } else {
      const id = 'A' + String(artesanos.length+1).padStart(3,'0');
      const upd = [...artesanos, { ...nuevo, id }];
      setArtesanos(upd); lsSet('artesanos', upd);
    }
    setModal(false); setEditId(null);
    setNuevo({ nombre:'', especialidad:'', telefono:'', email:'', comision:15, activo:true, notas:'' });
  }

  const sel = artesanos.find(a => a.id === selId);

  // Obtener trabajos asignados a este artesano desde todos los módulos
  function trabajosDeArtesano(nombre) {
    const ots      = lsGet('ordenes', []).filter(o => o.artesano === nombre || o.tecnico === nombre);
    const hechuras = lsGet('hechuras_data', []).filter(h => h.artesano === nombre || h.tecnico === nombre);
    const grabados = lsGet('grabados', []).filter(g => g.artesano === nombre || g.tecnico === nombre);
    return [...ots.map(o => ({ ...o, modulo:'OT' })), ...hechuras.map(h => ({ ...h, modulo:'Hechura' })), ...grabados.map(g => ({ ...g, modulo:'Grabado' }))];
  }

  const trabajos = sel ? trabajosDeArtesano(sel.nombre) : [];
  const totalComision = trabajos.reduce((s, t) => s + Math.round((t.valorPresupuesto||t.presupuesto||0) * (sel?.comision||0) / 100), 0);

  function set(k, v) { setNuevo(n => ({ ...n, [k]: v })); }

  return (
    <div style={{ display:'flex', height:'100%', overflow:'hidden' }}>

      {/* Lista artesanos */}
      <div style={{ width:'260px', flexShrink:0, display:'flex', flexDirection:'column', borderRight:'1px solid var(--border)', overflow:'hidden' }}>
        <div style={{ padding:'10px 12px', borderBottom:'1px solid var(--border)' }}>
          <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'16px', fontWeight:600, color:'var(--cream)', marginBottom:'8px' }}>Artesanos</div>
          <button onClick={() => { setModal(true); setEditId(null); setNuevo({ nombre:'', especialidad:'', telefono:'', email:'', comision:15, activo:true, notas:'' }); }}
            style={{ ...invStyles.btnAdd, width:'100%' }}>+ Nuevo Artesano</button>
        </div>
        <div style={{ flex:1, overflowY:'auto', padding:'6px' }}>
          {artesanos.map(a => (
            <div key={a.id} onClick={() => setSel(a.id)}
              style={{ padding:'10px', background: selId===a.id?'rgba(201,168,76,0.07)':'var(--surface)', border:`1px solid ${selId===a.id?'var(--gold)':'var(--border)'}`, borderRadius:'8px', marginBottom:'5px', cursor:'pointer' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div>
                  <div style={{ color:'var(--cream)', fontWeight:600, fontSize:'13px' }}>{a.nombre}</div>
                  <div style={{ color:'var(--cream-3)', fontSize:'10px' }}>{a.especialidad}</div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ color:'var(--gold)', fontSize:'12px', fontWeight:600 }}>{a.comision}%</div>
                  <div style={{ fontSize:'8px', color: a.activo?'#27ae60':'var(--cream-3)' }}>{a.activo?'Activo':'Inactivo'}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Detalle */}
      <div style={{ flex:1, overflowY:'auto', padding:'20px' }}>
        {sel && (
          <div className="fade-in">
            {/* Header */}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:'20px' }}>
              <div>
                <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'26px', fontWeight:600, color:'var(--cream)' }}>{sel.nombre}</div>
                <div style={{ color:'var(--cream-3)', fontSize:'12px' }}>{sel.especialidad} · {sel.id}</div>
              </div>
              <button onClick={() => { setEditId(sel.id); setNuevo({...sel}); setModal(true); }}
                style={{ ...invStyles.btnEdit }}>✏ Editar</button>
            </div>

            {/* Stats */}
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'8px', marginBottom:'20px' }}>
              {[
                { l:'Trabajos',       v: trabajos.length },
                { l:'Activos',        v: trabajos.filter(t=>t.estado!=='Entregado'&&t.estado!=='Cancelado').length },
                { l:'Comisión %',     v: sel.comision+'%' },
                { l:'Comisión total', v: clp(totalComision) },
              ].map(s => (
                <div key={s.l} style={{ background:'var(--bg-card)', border:'1px solid var(--border)', borderRadius:'10px', padding:'14px', textAlign:'center' }}>
                  <div style={{ color:'var(--gold)', fontWeight:700, fontSize:'18px' }}>{s.v}</div>
                  <div style={{ color:'var(--cream-3)', fontSize:'10px', marginTop:'2px' }}>{s.l}</div>
                </div>
              ))}
            </div>

            {/* Info */}
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px', marginBottom:'16px' }}>
              {[
                { l:'Teléfono',  v:sel.telefono||'No registrado' },
                { l:'Email',     v:sel.email||'No registrado' },
                { l:'Comisión',  v:sel.comision+'% sobre presupuesto' },
                { l:'Estado',    v:sel.activo?'Activo':'Inactivo' },
              ].map(f => (
                <div key={f.l} style={{ background:'var(--bg-card)', border:'1px solid var(--border)', borderRadius:'8px', padding:'10px' }}>
                  <div style={{ fontSize:'9px', color:'var(--cream-3)', marginBottom:'2px' }}>{f.l}</div>
                  <div style={{ color:'var(--cream)', fontSize:'12px' }}>{f.v}</div>
                </div>
              ))}
            </div>

            {sel.notas && (
              <div style={{ background:'var(--surface)', borderRadius:'8px', padding:'12px', marginBottom:'16px', borderLeft:'2px solid var(--gold)' }}>
                <div style={{ fontSize:'9px', color:'var(--cream-3)', marginBottom:'4px' }}>NOTAS</div>
                <div style={{ color:'var(--cream-2)', fontSize:'12px', lineHeight:'1.6' }}>{sel.notas}</div>
              </div>
            )}

            {/* Trabajos */}
            <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'16px', fontWeight:600, color:'var(--cream)', marginBottom:'10px' }}>
              Historial de Trabajos
            </div>
            {trabajos.length === 0 ? (
              <div style={{ color:'var(--cream-3)', fontSize:'12px', padding:'16px', textAlign:'center', background:'var(--surface)', borderRadius:'8px' }}>
                Sin trabajos registrados para este artesano.<br/>
                <span style={{ fontSize:'10px' }}>Los trabajos de OT, Hechuras y Grabado aparecerán aquí cuando se asigne a este artesano.</span>
              </div>
            ) : (
              trabajos.map(t => (
                <div key={t.id} style={{ background:'var(--bg-card)', border:'1px solid var(--border)', borderRadius:'8px', padding:'10px', marginBottom:'6px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <div>
                    <div style={{ color:'var(--cream)', fontSize:'12px', fontWeight:500 }}>{t.clienteNombre||t.cliente} · {t.tipo||t.modulo}</div>
                    <div style={{ color:'var(--cream-3)', fontSize:'10px' }}>{t.id} · {t.fechaIngreso||t.fecha}</div>
                  </div>
                  <div style={{ textAlign:'right' }}>
                    <div style={{ color:'var(--gold)', fontWeight:700, fontSize:'12px' }}>{clp(t.valorPresupuesto||t.presupuesto||0)}</div>
                    <div style={{ color:'#27ae60', fontSize:'10px' }}>Comisión: {clp(Math.round((t.valorPresupuesto||t.presupuesto||0)*sel.comision/100))}</div>
                  </div>
                </div>
              ))
            )}
          </div>
        )}
      </div>

      {/* Modal */}
      {modal && (
        <div style={posStyles.overlay} onClick={e => e.target===e.currentTarget && setModal(false)}>
          <div style={{ ...posStyles.modalBox, maxWidth:'420px' }}>
            <div style={{ ...posStyles.modalHeader, marginBottom:'14px' }}>
              <span style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'20px', fontWeight:600 }}>
                {editId ? 'Editar Artesano' : 'Nuevo Artesano'}
              </span>
              <button onClick={() => setModal(false)} style={posStyles.clearBtn}>✕</button>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px' }}>
              {[
                { l:'Nombre *',      k:'nombre',       t:'text',   ph:'Nombre completo' },
                { l:'Especialidad',  k:'especialidad', t:'text',   ph:'Platería, grabado…' },
                { l:'Teléfono',      k:'telefono',     t:'text',   ph:'+56 9 xxxx xxxx' },
                { l:'Email',         k:'email',        t:'text',   ph:'artesano@mail.com' },
              ].map(f => (
                <div key={f.k}>
                  <div style={{ fontSize:'10px', color:'var(--cream-3)', marginBottom:'3px' }}>{f.l}</div>
                  <input type={f.t} placeholder={f.ph} style={calcStyles.input}
                    value={nuevo[f.k]||''} onChange={e => set(f.k, e.target.value)}/>
                </div>
              ))}
              <div>
                <div style={{ fontSize:'10px', color:'var(--cream-3)', marginBottom:'3px' }}>Comisión %</div>
                <input type="number" min="0" max="100" style={calcStyles.input}
                  value={nuevo.comision} onChange={e => set('comision', parseFloat(e.target.value)||0)}/>
              </div>
              <div>
                <div style={{ fontSize:'10px', color:'var(--cream-3)', marginBottom:'3px' }}>Estado</div>
                <select style={{ ...invStyles.select, width:'100%' }} value={nuevo.activo?'Activo':'Inactivo'}
                  onChange={e => set('activo', e.target.value==='Activo')}>
                  <option>Activo</option><option>Inactivo</option>
                </select>
              </div>
              <div style={{ gridColumn:'1/-1' }}>
                <div style={{ fontSize:'10px', color:'var(--cream-3)', marginBottom:'3px' }}>Notas</div>
                <textarea rows={2} style={{ ...calcStyles.input, resize:'vertical' }}
                  value={nuevo.notas||''} onChange={e => set('notas', e.target.value)}
                  placeholder="Experiencia, especialidades, etc."/>
              </div>
            </div>
            <button onClick={guardarArtesano} disabled={!nuevo.nombre}
              style={{ ...posStyles.cobrarBtn, width:'100%', marginTop:'12px', opacity:!nuevo.nombre?0.5:1 }}>
              ✦ {editId ? 'Guardar Cambios' : 'Agregar Artesano'}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Artesanos });