// fichaje.eu — Screen: Control horario (admin — editable time report)

const ScreenControl = () => {
  const [employee, setEmployee] = React.useState(TEAM[2]); // Marc by default
  const [editing, setEditing] = React.useState(null);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* Stats row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <Stat label="Horas registradas (semana)" value="847h" delta="+24h vs anterior" tone="brand" icon={<IClock size={18}/>}/>
        <Stat label="Saldo medio" value="+38m" delta="por persona" tone="success" icon={<ITrending size={18}/>}/>
        <Stat label="Incidencias" value="2" delta="—1 vs anterior" tone="warning" icon={<IFlag size={18}/>}/>
        <Stat label="Fichajes editados" value="6" delta="por managers" tone="violet" icon={<IEdit size={18}/>}/>
      </div>

      <Card padded={false}>
        <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--slate-150)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <button style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--slate-50)' }}><IChevronLeft size={15}/></button>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Semana 20 · 11–17 mayo 2026</div>
            <button style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--slate-50)' }}><IChevronRight size={15}/></button>
          </div>
          <Divider vertical style={{ height: 24 }}/>
          <select style={{ padding: '7px 10px', fontSize: 13, fontWeight: 600, border: '1px solid var(--slate-200)', borderRadius: 'var(--r-md)', background: '#fff' }}>
            <option>Todos los equipos</option>
            <option>Implementación</option>
            <option>Plataforma</option>
            <option>Comercial</option>
          </select>
          <div style={{ flex: 1 }}/>
          <Btn variant="ghost" size="sm" icon={<IFilter size={14}/>}>Filtros</Btn>
          <Btn variant="secondary" size="sm" icon={<IDownload size={14}/>}>Exportar CSV</Btn>
        </div>

        {/* Employee selector + week */}
        <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr' }}>
          <div style={{ borderRight: '1px solid var(--slate-150)', maxHeight: 580, overflow: 'auto' }}>
            {TEAM.map(p => {
              const active = employee.name === p.name;
              return (
                <button key={p.name} onClick={() => setEmployee(p)} style={{
                  display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left',
                  padding: '12px 16px',
                  borderBottom: '1px solid var(--slate-100)',
                  background: active ? 'var(--brand-50)' : 'transparent',
                  borderLeft: active ? '3px solid var(--brand-600)' : '3px solid transparent',
                }}>
                  <Avatar name={p.name} size={32}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{p.name}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--slate-500)' }}>{p.team} · 39h 12m</div>
                  </div>
                  <span style={{ width: 7, height: 7, borderRadius: 999, background: p.status === 'fichado' ? 'var(--success-500)' : p.status === 'pausa' ? 'var(--warning-500)' : p.status === 'vacaciones' ? 'var(--brand-400)' : 'var(--slate-300)' }}/>
                </button>
              );
            })}
          </div>

          <div>
            {/* Employee header */}
            <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--slate-150)', display: 'flex', alignItems: 'center', gap: 14 }}>
              <Avatar name={employee.name} size={44}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{employee.name}</div>
                <div style={{ fontSize: 13, color: 'var(--slate-500)' }}>{employee.role} · {employee.team}</div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, auto)', gap: 22 }}>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--slate-500)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>Trabajadas</div>
                  <div className="mono tnum" style={{ fontSize: 18, fontWeight: 700 }}>20h 38m</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--slate-500)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>Previstas</div>
                  <div className="mono tnum" style={{ fontSize: 18, fontWeight: 700 }}>24h</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--slate-500)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>Saldo</div>
                  <div className="mono tnum" style={{ fontSize: 18, fontWeight: 700, color: 'var(--success-600)' }}>+1h 14m</div>
                </div>
              </div>
              <Btn variant="secondary" size="sm" icon={<IPlus size={13}/>}>Añadir fichaje</Btn>
            </div>

            {/* Day rows */}
            <div>
              <div style={{ display: 'grid', gridTemplateColumns: '120px 100px 100px 100px 1fr 90px 90px 70px', padding: '10px 24px', fontSize: 11, fontWeight: 700, color: 'var(--slate-500)', textTransform: 'uppercase', letterSpacing: '.06em', borderBottom: '1px solid var(--slate-150)' }}>
                <div>Día</div><div>Entrada</div><div>Salida</div><div>Pausas</div><div>Visual</div><div>Trabajado</div><div>Saldo</div><div>Estado</div>
              </div>
              {TIME_REPORT.map((r, i) => {
                const live = r.status === 'live';
                const future = r.status === 'future';
                const edited = r.status === 'edited';
                const balance = (r.worked - r.expected);
                return (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '120px 100px 100px 100px 1fr 90px 90px 70px', padding: '12px 24px', borderBottom: '1px solid var(--slate-100)', alignItems: 'center', fontSize: 13.5, background: live ? 'var(--brand-50)' : (future ? 'var(--slate-50)' : 'transparent') }}>
                    <div style={{ fontWeight: 600, color: 'var(--ink)' }}>{r.day}</div>
                    <div className="mono">{r.in}</div>
                    <div className="mono" style={{ color: live ? 'var(--brand-600)' : 'var(--slate-700)' }}>{live ? <Badge tone="brand" dot>En curso</Badge> : r.out}</div>
                    <div className="mono">{r.breaks > 0 ? `${r.breaks} min` : '—'}</div>
                    <div style={{ paddingRight: 12 }}>
                      {!future && (
                        <div style={{ position: 'relative', height: 14, background: 'var(--slate-100)', borderRadius: 4, overflow: 'hidden' }}>
                          <div style={{ position: 'absolute', left: '0%', width: `${(r.worked / 9) * 100}%`, height: '100%', background: live ? 'var(--brand-500)' : edited ? 'var(--violet-500)' : 'var(--brand-400)', borderRadius: 4 }}/>
                          <div style={{ position: 'absolute', left: `${(8/9)*100}%`, top: -2, bottom: -2, width: 1.5, background: 'var(--slate-700)' }}/>
                        </div>
                      )}
                    </div>
                    <div className="mono tnum" style={{ fontWeight: 600 }}>{future ? '—' : `${Math.floor(r.worked)}h ${Math.round((r.worked - Math.floor(r.worked)) * 60)}m`}</div>
                    <div className="mono tnum" style={{ fontWeight: 600, color: future ? 'var(--slate-400)' : balance >= 0 ? 'var(--success-600)' : 'var(--danger-600)' }}>
                      {future ? '—' : `${balance >= 0 ? '+' : ''}${Math.round(balance * 60)}m`}
                    </div>
                    <div>
                      {live && <Badge tone="brand" dot>Hoy</Badge>}
                      {edited && <Badge tone="violet">Editado</Badge>}
                      {r.status === 'ok' && <span style={{ color: 'var(--success-600)' }}><ICheck size={16}/></span>}
                      {future && <span style={{ color: 'var(--slate-300)', fontSize: 12 }}>—</span>}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Day detail (editable) */}
            <div style={{ padding: 24, background: 'var(--slate-50)', borderTop: '1px solid var(--slate-150)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>Detalle del martes 12 mayo · <span style={{ color: 'var(--violet-600)' }}>editado por Núria Castells</span></div>
                <Btn variant="ghost" size="sm" icon={<IPlus size={13}/>}>Añadir entrada</Btn>
              </div>
              <div style={{ background: '#fff', borderRadius: 'var(--r-md)', border: '1px solid var(--slate-150)', padding: 4 }}>
                {[
                  { type: 'in',    time: '09:12', label: 'Entrada' },
                  { type: 'pause', time: '11:30', label: 'Pausa café', duration: 14 },
                  { type: 'in',    time: '11:44', label: 'Reanudación' },
                  { type: 'pause', time: '14:05', label: 'Comida', duration: 45 },
                  { type: 'in',    time: '14:50', label: 'Reanudación' },
                  { type: 'out',   time: '17:30', label: 'Salida', edited: true },
                ].map((p, i, arr) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '32px 110px 1fr 110px 32px', alignItems: 'center', gap: 12, padding: '10px 12px', borderBottom: i < arr.length - 1 ? '1px solid var(--slate-100)' : 'none' }}>
                    <div style={{ width: 24, height: 24, borderRadius: 999, background: p.type === 'in' ? 'var(--success-50)' : p.type === 'out' ? 'var(--slate-100)' : 'var(--warning-50)', color: p.type === 'in' ? 'var(--success-600)' : p.type === 'out' ? 'var(--slate-700)' : 'var(--warning-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                      {p.type === 'in' ? <IPlay size={11}/> : p.type === 'out' ? <IStop size={11}/> : <IPause size={11}/>}
                    </div>
                    <input className="mono" defaultValue={p.time} style={{ padding: '6px 10px', fontSize: 13, fontWeight: 600, border: '1px solid var(--slate-200)', borderRadius: 'var(--r-sm)', background: '#fff', width: 90 }}/>
                    <div style={{ fontSize: 13, color: 'var(--slate-700)', display: 'flex', alignItems: 'center', gap: 8 }}>
                      {p.label}
                      {p.edited && <Badge tone="violet">Editado por Núria</Badge>}
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--slate-500)' }}>{p.duration ? `${p.duration} min` : '—'}</div>
                    <button style={{ color: 'var(--slate-400)', padding: 4 }}><ITrash size={14}/></button>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 10, marginTop: 14 }}>
                <Btn variant="ghost" size="sm">Descartar</Btn>
                <Btn variant="primary" size="sm" icon={<ICheck size={13}/>}>Guardar cambios</Btn>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

Object.assign(window, { ScreenControl });