// Employees — list + detail views with mock dataset
const EMPLOYEES = [
  { id: 'E0247', initials: 'AM', name: 'Andrés Felipe Mejía',  doc: 'CC 1.087.456.231', role: 'Operario de Clasificación',   area: 'Operaciones',   site: 'Cali',   contract: 'Fijo',         hire: '12/05/2026', status: 'onboarding', country: 'CO', email: 'andres.mejia@atica.co', phone: '+57 311 456 7821' },
  { id: 'E0246', initials: 'LG', name: 'Laura Gómez Restrepo', doc: 'CC 1.094.221.087', role: 'Operaria de Planta',    area: 'Operaciones',   site: 'Cali',   contract: 'Fijo',         hire: '02/05/2026', status: 'onboarding', country: 'CO', color: 'rose' },
  { id: 'E0245', initials: 'JR', name: 'Juan David Ruiz',      doc: 'CC 1.067.892.103', role: 'Auxiliar de Calidad',   area: 'Calidad',      site: 'Barranquilla', contract: 'Fijo',         hire: '28/04/2026', status: 'onboarding', country: 'CO' },
  { id: 'E0244', initials: 'SO', name: 'Sandra Milena Ortiz',  doc: 'CC 52.487.123',    role: 'Coord. Compras',        area: 'Compras',      site: 'Bogotá',    contract: 'Indefinido',   hire: '21/04/2026', status: 'onboarding', country: 'CO' },
  { id: 'E0205', initials: 'CV', name: 'Carlos Andrés Vélez',  doc: 'CC 10.087.231.456', role: 'Operario de Clasificación',  area: 'Operaciones',   site: 'Cali',   contract: 'Indefinido',   hire: '14/03/2024', status: 'activo', country: 'CO', alert: 'sst' },
  { id: 'E0198', initials: 'MF', name: 'María Fernanda López', doc: 'CC 1.098.443.221', role: 'Op. Aprovechamiento',           area: 'Aprovechamiento',      site: 'Cali',   contract: 'Indefinido',   hire: '08/01/2024', status: 'activo', country: 'CO', alert: 'sst' },
  { id: 'E0177', initials: 'JP', name: 'Jorge Iván Patiño',    doc: 'CC 75.221.487',    role: 'Conductor',             area: 'Recolección', site: 'Barranquilla', contract: 'Indefinido',   hire: '11/06/2023', status: 'activo', country: 'CO', alert: 'sst' },
  { id: 'E0156', initials: 'PV', name: 'Paula Valencia Ríos',  doc: 'CC 1.087.665.443', role: 'Téc. Mantenimiento',    area: 'Mantenimiento', site: 'Cali', contract: 'Fijo',         hire: '03/02/2025', status: 'activo', country: 'CO' },
  { id: 'E0142', initials: 'DT', name: 'Diego Andrés Toro',    doc: 'CC 1.098.221.665', role: 'Aux. Aprovechamiento',          area: 'Aprovechamiento',      site: 'Cali',   contract: 'Fijo',         hire: '20/03/2025', status: 'activo', country: 'CO' },
  { id: 'E0128', initials: 'NC', name: 'Nicolás Cárdenas',     doc: 'CC 1.067.443.221', role: 'Conductor',             area: 'Recolección', site: 'Barranquilla', contract: 'Indefinido',   hire: '05/09/2024', status: 'activo', country: 'CO' },
  { id: 'E0094', initials: 'MT', name: 'María Trujillo Henao', doc: 'CC 42.887.665',    role: 'Aux. Recursos Humanos', area: 'Administración', site: 'Cali', contract: 'Indefinido',   hire: '17/08/2022', status: 'activo', country: 'CO' },
  { id: 'E0067', initials: 'LM', name: 'Luis Miguel Marín',    doc: 'CC 16.443.221',    role: 'Líder de Aprovechamiento',      area: 'Aprovechamiento',      site: 'Cali',   contract: 'Indefinido',   hire: '11/04/2021', status: 'activo', country: 'CO' },
  { id: 'E0023', initials: 'CR', name: 'Carolina Restrepo S.', doc: 'CC 42.221.087',    role: 'Jefe de RRHH',          area: 'Administración', site: 'Cali', contract: 'Indefinido',   hire: '02/02/2019', status: 'activo', country: 'CO' },
  { id: 'E0298', initials: 'AR', name: 'Adriana Restrepo',     doc: 'CC 32.998.221',    role: 'Aux. Calidad',          area: 'Calidad',      site: 'Cali',   contract: 'Aprendizaje',  hire: '01/02/2026', status: 'activo', country: 'CO' },
  { id: 'E0011', initials: 'FH', name: 'Fernando Henao',       doc: 'CC 16.087.443',    role: 'Operario Clasificación',      area: 'Operaciones',   site: 'Cali',   contract: 'Indefinido',   hire: '14/07/2018', status: 'inactivo', country: 'CO' },

  // República Dominicana — sede piloto Santo Domingo
  { id: 'E0301', initials: 'YP', name: 'Yolanda Pérez Féliz',    doc: 'Céd. 001-2345678-9', role: 'Líder de Sede',           area: 'Administración', site: 'Santo Domingo', contract: 'Indefinido', hire: '15/01/2026', status: 'activo',     country: 'DO' },
  { id: 'E0302', initials: 'RC', name: 'Ramón Antonio Cruz',     doc: 'Céd. 002-1987654-3', role: 'Operario de Clasificación', area: 'Operaciones',    site: 'Santo Domingo', contract: 'Fijo',       hire: '10/03/2026', status: 'onboarding', country: 'DO' },
  { id: 'E0303', initials: 'CD', name: 'Carmen Rosa Díaz',       doc: 'Céd. 031-0456789-1', role: 'Aux. Calidad',            area: 'Calidad',        site: 'Santo Domingo', contract: 'Fijo',       hire: '22/02/2026', status: 'onboarding', country: 'DO' },
  { id: 'E0304', initials: 'LT', name: 'Luis Manuel Tavárez',    doc: 'Céd. 001-0987654-2', role: 'Conductor',               area: 'Recolección',    site: 'Santo Domingo', contract: 'Indefinido', hire: '05/11/2025', status: 'activo',     country: 'DO' },
  { id: 'E0305', initials: 'AM', name: 'Ana Julia Mercedes',     doc: 'Céd. 002-3456712-8', role: 'Op. Aprovechamiento',     area: 'Aprovechamiento', site: 'Santo Domingo', contract: 'Fijo',       hire: '18/04/2026', status: 'onboarding', country: 'DO' },
  { id: 'E0306', initials: 'PA', name: 'Pedro José Almonte',     doc: 'Céd. 001-6543219-4', role: 'Aux. Administrativo',     area: 'Administración', site: 'Santo Domingo', contract: 'Aprendizaje', hire: '02/05/2026', status: 'onboarding', country: 'DO' },

  // Guatemala — sede piloto Ciudad de Guatemala
  { id: 'E0311', initials: 'EX', name: 'Estuardo Xocop Morales', doc: 'DPI 2589 74123 0101', role: 'Líder de Sede',           area: 'Administración', site: 'Guatemala', contract: 'Indefinido', hire: '20/01/2026', status: 'activo',     country: 'GT' },
  { id: 'E0312', initials: 'MU', name: 'María José Us Ixchop',   doc: 'DPI 1987 65432 0101', role: 'Operaria de Clasificación', area: 'Operaciones',    site: 'Guatemala', contract: 'Fijo',       hire: '08/03/2026', status: 'onboarding', country: 'GT' },
  { id: 'E0313', initials: 'CS', name: 'Carlos Enrique Sique',   doc: 'DPI 2345 19876 0101', role: 'Conductor',               area: 'Recolección',    site: 'Guatemala', contract: 'Indefinido', hire: '12/12/2025', status: 'activo',     country: 'GT' },
  { id: 'E0314', initials: 'RT', name: 'Rosa Elvira Tzunún',     doc: 'DPI 1654 32987 0101', role: 'Aux. Calidad',            area: 'Calidad',        site: 'Guatemala', contract: 'Fijo',       hire: '25/02/2026', status: 'onboarding', country: 'GT' },
  { id: 'E0315', initials: 'BC', name: 'Byron Fernando Coy',     doc: 'DPI 2109 87654 0101', role: 'Op. Aprovechamiento',     area: 'Aprovechamiento', site: 'Guatemala', contract: 'Fijo',       hire: '30/04/2026', status: 'onboarding', country: 'GT' },
  { id: 'E0316', initials: 'WS', name: 'Wendy Paola Sac',        doc: 'DPI 1876 54321 0101', role: 'Aux. Administrativo',     area: 'Administración', site: 'Guatemala', contract: 'Aprendizaje', hire: '03/05/2026', status: 'onboarding', country: 'GT' },
];

const STATUS_META = {
  activo:     { label: 'Activo',     pill: 'green' },
  onboarding: { label: 'Onboarding', pill: 'navy' },
  inactivo:   { label: 'Inactivo',   pill: '' },
};

// COUNTRY_META vive en data-providers.jsx (compartido con el asistente Crear
// empleado, que carga antes que este archivo).

const EMP_FILTROS_VACIOS = { area: 'todas', site: 'todas', contract: 'todos', status: 'activo', role: 'todos' };

// ───────────── List view ─────────────
const EmployeeList = ({ onSelect }) => {
  const [country, setCountry] = React.useState('CO');
  const [view, setView] = React.useState('table');
  const [search, setSearch] = React.useState('');
  const [filters, setFilters] = React.useState(EMP_FILTROS_VACIOS);
  const [page, setPage] = React.useState(1);
  const [perPage, setPerPage] = React.useState(10);
  const [openExport, setOpenExport] = React.useState(false);
  const [openNew, setOpenNew] = React.useState(false);
  const [highlightId, setHighlightId] = React.useState(null);
  const highlightTimerRef = React.useRef(null);

  const selectCountry = (code) => {
    setCountry(code);
    setFilters(EMP_FILTROS_VACIOS);
    setSearch('');
    setPage(1);
  };

  React.useEffect(() => () => clearTimeout(highlightTimerRef.current), []);

  // Ver empleado en el listado, desde la confirmación de Crear empleado:
  // selecciona el país de la posición, limpia filtros que puedan ocultarlo
  // y destaca la fila/tarjeta unos segundos — sin recargar la página.
  const verEmpleadoEnListado = (empleado) => {
    setOpenNew(false);
    setCountry(empleado.country);
    setFilters(EMP_FILTROS_VACIOS);
    setSearch('');
    setPage(1);
    setHighlightId(empleado.id);
    clearTimeout(highlightTimerRef.current);
    highlightTimerRef.current = setTimeout(() => setHighlightId(null), 4000);
  };

  const countryEmployees = EMPLOYEES.filter(e => e.country === country);

  const filtered = countryEmployees.filter(e => {
    if (search) {
      const q = search.toLowerCase();
      const hay = [e.name, e.doc, e.role, e.id, e.positionCode].filter(Boolean).some(v => v.toLowerCase().includes(q));
      if (!hay) return false;
    }
    if (filters.area !== 'todas' && e.area !== filters.area) return false;
    if (filters.site !== 'todas' && e.site !== filters.site) return false;
    if (filters.contract !== 'todos' && e.contract !== filters.contract) return false;
    if (filters.role !== 'todos' && e.role !== filters.role) return false;
    if (filters.status !== 'todos' && e.status !== filters.status && !(filters.status === 'activo' && e.status === 'onboarding')) return false;
    return true;
  });

  const totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
  const start = (page - 1) * perPage;
  const pageRows = filtered.slice(start, start + perPage);

  const FilterSelect = ({ label, value, onChange, options }) => (
    <div className="filter-select">
      <span className="filter-label">{label}</span>
      <select value={value} onChange={(e) => { onChange(e.target.value); setPage(1); }}>
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      <IconChevronDown size={14} />
    </div>
  );

  return (
    <div className="main">
      <div className="page-head">
        <div>
          <h1 className="page-title">Empleados</h1>
          <div className="page-subtitle">
            <b>{countryEmployees.filter(e => e.status === 'activo' || e.status === 'onboarding').length}</b> colaboradores activos · <b>{countryEmployees.filter(e => e.status === 'onboarding').length}</b> en onboarding · <b>{countryEmployees.filter(e => e.status === 'inactivo').length}</b> inactivo{countryEmployees.filter(e => e.status === 'inactivo').length === 1 ? '' : 's'}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn" onClick={() => setOpenExport(true)}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Exportar
          </button>
          <button className="btn danger" onClick={() => setOpenNew(true)}>
            <IconPlus size={15} /> Crear empleado
          </button>
        </div>
      </div>

      <div className="emp-tabs-row">
        {Object.entries(COUNTRY_META).map(([code, meta]) => (
          <button key={code} className={`emp-tab ${country === code ? 'active' : ''}`} onClick={() => selectCountry(code)}>
            <span style={{ marginRight: 6 }}>{meta.flag}</span>{meta.label}
            <span className={`tab-badge ${country === code ? 'navy' : ''}`}>{EMPLOYEES.filter(e => e.country === code).length}</span>
          </button>
        ))}
      </div>

      <div className="card" style={{ overflow: 'visible' }}>
        <div className="filters-bar">
          <div className="search" style={{ flex: 'none', width: 320, margin: 0 }}>
            <span className="icon"><IconSearch size={16} /></span>
            <input
              placeholder="Nombre, documento, cargo o código…"
              value={search}
              onChange={(e) => { setSearch(e.target.value); setPage(1); }}
              style={{ background: 'white' }}
            />
          </div>
          <FilterSelect label="Área" value={filters.area} onChange={(v) => setFilters({ ...filters, area: v })}
            options={[
              { value: 'todas', label: 'Todas' },
              ...[...new Set(countryEmployees.map(e => e.area))].map(a => ({ value: a, label: a }))
            ]} />
          <FilterSelect label="Sede" value={filters.site} onChange={(v) => setFilters({ ...filters, site: v })}
            options={[{ value: 'todas', label: 'Todas' }, ...[...new Set(countryEmployees.map(e => e.site))].map(a => ({ value: a, label: a }))]} />
          <FilterSelect label="Tipo contrato" value={filters.contract} onChange={(v) => setFilters({ ...filters, contract: v })}
            options={[{ value: 'todos', label: 'Todos' }, ...['Indefinido', 'Fijo', 'Aprendizaje', 'Obra labor'].map(a => ({ value: a, label: a }))]} />
          <FilterSelect label="Estado" value={filters.status} onChange={(v) => setFilters({ ...filters, status: v })}
            options={[
              { value: 'todos', label: 'Todos' },
              { value: 'activo', label: 'Activos' },
              { value: 'onboarding', label: 'En onboarding' },
              { value: 'inactivo', label: 'Inactivos' },
            ]} />
          <FilterSelect label="Cargo" value={filters.role} onChange={(v) => setFilters({ ...filters, role: v })}
            options={[
              { value: 'todos', label: 'Todos' },
              ...[...new Set(countryEmployees.map(e => e.role))].map(r => ({ value: r, label: r }))
            ]} />
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 4, alignItems: 'center' }}>
            <span className="muted" style={{ fontSize: 12, marginRight: 6 }}>{filtered.length} resultados</span>
            <div className="view-toggle">
              <button className={view === 'table' ? 'active' : ''} onClick={() => setView('table')} title="Tabla">
                <IconMenu size={15} />
              </button>
              <button className={view === 'cards' ? 'active' : ''} onClick={() => setView('cards')} title="Tarjetas">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
              </button>
            </div>
          </div>
        </div>

        {view === 'table' ? (
          <div className="emp-table">
            <div className="emp-table-head">
              <div>Empleado</div>
              <div>Cargo</div>
              <div>Área</div>
              <div>Sede</div>
              <div>Contrato</div>
              <div>Ingreso</div>
              <div>Estado</div>
              <div style={{ textAlign: 'right' }}>Acciones</div>
            </div>
            {pageRows.map(e => (
              <div key={e.id} className={`emp-table-row ${e.id === highlightId ? 'emp-row-highlight' : ''}`} onClick={() => onSelect(e.id)}>
                <div className="emp-cell-name">
                  <div className={`avatar ${e.color === 'rose' ? 'rose' : ''}`} style={{ width: 32, height: 32, fontSize: 11 }}>{e.initials}</div>
                  <div style={{ minWidth: 0 }}>
                    <div className="emp-nm">{e.name}</div>
                    <div className="emp-doc">{e.doc}</div>
                  </div>
                  {e.alert === 'sst' && (
                    <span className="alert-dot" title="Alerta SST"><IconAlert size={11} /></span>
                  )}
                </div>
                <div className="emp-cell" data-label="Cargo">{e.role}</div>
                <div className="emp-cell" data-label="Área">{e.area}</div>
                <div className="emp-cell" data-label="Sede">{e.site}</div>
                <div className="emp-cell" data-label="Contrato">{e.contract}</div>
                <div className="emp-cell mono" data-label="Ingreso">{e.hire}</div>
                <div className="emp-cell-status" data-label="Estado"><span className={`pill ${STATUS_META[e.status].pill}`}>{STATUS_META[e.status].label}</span></div>
                <div className="emp-actions">
                  <button className="btn" style={{ padding: '5px 10px', fontSize: 12.5 }} onClick={(ev) => { ev.stopPropagation(); onSelect(e.id); }}>Ver</button>
                  <button className="icon-btn" onClick={(ev) => ev.stopPropagation()} title="Editar">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>
                  </button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="emp-cards">
            {pageRows.map(e => (
              <div key={e.id} className={`emp-card ${e.id === highlightId ? 'emp-row-highlight' : ''}`} onClick={() => onSelect(e.id)}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div className={`avatar ${e.color === 'rose' ? 'rose' : ''}`} style={{ width: 44, height: 44, fontSize: 14 }}>{e.initials}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="emp-nm" style={{ fontSize: 14 }}>{e.name}</div>
                    <div className="emp-doc">{e.doc}</div>
                  </div>
                  <span className={`pill ${STATUS_META[e.status].pill}`}>{STATUS_META[e.status].label}</span>
                </div>
                <div className="emp-card-grid">
                  <div><span className="lbl">Cargo</span><span className="val">{e.role}</span></div>
                  <div><span className="lbl">Área</span><span className="val">{e.area}</span></div>
                  <div><span className="lbl">Sede</span><span className="val">{e.site}</span></div>
                  <div><span className="lbl">Contrato</span><span className="val">{e.contract}</span></div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--border)', paddingTop: 10, marginTop: 4 }}>
                  <span className="muted mono" style={{ fontSize: 12 }}>Ingreso {e.hire}</span>
                  <button className="btn" style={{ padding: '5px 12px', fontSize: 12.5 }} onClick={(ev) => { ev.stopPropagation(); onSelect(e.id); }}>Ver ficha</button>
                </div>
              </div>
            ))}
          </div>
        )}

        <div className="emp-pagination">
          <div className="muted" style={{ fontSize: 12.5 }}>
            Mostrando <b>{filtered.length === 0 ? 0 : start + 1}–{Math.min(start + perPage, filtered.length)}</b> de <b>{filtered.length}</b>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 16 }}>
            <div className="filter-select">
              <span className="filter-label">Por página</span>
              <select value={perPage} onChange={(e) => { setPerPage(Number(e.target.value)); setPage(1); }}>
                {[10, 25, 50].map(n => <option key={n} value={n}>{n}</option>)}
              </select>
              <IconChevronDown size={14} />
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              <button className="btn" disabled={page === 1} style={{ padding: '6px 10px' }} onClick={() => setPage(Math.max(1, page - 1))}>
                <IconChevronLeft size={14} />
              </button>
              {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map(n => (
                <button key={n} className={`btn ${page === n ? 'primary' : ''}`} style={{ padding: '6px 11px', minWidth: 32 }} onClick={() => setPage(n)}>{n}</button>
              ))}
              <button className="btn" disabled={page === totalPages} style={{ padding: '6px 10px' }} onClick={() => setPage(Math.min(totalPages, page + 1))}>
                <IconChevronRight size={14} />
              </button>
            </div>
          </div>
        </div>
      </div>

      <ExportModal open={openExport} onClose={() => setOpenExport(false)} scope="Empleados" />
      <CreateEmployeeWizard open={openNew} onClose={() => setOpenNew(false)} onCreated={verEmpleadoEnListado} />
    </div>
  );
};

window.EmployeeList = EmployeeList;
window.EMPLOYEES = EMPLOYEES;
window.STATUS_META = STATUS_META;