// fichaje.eu — Screen: Mis documentos (personal docs + digital signature)

const ScreenMisDocs = () => {
  const [signOpen, setSignOpen] = React.useState(false);
  const [filter, setFilter] = React.useState('todos');
  const filtered = filter === 'todos' ? MY_DOCS : MY_DOCS.filter(d => d.kind === filter);

  const kindMeta = {
    contract: { label: 'Contrato',   icon: <IBriefcase size={14}/>, tone: 'brand' },
    payslip:  { label: 'Nómina',     icon: <IFile size={14}/>,      tone: 'success' },
    policy:   { label: 'Política',   icon: <IShield size={14}/>,    tone: 'violet' },
    tax:      { label: 'Fiscal',     icon: <IFlag size={14}/>,      tone: 'warning' },
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 18 }}>
      <Card padded={false}>
        <div style={{ padding: 20, borderBottom: '1px solid var(--slate-150)', display: 'flex', alignItems: 'center', gap: 12, justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 17, fontWeight: 700 }}>Mis documentos</div>
            <div style={{ fontSize: 13, color: 'var(--slate-500)' }}>{MY_DOCS.length} documentos · 1 pendiente de firma</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn variant="secondary" size="sm" icon={<IUpload size={14}/>}>Subir</Btn>
            <Btn variant="secondary" size="sm" icon={<IDownload size={14}/>}>Descargar todo</Btn>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 4, padding: '12px 20px', borderBottom: '1px solid var(--slate-150)' }}>
          {[
            { v: 'todos', l: 'Todos', c: MY_DOCS.length },
            { v: 'contract', l: 'Contratos', c: MY_DOCS.filter(d => d.kind === 'contract').length },
            { v: 'payslip', l: 'Nóminas', c: MY_DOCS.filter(d => d.kind === 'payslip').length },
            { v: 'policy', l: 'Políticas', c: MY_DOCS.filter(d => d.kind === 'policy').length },
            { v: 'tax', l: 'Fiscal', c: MY_DOCS.filter(d => d.kind === 'tax').length },
          ].map(f => (
            <button key={f.v} onClick={() => setFilter(f.v)} style={{
              padding: '7px 12px',
              borderRadius: 'var(--r-md)',
              background: filter === f.v ? 'var(--slate-100)' : 'transparent',
              color: filter === f.v ? 'var(--ink)' : 'var(--slate-600)',
              fontSize: 13, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 7,
            }}>{f.l} <span style={{ fontSize: 11, color: 'var(--slate-500)' }}>{f.c}</span></button>
          ))}
        </div>

        <div>
          {filtered.map((d, i) => {
            const k = kindMeta[d.kind];
            return (
              <div key={d.id} style={{
                display: 'grid', gridTemplateColumns: '32px 1fr 120px 110px 100px auto',
                gap: 14, padding: '14px 20px',
                borderBottom: i < filtered.length - 1 ? '1px solid var(--slate-100)' : 'none',
                alignItems: 'center',
              }}>
                <div style={{
                  width: 32, 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: 9, fontWeight: 700, color: 'var(--danger-500)', letterSpacing: '0.04em',
                }}>PDF</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{d.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--slate-500)', marginTop: 2 }}>{d.size} · {d.date}</div>
                </div>
                <Badge tone={k.tone}>{k.icon}{k.label}</Badge>
                <Badge tone={d.status === 'firmado' ? 'success' : d.status === 'pendiente' ? 'warning' : 'slate'} dot>{d.status}</Badge>
                {d.status === 'pendiente' ? (
                  <Btn variant="primary" size="sm" icon={<IPen size={13}/>} onClick={() => setSignOpen(d)}>Firmar</Btn>
                ) : (
                  <Btn variant="secondary" size="sm" icon={<IDownload size={13}/>}>Descargar</Btn>
                )}
                <button style={{ color: 'var(--slate-400)', padding: 4 }}><IMoreH size={16}/></button>
              </div>
            );
          })}
        </div>
      </Card>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Card style={{ background: 'linear-gradient(135deg, var(--brand-50), var(--white))', border: '1px solid var(--brand-100)' }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div style={{
              width: 40, height: 40, borderRadius: 'var(--r-md)',
              background: 'var(--brand-600)', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}><IPen size={20}/></div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)' }}>Tienes 1 documento pendiente</div>
              <div style={{ fontSize: 13, color: 'var(--slate-600)', marginTop: 4, lineHeight: 1.5 }}>
                Política de teletrabajo 2026 — plazo hasta el <strong>25 may</strong>.
              </div>
              <Btn variant="primary" size="sm" style={{ marginTop: 12 }} icon={<IPen size={13}/>} onClick={() => setSignOpen(MY_DOCS[3])}>Firmar ahora</Btn>
            </div>
          </div>
        </Card>

        <Card>
          <SectionHead title="Espacio personal" subtitle="Almacenamiento seguro y privado"/>
          <ProgressBar value={42} max={100} color="var(--brand-600)"/>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 12, color: 'var(--slate-500)' }}>
            <span>1.2 GB usados</span><span>de 3 GB</span>
          </div>
          <Divider style={{ margin: '14px 0' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: 'var(--slate-600)' }}>
            <ILock size={14} style={{ color: 'var(--brand-600)' }}/>
            <span>Cifrado AES-256 · Solo tú y RRHH tenéis acceso.</span>
          </div>
        </Card>

        <Card>
          <SectionHead title="Firmas recientes"/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
            {[
              { name: 'Anexo dietas comercial', date: '12 ene 2026' },
              { name: 'Acuerdo de confidencialidad', date: '04 mar 2024' },
              { name: 'Contrato indefinido', date: '04 mar 2024' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: i ? 11 : 0, borderTop: i ? '1px solid var(--slate-100)' : 'none' }}>
                <div style={{ width: 28, height: 28, borderRadius: 999, background: 'var(--success-50)', color: 'var(--success-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><ICheck size={14}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{s.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--slate-500)' }}>Firmado el {s.date}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {signOpen && <SignModal doc={signOpen} onClose={() => setSignOpen(false)}/>}
    </div>
  );
};

const SignModal = ({ doc, onClose }) => {
  const [signed, setSigned] = React.useState(false);
  const [signature, setSignature] = React.useState('');

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 50 }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 'var(--r-xl)', width: 720, maxHeight: '85vh', overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-lg)' }}>
        <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--slate-150)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 700 }}>Firmar documento</div>
            <div style={{ fontSize: 12, color: 'var(--slate-500)', marginTop: 2 }}>{doc.name}</div>
          </div>
          <button onClick={onClose} style={{ color: 'var(--slate-500)', padding: 6 }}><IX size={18}/></button>
        </div>

        <div style={{ flex: 1, overflow: 'auto', padding: 24, background: 'var(--slate-50)' }}>
          {/* Fake document preview */}
          <div style={{ background: '#fff', padding: 36, borderRadius: 'var(--r-md)', boxShadow: 'var(--shadow-md)', fontSize: 13, lineHeight: 1.6, color: 'var(--slate-700)' }}>
            <div style={{ textAlign: 'center', marginBottom: 22 }}>
              <FichajeLogo size={20}/>
            </div>
            <div style={{ fontSize: 19, fontWeight: 700, color: 'var(--ink)', marginBottom: 4, textAlign: 'center' }}>Política de Teletrabajo 2026</div>
            <div style={{ fontSize: 12, color: 'var(--slate-500)', textAlign: 'center', marginBottom: 24 }}>IABusiness.es · v2.1 · Vigencia desde el 1 jun 2026</div>
            <p style={{ margin: 0 }}>La presente política establece el marco de teletrabajo aplicable a todos los empleados de IABusiness.es con contrato indefinido o temporal de duración superior a 6 meses.</p>
            <p>El empleado podrá teletrabajar hasta <strong>3 días por semana</strong>, comunicando con antelación al manager directo los días previstos. La empresa proporcionará el equipo informático necesario y una <strong>compensación mensual de 35€</strong> en concepto de gastos de conectividad y suministros.</p>
            <p>Los días de teletrabajo deberán fichar en la aplicación oficial fichaje.eu, manteniendo el horario laboral acordado y atendiendo a las reuniones programadas con normalidad…</p>
            <div style={{ marginTop: 30, padding: 16, background: 'var(--brand-50)', borderRadius: 'var(--r-md)', border: '1px dashed var(--brand-300)' }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--brand-700)' }}>FIRMA DEL EMPLEADO</div>
              <div style={{ fontFamily: 'cursive', fontStyle: 'italic', fontSize: 24, color: signed ? 'var(--ink)' : 'var(--slate-300)', minHeight: 40, marginTop: 8 }}>
                {signed ? (signature || 'Marc Vives') : '— Pendiente de firma —'}
              </div>
              {signed && <div style={{ fontSize: 11, color: 'var(--slate-500)', marginTop: 6 }}>Firmado el 13 may 2026, 14:52 · IP 81.34.x.x · Cert. digital fichaje.eu</div>}
            </div>
          </div>
        </div>

        <div style={{ padding: '16px 24px', borderTop: '1px solid var(--slate-150)' }}>
          {!signed ? (
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <Field label="Escribe tu nombre completo para firmar" required>
                <Input value={signature} onChange={e => setSignature(e.target.value)} placeholder="Marc Vives" style={{ fontFamily: 'cursive', fontSize: 16 }}/>
              </Field>
              <div style={{ flex: 1 }}/>
              <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
              <Btn variant="primary" icon={<IPen size={14}/>} onClick={() => setSigned(true)}>Firmar digitalmente</Btn>
            </div>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--success-600)' }}>
                <ICheck size={18}/><span style={{ fontWeight: 700 }}>Documento firmado correctamente</span>
              </div>
              <div style={{ flex: 1 }}/>
              <Btn variant="secondary" icon={<IDownload size={14}/>}>Descargar copia</Btn>
              <Btn variant="primary" onClick={onClose}>Cerrar</Btn>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenMisDocs });