// fichaje.eu — Screen: Perfil

const ScreenPerfil = () => {
  const [tab, setTab] = React.useState('personal');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <Card padded={false} style={{ overflow: 'hidden', border: 'none' }}>
        <div style={{
          padding: '26px 28px 24px',
          background: 'linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 50%, var(--brand-600) 100%)',
          position: 'relative',
          color: '#fff',
        }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.18, backgroundImage: 'radial-gradient(circle at 85% -20%, #fff 0, transparent 45%), radial-gradient(circle at 10% 120%, #fff 0, transparent 35%)', pointerEvents: 'none' }}/>
          <button style={{
            position: 'absolute', top: 18, right: 18,
            padding: '7px 14px', borderRadius: 'var(--r-md)',
            background: 'rgba(255,255,255,0.14)', color: '#fff',
            border: '1px solid rgba(255,255,255,0.28)',
            fontSize: 12.5, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 6,
            backdropFilter: 'blur(8px)',
            zIndex: 1,
          }}><IEdit size={13}/> Editar perfil</button>

          <div style={{ display: 'flex', alignItems: 'center', gap: 22, position: 'relative' }}>
            <div style={{
              width: 88, height: 88, borderRadius: 22,
              background: 'rgba(255,255,255,0.14)',
              color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 30, fontWeight: 700,
              border: '1px solid rgba(255,255,255,0.28)',
              backdropFilter: 'blur(8px)',
              flexShrink: 0,
            }}>
              {ME.name.split(' ').map(p => p[0]).join('')}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                <Badge tone="success" dot style={{ background: 'rgba(16,185,129,0.18)', color: '#A7F3D0', border: '1px solid rgba(16,185,129,0.3)' }}>Fichado · 04:43 hoy</Badge>
                <span style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', letterSpacing: '.08em' }}>#IAB-008</span>
              </div>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.022em', color: '#fff' }}>{ME.name}</div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.82)', marginTop: 2 }}>
                {ME.role} · <span style={{ color: 'rgba(255,255,255,0.65)' }}>{ME.team}</span>
              </div>
              <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 12.5, color: 'rgba(255,255,255,0.78)', flexWrap: 'wrap' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><IMail size={13}/> {ME.email}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><IMapPin size={13}/> {ME.location}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><ICalendar size={13}/> Desde mar 2024 · 1a 2m</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><IUsers size={13}/> Reporta a {ME.manager}</span>
              </div>
            </div>
          </div>
        </div>
      </Card>

      <Tabs tabs={[
        { value: 'personal', label: 'Datos personales' },
        { value: 'laboral',  label: 'Datos laborales' },
        { value: 'compensacion', label: 'Compensación' },
        { value: 'docs',     label: 'Mis documentos' },
        { value: 'familia',  label: 'Familia y emergencia' },
      ]} value={tab} onChange={setTab}/>

      {tab === 'personal' && (
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 18 }}>
          <Card>
            <SectionHead title="Información personal" action={<Btn variant="ghost" size="sm" icon={<IEdit size={13}/>}>Editar</Btn>}/>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
              <KV label="Nombre completo" value={ME.name}/>
              <KV label="DNI" value="47892331-K" mono/>
              <KV label="Fecha de nacimiento" value="14 ago 1992"/>
              <KV label="Nacionalidad" value="Española"/>
              <KV label="Email personal" value="marc.vives@gmail.com"/>
              <KV label="Teléfono" value={ME.phone} mono/>
              <KV label="Dirección" value="C/ Sorní 14, 3º 2ª"/>
              <KV label="Ciudad" value="Valencia, 46004"/>
            </div>
          </Card>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Card>
              <SectionHead title="Cuenta y seguridad"/>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <Row icon={<ILock size={16}/>} title="Contraseña" detail="Cambiada hace 3 meses" action="Cambiar"/>
                <Row icon={<IShield size={16}/>} title="2FA" detail="Authenticator app" badge={<Badge tone="success">Activo</Badge>}/>
                <Row icon={<IPhone size={16}/>} title="Sesiones activas" detail="3 dispositivos"/>
              </div>
            </Card>
            <Card>
              <SectionHead title="Preferencias"/>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <Row icon={<IGlobe size={16}/>} title="Idioma" detail="Español"/>
                <Row icon={<IClock size={16}/>} title="Zona horaria" detail="Europe/Madrid"/>
                <Row icon={<IMoon size={16}/>} title="Modo oscuro" badge={<Toggle/>}/>
              </div>
            </Card>
          </div>
        </div>
      )}

      {tab === 'laboral' && (
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 18 }}>
          <Card>
            <SectionHead title="Información laboral"/>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
              <KV label="Puesto" value={ME.role}/>
              <KV label="Equipo" value={ME.team}/>
              <KV label="Manager" value={ME.manager}/>
              <KV label="Tipo de contrato" value={ME.contract}/>
              <KV label="Inicio del contrato" value="4 mar 2024"/>
              <KV label="Centro de trabajo" value="Valencia · Remoto"/>
              <KV label="Horario" value={ME.schedule}/>
              <KV label="Nº empleado" value="IAB-008" mono/>
            </div>
          </Card>
          <Card>
            <SectionHead title="Tu manager"/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
              <Avatar name={ME.manager} size={48}/>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700 }}>{ME.manager}</div>
                <div style={{ fontSize: 13, color: 'var(--slate-500)' }}>CTO</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Btn variant="secondary" size="sm" icon={<IMail size={13}/>} style={{ flex: 1 }}>Email</Btn>
              <Btn variant="secondary" size="sm" icon={<ICalendar size={13}/>} style={{ flex: 1 }}>Reunión</Btn>
            </div>
          </Card>
        </div>
      )}

      {tab === 'compensacion' && (
        <Card>
          <SectionHead title="Compensación" subtitle="Información confidencial — solo visible para ti y RRHH"/>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 22 }}>
            <KV label="Salario bruto anual" value="42.500 €"/>
            <KV label="Pagas" value="14 (julio + diciembre)"/>
            <KV label="Variable objetivo" value="3.000 €"/>
            <KV label="IBAN" value="ES** **** **** **** ****" mono/>
            <KV label="Categoría profesional" value="Grupo 3"/>
            <KV label="Convenio" value="Consultoría TIC"/>
          </div>
        </Card>
      )}

      {tab === 'docs' && (
        <Card>
          <SectionHead title="Documentos personales" action={<Btn variant="primary" size="sm" icon={<IUpload size={13}/>}>Subir documento</Btn>}/>
          <div style={{ fontSize: 13, color: 'var(--slate-500)' }}>Tus documentos: contratos, nóminas, certificados, etc. Visibles en la sección <strong>Mis documentos</strong>.</div>
        </Card>
      )}

      {tab === 'familia' && (
        <Card>
          <SectionHead title="Contacto de emergencia"/>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
            <KV label="Nombre" value="Anna Vives"/>
            <KV label="Relación" value="Hermana"/>
            <KV label="Teléfono" value="+34 612 33 44 55" mono/>
            <KV label="Idioma" value="Español, catalán"/>
          </div>
        </Card>
      )}
    </div>
  );
};

const Row = ({ icon, title, detail, action, badge }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderTop: '1px solid var(--slate-100)' }}>
    <div style={{ width: 32, height: 32, borderRadius: 'var(--r-sm)', background: 'var(--slate-100)', color: 'var(--slate-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</div>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{title}</div>
      {detail && <div style={{ fontSize: 12, color: 'var(--slate-500)' }}>{detail}</div>}
    </div>
    {badge}
    {action && <button style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--brand-600)' }}>{action}</button>}
  </div>
);

const Toggle = ({ defaultOn = false }) => {
  const [on, setOn] = React.useState(defaultOn);
  return (
    <button onClick={() => setOn(!on)} style={{
      width: 36, height: 20, borderRadius: 999,
      background: on ? 'var(--brand-600)' : 'var(--slate-300)',
      position: 'relative', transition: 'background .2s',
    }}>
      <span style={{
        position: 'absolute', top: 2, left: on ? 18 : 2,
        width: 16, height: 16, borderRadius: 999, background: '#fff',
        transition: 'left .2s', boxShadow: '0 1px 2px rgba(0,0,0,0.2)',
      }}/>
    </button>
  );
};

Object.assign(window, { ScreenPerfil, Row, Toggle });