// fichaje.eu — Screen: Bandeja de entrada

const ScreenBandeja = () => {
  const [filter, setFilter] = React.useState('todos');
  const [selected, setSelected] = React.useState(INBOX[0]);

  const filtered = filter === 'todos' ? INBOX : INBOX.filter(i => i.type === filter);

  const typeMeta = {
    approval: { i: <ICheckSquare size={14}/>, c: 'brand',   l: 'Aprobación' },
    sign:     { i: <IPen size={14}/>,         c: 'violet',  l: 'Firma' },
    mention:  { i: <ISparkle size={14}/>,     c: 'warning', l: 'Mención' },
    reminder: { i: <IBell size={14}/>,        c: 'slate',   l: 'Aviso' },
    birthday: { i: <IGift size={14}/>,        c: 'pink',    l: 'Cumple' },
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 18, height: 'calc(100vh - 102px)' }}>
      <Card padded={false} style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: 14, borderBottom: '1px solid var(--slate-150)' }}>
          <div style={{ display: 'flex', gap: 4 }}>
            {[
              { v: 'todos', l: 'Todo' },
              { v: 'approval', l: 'Aprobar' },
              { v: 'sign', l: 'Firmar' },
              { v: 'mention', l: 'Menciones' },
            ].map(f => (
              <button key={f.v} onClick={() => setFilter(f.v)} style={{
                flex: 1, padding: '6px 8px', fontSize: 12, fontWeight: 600,
                background: filter === f.v ? 'var(--brand-100)' : 'transparent',
                color: filter === f.v ? 'var(--brand-700)' : 'var(--slate-600)',
                borderRadius: 'var(--r-sm)',
              }}>{f.l}</button>
            ))}
          </div>
        </div>
        <div style={{ flex: 1, overflow: 'auto' }}>
          {filtered.map(item => {
            const m = typeMeta[item.type];
            const active = selected?.id === item.id;
            return (
              <button key={item.id} onClick={() => setSelected(item)} style={{
                display: 'flex', flexDirection: 'column', width: '100%', textAlign: 'left',
                padding: '14px 16px', gap: 4,
                borderBottom: '1px solid var(--slate-100)',
                background: active ? 'var(--brand-50)' : (item.unread ? 'var(--white)' : 'var(--slate-50)'),
                borderLeft: active ? '3px solid var(--brand-600)' : '3px solid transparent',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Badge tone={m.c} style={{ padding: '2px 7px', fontSize: 10.5 }}>{m.i}{m.l}</Badge>
                  {item.unread && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--brand-600)' }}/>}
                  <div style={{ flex: 1 }}/>
                  <span style={{ fontSize: 11, color: 'var(--slate-500)' }}>{item.time}</span>
                </div>
                <div style={{ fontSize: 13.5, fontWeight: item.unread ? 700 : 600, color: 'var(--ink)' }}>{item.title}</div>
                <div style={{ fontSize: 12, color: 'var(--slate-500)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  <strong style={{ color: 'var(--slate-700)' }}>{item.from}:</strong> {item.detail}
                </div>
              </button>
            );
          })}
        </div>
      </Card>

      <Card padded={false} style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {selected && (
          <>
            <div style={{ padding: 24, borderBottom: '1px solid var(--slate-150)' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
                <div>
                  <Badge tone={typeMeta[selected.type].c} style={{ marginBottom: 10 }}>{typeMeta[selected.type].i}{typeMeta[selected.type].l}</Badge>
                  <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.015em', color: 'var(--ink)' }}>{selected.title}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
                    <Avatar name={selected.from} size={28}/>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{selected.from}</div>
                      <div style={{ fontSize: 12, color: 'var(--slate-500)' }}>{selected.time}</div>
                    </div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button style={{ width: 32, height: 32, borderRadius: 'var(--r-md)', border: '1px solid var(--slate-200)', color: 'var(--slate-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><IPaperclip size={15}/></button>
                  <button style={{ width: 32, height: 32, borderRadius: 'var(--r-md)', border: '1px solid var(--slate-200)', color: 'var(--slate-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><IMoreH size={15}/></button>
                </div>
              </div>
            </div>

            <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
              {selected.type === 'approval' && (
                <div>
                  <div style={{ fontSize: 14, color: 'var(--slate-700)', lineHeight: 1.6 }}>
                    {selected.from} ha solicitado una ausencia. Revisa los detalles y aprueba o rechaza la solicitud.
                  </div>
                  <Card style={{ marginTop: 18, background: 'var(--slate-50)' }}>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                      <KV label="Tipo" value="Vacaciones"/>
                      <KV label="Periodo" value={selected.detail}/>
                      <KV label="Aprobador" value="Marc Vives (tú)"/>
                      <KV label="Estado" value={<Badge tone="warning" dot>Pendiente</Badge>}/>
                    </div>
                    <Divider style={{ margin: '16px 0' }}/>
                    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--slate-500)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 8 }}>Motivo</div>
                    <div style={{ fontSize: 13.5, color: 'var(--slate-700)', lineHeight: 1.55 }}>Vacaciones de verano con mi familia. Cobertura prevista con Sofía y Dani durante mi ausencia.</div>
                  </Card>
                  <Card style={{ marginTop: 12, background: 'var(--warning-50)', border: '1px solid var(--warning-100)' }}>
                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                      <IFlag size={16} style={{ color: 'var(--warning-600)', marginTop: 2 }}/>
                      <div style={{ fontSize: 13, color: 'var(--slate-700)' }}>
                        <strong>Solapamiento:</strong> Berta Folch ya tiene vacaciones aprobadas del 14 al 22 ago. Tu equipo Implementación tendría 2 personas fuera la semana del 18 ago.
                      </div>
                    </div>
                  </Card>
                </div>
              )}
              {selected.type === 'sign' && (
                <div style={{ fontSize: 14, color: 'var(--slate-700)', lineHeight: 1.6 }}>
                  Necesitamos tu firma en la nueva <strong>Política de teletrabajo 2026</strong>. Vigencia desde el 1 de junio. Plazo para firmar: 25 de mayo.
                </div>
              )}
              {selected.type === 'mention' && (
                <div style={{ fontSize: 14, color: 'var(--slate-700)', lineHeight: 1.6 }}>
                  Núria Castells te ha mencionado en un anuncio del tablón sobre los cambios en el horario de verano.
                </div>
              )}
              {selected.type === 'reminder' && (
                <div style={{ fontSize: 14, color: 'var(--slate-700)', lineHeight: 1.6 }}>
                  No registraste tu fichaje de salida el viernes 9 de mayo. Por favor, regulariza el registro desde Control horario.
                </div>
              )}
              {selected.type === 'birthday' && (
                <div style={{ fontSize: 14, color: 'var(--slate-700)', lineHeight: 1.6 }}>
                  Mañana cumple años Sofía Marín. ¡No olvides felicitarla!
                </div>
              )}
            </div>

            {selected.action && (
              <div style={{ padding: '16px 24px', borderTop: '1px solid var(--slate-150)', display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
                {selected.action === 'approve' && (
                  <>
                    <Btn variant="secondary" icon={<IX size={14}/>}>Rechazar</Btn>
                    <Btn variant="success" icon={<ICheck size={14}/>}>Aprobar solicitud</Btn>
                  </>
                )}
                {selected.action === 'sign' && (
                  <Btn variant="primary" icon={<IPen size={14}/>}>Ir a firmar</Btn>
                )}
              </div>
            )}
          </>
        )}
      </Card>
    </div>
  );
};

Object.assign(window, { ScreenBandeja });