// ─────────────────────────────────────────────────────
// INC-004 — Carpetas de documentos por cliente y por proyecto.
//
//   Cliente <nombre>       (arriba, sus datos de facturación y de envío)
//     ├─ <nº de proyecto>  (una carpeta por proyecto/expediente del cliente,
//     │    │                con el nombre de la obra como texto secundario)
//     │    └─ carpetas fijas del expediente (EXPEDIENTE_SECCIONES)
//     └─ General           (archivos del cliente que no son de ningún proyecto)
//
// Es una vista lógica: los archivos siguen donde estaban (entity_type
// 'expedientes' por expediente; los de «General» van a entity_type 'clientes').
// Datos del nivel cliente: GET /api/documentos/clientes/:id.
//
// Exporta:
//   window.ClienteDocumentos  explorador de un cliente (lo usa la pestaña
//                             Documentos del expediente y la vista Documentos)
//   window.DocumentosView     vista «Documentos por cliente» del menú
// ─────────────────────────────────────────────────────

// Carpetas fijas del cliente (las claves SON la `categoria`). Ampliable.
const CLIENTE_SECCIONES = [
  'General',
];

const SIN_PADRES = [];

// Los datos del cliente se editan en el lead (no hay ficha de cliente aparte):
// el enlace solo sale a quien ve Leads (mismo criterio que el menú).
function puedeEditarCliente() {
  const u = (window.API && API.getUser && API.getUser()) || {};
  if (u.rol === 'admin') return true;
  const eff = (Array.isArray(u.permisosEfectivos) && u.permisosEfectivos.length) ? u.permisosEfectivos : (u.permisos || ['leads']);
  return eff.includes('*') || eff.includes('leads');
}

const unirDatos = (...xs) => xs.map(x => (x == null ? '' : String(x).trim())).filter(Boolean).join(', ');

// INC-004 (reabierta): datos de facturación y de envío del cliente, solo lectura.
// Facturación = ficha del cliente; envío = destinos de sus proyectos marcados con
// envío (Programación › ficha › Envío al cliente, INC-019).
const ClienteDatosPanel = ({ cliente, envios }) => {
  if (!cliente) return null;
  const V = ({ children }) => <div className="v">{children || <span className="muted">—</span>}</div>;
  const editar = cliente.lead_id && puedeEditarCliente()
    ? () => window.dispatchEvent(new CustomEvent('erp:open-lead', { detail: { id: cliente.lead_id } }))
    : null;
  return (
    <div className="cli-datos">
      <div className="cli-datos-col">
        <div className="section-title" style={{display:'flex',alignItems:'center',gap:6}}>
          <Icon name="file" size={13}/> Datos de facturación
          {editar && (
            <button type="button" className="btn sm ghost" style={{marginLeft:'auto'}} onClick={editar}
              title="Los datos del cliente se editan en su lead (el más reciente)">
              <Icon name="edit" size={12}/> Editar en el lead
            </button>
          )}
        </div>
        <div className="fields-grid">
          <div className="field full"><label>Nombre / Empresa</label><V>{cliente.nombre}</V></div>
          <div className="field full"><label>Dirección</label><V>{unirDatos(cliente.direccion, cliente.localidad, cliente.provincia)}</V></div>
          <div className="field"><label>Teléfono</label><V>{cliente.telefono}</V></div>
          <div className="field"><label>Email</label><V>{cliente.email}</V></div>
        </div>
      </div>
      <div className="cli-datos-col">
        <div className="section-title" style={{display:'flex',alignItems:'center',gap:6}}>
          <Icon name="truck" size={13}/> Datos de envío
        </div>
        {(!envios || envios.length === 0) ? (
          <div className="muted" style={{fontSize:12.5}}>
            Ningún proyecto de este cliente va por envío. Se marca en Programación › ficha del proyecto › Envío al cliente.
          </div>
        ) : (
          <div style={{display:'flex',flexDirection:'column',gap:8}}>
            {envios.map((e, i) => (
              <div key={i} className="field">
                <label>{e.etiqueta || 'Dirección de envío'}{e.proyectos.length ? ` · proyecto${e.proyectos.length === 1 ? '' : 's'} ${e.proyectos.join(', ')}` : ''}</label>
                <V>
                  {unirDatos(e.direccion, e.cp ? `CP ${e.cp}` : null) || <span className="muted">Sin dirección</span>}
                  {(e.telefono || e.agencias.length > 0) && (
                    <div className="muted" style={{fontSize:11.5,marginTop:2}}>
                      {[e.telefono && `Tel. ${e.telefono}`, e.agencias.length && `Agencia ${e.agencias.join(', ')}`].filter(Boolean).join(' · ')}
                    </div>
                  )}
                </V>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

const ClienteDocumentos = ({
  clienteId,
  clienteNombre,          // nombre provisional mientras carga
  pedidoIdInicial,        // si viene, se abre directamente ese expediente
  numeroInicial,          // nº de proyecto de ese expediente (para la barra de direcciones)
  parentCrumbs = SIN_PADRES,
  onToast,
}) => {
  const [pedidoId, setPedidoId] = React.useState(pedidoIdInicial || null);
  const [d, setD] = React.useState(null);
  const [version, setVersion] = React.useState(0);

  React.useEffect(() => { setPedidoId(pedidoIdInicial || null); }, [clienteId, pedidoIdInicial]);

  React.useEffect(() => {
    if (!clienteId) return;
    let alive = true;
    API.get(`/api/documentos/clientes/${clienteId}`)
      .then(r => { if (alive) setD(r); })
      .catch(e => { if (alive && onToast) onToast(e.message || 'Error al cargar la carpeta del cliente', true); });
    return () => { alive = false; };
  }, [clienteId, version]);

  const nombre = (d && d.cliente && d.cliente.nombre) || clienteNombre || `#${clienteId}`;
  const labelCliente = `Cliente ${nombre}`;
  const proyectos = (d && d.proyectos) || [];

  // Volver al nivel cliente refresca los contadores de cada proyecto.
  const irACliente = React.useCallback(() => { setPedidoId(null); setVersion(v => v + 1); }, []);

  if (pedidoId) {
    const p = proyectos.find(x => Number(x.pedido_id) === Number(pedidoId));
    const num = (p && p.numero_proyecto) || (Number(pedidoId) === Number(pedidoIdInicial) ? numeroInicial : '');
    return (
      <ExploradorArchivos
        key={`exp-${pedidoId}`}
        entityType="expedientes"
        entityId={pedidoId}
        carpetas={window.EXPEDIENTE_SECCIONES || []}
        rootLabel={num ? String(num) : 'Proyecto'}
        parentCrumbs={parentCrumbs.concat([{ label: labelCliente, onClick: irACliente }])}
        onToast={onToast}
      />
    );
  }

  const subcarpetas = proyectos.map(p => ({
    key: `p-${p.pedido_id}`,
    label: p.numero_proyecto || p.numero_expediente,
    sub: p.obra || p.productos_resumen || p.nombre_cliente || '',
    count: p.n_archivos,
    onOpen: () => setPedidoId(p.pedido_id),
  }));

  return (
    <>
    <ClienteDatosPanel cliente={d && d.cliente} envios={d && d.envios}/>
    <ExploradorArchivos
      key={`cli-${clienteId}-${version}`}
      entityType="clientes"
      entityId={clienteId}
      carpetas={CLIENTE_SECCIONES}
      rootLabel={labelCliente}
      parentCrumbs={parentCrumbs}
      subcarpetas={subcarpetas}
      onToast={onToast}
    />
    </>
  );
};

// ── Vista «Documentos»: elegir cliente y navegar su carpeta ──
const DocumentosView = ({ onToast }) => {
  const [search, setSearch] = React.useState('');
  const [rows, setRows] = React.useState(null);
  const [cliente, setCliente] = React.useState(null); // { id, nombre }

  React.useEffect(() => {
    let alive = true;
    const t = setTimeout(() => {
      const params = search.trim() ? { search: search.trim() } : {};
      API.get('/api/documentos/clientes', params)
        .then(r => { if (alive) setRows(Array.isArray(r) ? r : []); })
        .catch(e => { if (alive) { setRows([]); onToast && onToast(e.message || 'Error al cargar clientes', true); } });
    }, 250);
    return () => { alive = false; clearTimeout(t); };
  }, [search]);

  const volver = React.useCallback(() => setCliente(null), []);
  const crumbs = React.useMemo(() => [{ label: 'Clientes', onClick: volver }], [volver]);

  return (
    <>
      <div className="page-h">
        <div>
          <h1>Documentos</h1>
          <div className="sub">
            Una carpeta por cliente con sus datos de facturación y envío, una carpeta por cada proyecto (por nº de proyecto) y otra «General» para lo que no es de ningún proyecto
          </div>
        </div>
      </div>

      {cliente ? (
        <ClienteDocumentos
          key={cliente.id}
          clienteId={cliente.id}
          clienteNombre={cliente.nombre}
          parentCrumbs={crumbs}
          onToast={onToast}
        />
      ) : (
        <>
          <div className="toolbar">
            <div className="tb-search">
              <Icon name="search" />
              <input placeholder="Cliente, nº de proyecto u obra…" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
          </div>
          <div className="tbl-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Cliente</th>
                  <th style={{width:180}}>Localidad</th>
                  <th style={{width:110,textAlign:'right'}}>Proyectos</th>
                  <th style={{width:110,textAlign:'right'}}>Archivos</th>
                </tr>
              </thead>
              <tbody>
                {rows === null && (
                  <tr><td colSpan={4} className="muted" style={{padding:24,textAlign:'center'}}>Cargando…</td></tr>
                )}
                {rows && rows.length === 0 && (
                  <tr><td colSpan={4} className="muted" style={{padding:24,textAlign:'center'}}>
                    {search.trim() ? 'Ningún cliente coincide con la búsqueda.' : 'Todavía no hay clientes con expedientes.'}
                  </td></tr>
                )}
                {rows && rows.map(r => (
                  <tr key={r.id} style={{cursor:'pointer'}} onClick={() => setCliente({ id: r.id, nombre: r.nombre })} title="Abrir la carpeta del cliente">
                    <td className="strong">
                      <span style={{display:'inline-flex',alignItems:'center',gap:6}}>
                        <Icon name="folder" size={14}/> {r.nombre || `Cliente #${r.id}`}
                      </span>
                    </td>
                    <td className="muted">{r.localidad || '—'}</td>
                    <td style={{textAlign:'right'}}>{r.n_proyectos}</td>
                    <td style={{textAlign:'right'}}>{r.n_archivos}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </>
  );
};

window.CLIENTE_SECCIONES = CLIENTE_SECCIONES;
window.ClienteDocumentos = ClienteDocumentos;
window.DocumentosView = DocumentosView;