// fichaje.eu — Screen: Documentos (company) + Configuración + Descubrir

const ScreenDocumentos = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
      {COMPANY_DOCS_FOLDERS.map((f, i) => (
        <Card key={i} hoverable>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 'var(--r-md)',
              background: `var(--${f.color === 'violet' ? 'violet-100' : f.color === 'pink' ? 'pink-100' : f.color === 'teal' ? 'teal-100' : f.color+'-50'})`,
              color: `var(--${f.color === 'violet' ? 'violet-500' : f.color === 'pink' ? 'pink-500' : f.color === 'teal' ? 'teal-500' : f.color+'-600'})`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}><IFolder size={22}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)' }}>{f.name}</div>
              <div style={{ fontSize: 12.5, color: 'var(--slate-500)', marginTop: 2 }}>{f.count} documentos</div>
            </div>
            <IChevronRight size={16} style={{ color: 'var(--slate-400)' }}/>
          </div>
        </Card>
      ))}
    </div>

    <Card padded={false}>
      <div style={{ padding: 18, borderBottom: '1px solid var(--slate-150)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ fontSize: 15, fontWeight: 700 }}>Documentos recientes</div>
        <div style={{ flex: 1 }}/>
        <Input icon={<ISearch size={14}/>} placeholder="Buscar documentos…" style={{ width: 240, background: 'var(--slate-50)' }}/>
        <Btn variant="primary" size="sm" icon={<IUpload size={13}/>}>Subir documento</Btn>
      </div>
      <div>
        {[
          { name: 'Manual de bienvenida 2026.pdf',         folder: 'Onboarding',     date: '11 may', author: 'Helena Prats',  size: '2.4 MB', signed: '24/24' },
          { name: 'Plantilla — Propuesta comercial.docx',  folder: 'Plantillas',     date: '08 may', author: 'Joel Vidal',    size: '128 KB', signed: '—' },
          { name: 'Protocolo de uso de IA generativa.pdf', folder: 'Protocolos',     date: '06 may', author: 'Núria Castells',size: '486 KB', signed: '18/24' },
          { name: 'Evaluación riesgos PRL 2026.pdf',       folder: 'PRL',            date: '02 may', author: 'External',       size: '1.1 MB', signed: '22/24' },
          { name: 'Manual de marca (v3).pdf',              folder: 'Plantillas',     date: '28 abr', author: 'Berta Folch',   size: '12.4 MB', signed: '—' },
          { name: 'GDPR — Acuerdo de tratamiento.pdf',     folder: 'Compliance & GDPR', date: '15 abr', author: 'Helena Prats', size: '342 KB', signed: '24/24' },
        ].map((d, i, arr) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '32px 2fr 1fr 1fr 100px 110px 32px', alignItems: 'center', gap: 14, padding: '14px 18px', borderBottom: i < arr.length - 1 ? '1px solid var(--slate-100)' : 'none' }}>
            <div style={{
              width: 30, height: 36, borderRadius: 4,
              background: 'linear-gradient(180deg, #fff, var(--slate-50))',
              border: '1px solid var(--slate-200)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 8.5, fontWeight: 700, color: d.name.endsWith('.docx') ? 'var(--brand-600)' : 'var(--danger-500)',
            }}>{d.name.split('.').pop().toUpperCase()}</div>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{d.name}</div>
              <div style={{ fontSize: 11.5, color: 'var(--slate-500)' }}>{d.size}</div>
            </div>
            <div><Badge tone="slate">{d.folder}</Badge></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Avatar name={d.author} size={22}/>
              <span style={{ fontSize: 12.5, color: 'var(--slate-600)' }}>{d.author.split(' ')[0]}</span>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--slate-500)' }}>{d.date}</div>
            <div>{d.signed !== '—' ? <Badge tone={d.signed.split('/')[0] === d.signed.split('/')[1] ? 'success' : 'warning'} dot>{d.signed}</Badge> : <span style={{ fontSize: 12, color: 'var(--slate-400)' }}>—</span>}</div>
            <button style={{ color: 'var(--slate-400)', padding: 4 }}><IMoreH size={16}/></button>
          </div>
        ))}
      </div>
    </Card>
  </div>
);

const ScreenConfig = ({ theme = DEFAULT_THEME, setTheme = () => {} }) => {
  const sections = [
    { i: <IBuilding size={18}/>, t: 'Empresa', d: 'Datos fiscales, sedes, identidad', tone: 'brand' },
    { i: <IClock size={18}/>,    t: 'Horarios y turnos', d: 'Calendarios laborales, fines de semana', tone: 'violet' },
    { i: <ICalendar size={18}/>, t: 'Políticas de ausencias', d: 'Vacaciones, asuntos propios, médico', tone: 'success' },
    { i: <IMapPin size={18}/>,   t: 'Centros y geolocalización', d: 'Oficinas, IPs autorizadas', tone: 'warning' },
    { i: <IUsers size={18}/>,    t: 'Equipos y departamentos', d: '5 equipos · 12 puestos', tone: 'pink' },
    { i: <IShield size={18}/>,   t: 'Permisos y roles', d: '4 roles configurados', tone: 'teal' },
    { i: <IBell size={18}/>,     t: 'Notificaciones', d: 'Email, push, recordatorios', tone: 'brand' },
    { i: <ILayers size={18}/>,   t: 'Integraciones', d: 'Slack, Google, n8n, Sage', tone: 'violet' },
    { i: <ILock size={18}/>,     t: 'Seguridad', d: 'SSO, 2FA, sesiones, auditoría', tone: 'warning' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 18 }}>
      <Card padded={false}>
        <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--slate-150)', fontSize: 11.5, fontWeight: 700, color: 'var(--slate-500)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Configuración</div>
        {sections.map((s, i) => (
          <button key={i} style={{
            width: '100%', textAlign: 'left',
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '11px 14px',
            background: i === 0 ? 'var(--brand-50)' : 'transparent',
            borderLeft: i === 0 ? '3px solid var(--brand-600)' : '3px solid transparent',
            borderBottom: '1px solid var(--slate-100)',
            color: i === 0 ? 'var(--brand-700)' : 'var(--slate-700)',
            fontSize: 13.5, fontWeight: i === 0 ? 700 : 500,
          }}>
            <span style={{ color: i === 0 ? 'var(--brand-600)' : 'var(--slate-500)' }}>{s.i}</span>
            <span>{s.t}</span>
          </button>
        ))}
      </Card>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Card>
          <SectionHead title="Datos de la empresa" subtitle="Información visible para todos los empleados"/>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            <Field label="Nombre legal" required><Input defaultValue="IABusiness Solutions S.L."/></Field>
            <Field label="CIF" required><Input defaultValue="B-87492033"/></Field>
            <Field label="Nombre comercial" required><Input defaultValue="IABusiness.es"/></Field>
            <Field label="Sector"><Input defaultValue="Consultoría TIC · Agentes de IA"/></Field>
            <Field label="Email de contacto"><Input defaultValue="hola@iabusiness.es" icon={<IMail size={14}/>}/></Field>
            <Field label="Teléfono"><Input defaultValue="+34 963 22 33 44" icon={<IPhone size={14}/>}/></Field>
            <Field label="Sede fiscal"><Input defaultValue="C/ Colón 22, 46004 Valencia"/></Field>
            <Field label="Convenio colectivo"><Input defaultValue="Consultoría TIC"/></Field>
          </div>
        </Card>

        <Card>
          <SectionHead title="Identidad visual" subtitle="Los cambios se aplican al instante en todo el sistema."/>
          <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
            <div style={{
              width: 96, height: 96, borderRadius: 'var(--r-md)',
              background: `linear-gradient(135deg, var(--brand-700), var(--brand-500))`,
              color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 38, fontWeight: 700,
              boxShadow: 'var(--shadow-md)',
            }}>iA</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Logo de la empresa</div>
              <div style={{ fontSize: 12, color: 'var(--slate-500)', marginBottom: 12 }}>PNG o SVG. Mínimo 256×256 px.</div>
              <div style={{ display: 'flex', gap: 8 }}>
                <Btn variant="secondary" size="sm" icon={<IUpload size={13}/>}>Subir nuevo</Btn>
                <Btn variant="ghost" size="sm">Eliminar</Btn>
              </div>
            </div>
          </div>

          <Divider style={{ margin: '22px 0 18px' }}/>

          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', marginBottom: 4 }}>Color de marca</div>
          <div style={{ fontSize: 12, color: 'var(--slate-500)', marginBottom: 12 }}>Define el tono que se aplica a botones, enlaces, estados activos y acentos del producto.</div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {Object.entries(THEMES).map(([key, t]) => {
              const active = theme.brand === key;
              return (
                <button key={key} onClick={() => setTheme({ brand: key })} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '8px 14px 8px 8px',
                  borderRadius: 'var(--r-pill)',
                  border: `1px solid ${active ? t.swatch : 'var(--slate-200)'}`,
                  background: active ? `${t.swatch}10` : 'var(--white)',
                  boxShadow: active ? `0 0 0 3px ${t.swatch}22` : 'none',
                  transition: 'all .15s',
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999, background: t.swatch,
                    boxShadow: 'inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,0.05)',
                  }}/>
                  <span style={{ fontSize: 13, fontWeight: 600, color: active ? t.swatch : 'var(--slate-700)' }}>{t.label}</span>
                  {active && <ICheck size={14} style={{ color: t.swatch }}/>}
                </button>
              );
            })}
          </div>

          <Divider style={{ margin: '22px 0 18px' }}/>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', marginBottom: 4 }}>Tono de la barra lateral</div>
              <div style={{ fontSize: 12, color: 'var(--slate-500)', marginBottom: 12 }}>Cómo se ve el menú de la izquierda.</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {Object.entries(SIDEBAR_TINTS).map(([key, s]) => (
                  <SwatchOption key={key} active={theme.sidebar === key} onClick={() => setTheme({ sidebar: key })}
                    label={s.label} preview={<SidebarPreview tint={s}/>}/>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', marginBottom: 4 }}>Fondo del contenido</div>
              <div style={{ fontSize: 12, color: 'var(--slate-500)', marginBottom: 12 }}>Color detrás de los módulos para destacar las tarjetas blancas.</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {Object.entries(CONTENT_BGS).map(([key, c]) => (
                  <SwatchOption key={key} active={theme.content === key} onClick={() => setTheme({ content: key })}
                    label={c.label} preview={<ContentPreview bg={c.bg}/>}/>
                ))}
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

const ScreenDescubrir = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
    <Card style={{ background: 'linear-gradient(135deg, var(--brand-700), var(--brand-500))', color: '#fff', padding: 28, border: 'none' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
        <div style={{ width: 64, height: 64, borderRadius: 'var(--r-md)', background: 'rgba(255,255,255,0.15)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.25)' }}>
          <ISparkle size={28}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>Sácale más a fichaje.eu</div>
          <div style={{ fontSize: 14, opacity: 0.9, marginTop: 4, maxWidth: 560 }}>Conoce las funciones avanzadas, integra con tus herramientas y automatiza procesos de RRHH.</div>
        </div>
        <Btn variant="secondary" size="md" iconRight={<IArrowRight size={14}/>}>Ver todas</Btn>
      </div>
    </Card>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
      {[
        { i: <IZap size={20}/>, t: 'Automatizaciones',     d: 'Crea flujos para onboarding, alertas de horas extra, recordatorios y aprobaciones.', tone: 'brand', new: true },
        { i: <ILayers size={20}/>, t: 'Integraciones',     d: 'Conecta con Slack, Google Workspace, n8n, Sage, Holded y más de 40 herramientas.', tone: 'violet' },
        { i: <IBar size={20}/>, t: 'Informes avanzados',   d: 'Cuadros de mando personalizados, exportaciones programadas y análisis por proyecto.', tone: 'success' },
        { i: <IShield size={20}/>, t: 'Compliance Center', d: 'Centraliza protocolos, firmas y formaciones obligatorias con auditoría completa.', tone: 'warning', new: true },
        { i: <ISparkle size={20}/>, t: 'Asistente IA',     d: 'Pregunta a tu asistente de RRHH: "¿Quién está fuera la próxima semana?", "¿Cuántas horas trabajó Marc en abril?"', tone: 'pink', new: true },
        { i: <IMapPin size={20}/>, t: 'Fichaje móvil',     d: 'App nativa iOS y Android con geolocalización, modo offline y reconocimiento facial opcional.', tone: 'teal' },
      ].map((f, i) => (
        <Card key={i} hoverable style={{ padding: 18 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 'var(--r-md)',
            background: `var(--${f.tone === 'violet' ? 'violet-100' : f.tone === 'pink' ? 'pink-100' : f.tone === 'teal' ? 'teal-100' : f.tone+'-50'})`,
            color: `var(--${f.tone === 'violet' ? 'violet-500' : f.tone === 'pink' ? 'pink-500' : f.tone === 'teal' ? 'teal-500' : f.tone+'-600'})`,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 14,
          }}>{f.i}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <div style={{ fontSize: 15, fontWeight: 700 }}>{f.t}</div>
            {f.new && <Badge tone="brand">Nuevo</Badge>}
          </div>
          <div style={{ fontSize: 13, color: 'var(--slate-600)', lineHeight: 1.55 }}>{f.d}</div>
          <div style={{ marginTop: 14, fontSize: 12.5, fontWeight: 600, color: 'var(--brand-600)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            Saber más <IArrowRight size={13}/>
          </div>
        </Card>
      ))}
    </div>
  </div>
);

const SwatchOption = ({ active, onClick, label, preview }) => (
  <button onClick={onClick} style={{
    display: 'flex', alignItems: 'center', gap: 12,
    padding: 10,
    borderRadius: 'var(--r-md)',
    border: `1px solid ${active ? 'var(--brand-500)' : 'var(--slate-200)'}`,
    background: active ? 'var(--brand-50)' : 'var(--white)',
    boxShadow: active ? 'var(--ring-brand)' : 'none',
    textAlign: 'left',
    transition: 'all .15s',
  }}>
    <div style={{ width: 60, height: 36, borderRadius: 'var(--r-sm)', overflow: 'hidden', border: '1px solid var(--slate-200)', flexShrink: 0 }}>{preview}</div>
    <div style={{ flex: 1, fontSize: 13, fontWeight: 600, color: active ? 'var(--brand-700)' : 'var(--slate-700)' }}>{label}</div>
    {active && <ICheck size={15} style={{ color: 'var(--brand-600)' }}/>}
  </button>
);

const SidebarPreview = ({ tint }) => (
  <div style={{ display: 'flex', height: '100%', background: '#fff' }}>
    <div style={{ width: 20, background: tint.bg, borderRight: `1px solid ${tint.border}` }}>
      <div style={{ height: 4 }}/>
      <div style={{ height: 4, margin: '2px 3px', borderRadius: 1, background: tint.dark ? 'rgba(255,255,255,0.4)' : 'var(--brand-500)' }}/>
      <div style={{ height: 3, margin: '2px 3px', borderRadius: 1, background: tint.dark ? 'rgba(255,255,255,0.15)' : 'var(--slate-300)' }}/>
      <div style={{ height: 3, margin: '2px 3px', borderRadius: 1, background: tint.dark ? 'rgba(255,255,255,0.15)' : 'var(--slate-300)' }}/>
    </div>
    <div style={{ flex: 1, background: '#FBFCFE', padding: 4 }}>
      <div style={{ height: 4, background: 'var(--slate-200)', borderRadius: 1, marginBottom: 3 }}/>
      <div style={{ height: 18, background: '#fff', border: '1px solid var(--slate-150)', borderRadius: 2 }}/>
    </div>
  </div>
);

const ContentPreview = ({ bg }) => (
  <div style={{ height: '100%', background: bg, padding: 4 }}>
    <div style={{ height: 12, background: '#fff', border: '1px solid var(--slate-150)', borderRadius: 2, marginBottom: 3, boxShadow: '0 1px 2px rgba(0,0,0,0.04)' }}/>
    <div style={{ height: 12, background: '#fff', border: '1px solid var(--slate-150)', borderRadius: 2, boxShadow: '0 1px 2px rgba(0,0,0,0.04)' }}/>
  </div>
);

Object.assign(window, { ScreenDocumentos, ScreenConfig, ScreenDescubrir, SwatchOption });