// src/screen-cuenta.jsx — PROPUESTA DE NAVEGABILIDAD: tu cuenta (2026-09-21).
//
// El problema que resuelve: el motor YA sabe quién es el agente —la cuenta de
// Google está conectada, con su correo y sus permisos— y la interfaz enseña un
// `{ nombre: 'Agente', despacho: 'Despacho local' }` clavado a mano. La identidad
// existe y no tiene dónde verse ni dónde manejarse.
//
// Dos decisiones que esta pantalla propone:
//
//   1. «CREAR UNA CUENTA» NO ES CREAR UN SERVIDOR. El agente entra con su cuenta
//      de Google, su nombre y su correo salen en lo que Piixi redacta, y la
//      cartera SIGUE viviendo cifrada en su computadora. La pantalla lo dice en
//      voz alta, porque es la promesa que sostiene todo lo demás.
//   2. CADA PERMISO SE EXPLICA POR LO QUE HACE Y POR LO QUE NO PUEDE HACER. Un
//      permiso de Google descrito como «gmail.send» no le dice nada a un agente;
//      «puede mandar correos a tu nombre, y no puede leer tu bandeja» sí.

const CUENTA_PERMISOS = [
  {
    id: 'identidad',
    icono: 'user',
    titulo: 'Saber quién eres',
    puede: 'Tu nombre y tu correo, para firmar lo que Piixi redacta.',
    noPuede: 'No ve tu contraseña ni entra a tu cuenta.',
    concedido: true,
  },
  {
    id: 'contactos',
    icono: 'phone',
    titulo: 'Leer tus contactos',
    puede: 'Cruzar tu libreta con tu cartera para saber por dónde localizar a cada asegurado.',
    noPuede: 'Sólo lee. No agrega, no borra y no modifica ningún contacto tuyo.',
    concedido: true,
  },
  {
    id: 'enviar',
    icono: 'mail',
    titulo: 'Enviar correo a tu nombre',
    puede: 'Entregar el aviso que tú apruebes, desde tu propia dirección.',
    noPuede: 'No puede leer tu bandeja de entrada. Y no manda nada sin que tú lo apruebes.',
    concedido: true,
  },
];

function CuentaScreen() {
  const { state, pushToast } = useAxStore();
  const { navigate } = useHashRoute();
  const [desconectando, setDesconectando] = useState(false);

  return (
    <div style={{ flex: 1, overflow: 'auto' }}>
      <AxPageHeader
        eyebrow="Tu cuenta"
        title={state.user.name}
        subtitle="Quién eres para Piixi, con qué cuenta entras y dónde viven tus datos."
      />

      <div style={{ padding: '20px 32px 40px', display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 860 }}>

        {/* ── Identidad ─────────────────────────────────────────── */}
        <CuentaTarjeta titulo="Identidad" icono="user"
          nota="Esto es lo que aparece en cada aviso que Piixi redacta por ti.">
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <AxAvatar name={state.user.name} size={44}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 15, color: 'var(--ax-fg-strong)', fontWeight: 500 }}>{state.user.name}</div>
              <div style={{ marginTop: 2, fontSize: 12, color: 'var(--ax-fg-muted)' }}>{state.user.orgName}</div>
            </div>
            <AxButton variant="secondary" size="sm" icon="edit">Editar</AxButton>
          </div>

          <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <CuentaDato etiqueta="Cédula" valor="A-0148927" pill={<AxPill tone="accent" dot>Vigente</AxPill>}/>
            <CuentaDato etiqueta="Vence" valor="14 de marzo de 2028"/>
          </div>

          <div style={{ marginTop: 12 }}>
            <AxButton variant="tertiary" size="sm" iconRight="arrow-right" onClick={() => navigate('/ajustes/machotes/diseno')}>
              Personalizar cómo se ven y suenan tus avisos
            </AxButton>
          </div>
        </CuentaTarjeta>

        {/* ── Cuenta de Google ──────────────────────────────────── */}
        <CuentaTarjeta titulo="Cuenta de Google" icono="cloud"
          nota="La cuenta con la que entras a Piixi y desde la que entregas los avisos."
          derecha={<AxPill tone="accent" dot>Conectada</AxPill>}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            background: 'var(--ax-bg-3)', border: '1px solid var(--ax-border)',
            borderRadius: 6, padding: '12px 14px',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
              background: 'var(--ax-accent-soft)', border: '1px solid var(--ax-accent-line)',
              color: 'var(--ax-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><AxIcon name="mail" size={15}/></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)' }}>{state.user.email}</div>
              <div style={{ marginTop: 2, fontSize: 11, color: 'var(--ax-fg-faint)' }}>
                Conectada desde el 21 de septiembre de 2026
              </div>
            </div>
            <AxButton variant="tertiary" size="sm" onClick={() => setDesconectando(true)}>Desconectar</AxButton>
          </div>

          <div style={{ marginTop: 14 }}>
            <AxEyebrow style={{ marginBottom: 8 }}>Qué le permitiste</AxEyebrow>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {CUENTA_PERMISOS.map((p) => <CuentaPermiso key={p.id} permiso={p}/>)}
            </div>
          </div>
        </CuentaTarjeta>

        {/* ── Dónde viven tus datos ─────────────────────────────── */}
        <CuentaTarjeta titulo="Dónde viven tus datos" icono="shield"
          nota="La promesa que sostiene todo lo demás.">
          <div style={{
            background: 'var(--ax-accent-soft)', border: '1px solid var(--ax-accent-line)',
            borderRadius: 6, padding: '12px 14px', fontSize: 13, color: 'var(--ax-fg)', lineHeight: 1.65,
          }}>
            Tu cartera vive <span style={{ color: 'var(--ax-fg-strong)' }}>cifrada, en esta computadora</span>.
            Entrar con Google te identifica; no manda tu cartera a ningún servidor, ni al nuestro ni al de Google.
          </div>

          <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <CuentaDato etiqueta="Pólizas en esta computadora" valor="738"/>
            <CuentaDato etiqueta="Última verificación" valor="Hoy · sin fallas"/>
          </div>

          <div style={{
            marginTop: 12, display: 'flex', alignItems: 'flex-start', gap: 10,
            border: '1px solid var(--ax-warm-line)', background: 'var(--ax-warm-soft)',
            borderRadius: 6, padding: '12px 14px',
          }}>
            <AxIcon name="alert" size={15} style={{ color: 'var(--ax-warm)', flexShrink: 0, marginTop: 1 }}/>
            <div style={{ flex: 1, fontSize: 12, color: 'var(--ax-fg)', lineHeight: 1.6 }}>
              <span style={{ color: 'var(--ax-fg-strong)' }}>Lo que eso cuesta: </span>
              hoy no hay respaldo. Si esta computadora se descompone, la cartera se pierde.
              Respaldar y restaurar es la contraparte honesta de guardar todo aquí.
              <div style={{ marginTop: 8 }}>
                <AxButton variant="secondary" size="sm" icon="cloud" disabled>
                  Configurar respaldo · aún no disponible
                </AxButton>
              </div>
            </div>
          </div>
        </CuentaTarjeta>

        {/* ── Sesión ────────────────────────────────────────────── */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <AxButton variant="tertiary" onClick={() => (window.location.hash = '/signin')}>
            Cerrar sesión
          </AxButton>
        </div>
      </div>

      <AxModal
        open={desconectando}
        onClose={() => setDesconectando(false)}
        title="Desconectar tu cuenta de Google"
        footer={
          <>
            <AxButton variant="tertiary" onClick={() => setDesconectando(false)}>Cancelar</AxButton>
            <AxButton variant="danger" onClick={() => {
              setDesconectando(false);
              pushToast({ kind: 'warn', message: 'Cuenta desconectada. Tu cartera sigue completa en esta computadora.' });
            }}>Desconectar</AxButton>
          </>
        }
      >
        <div style={{ fontSize: 13, color: 'var(--ax-fg)', lineHeight: 1.7 }}>
          Tu cartera <span style={{ color: 'var(--ax-fg-strong)' }}>no se toca</span>: sigue completa y cifrada
          en esta computadora.
          <div style={{ marginTop: 10 }}>Lo que dejas de poder hacer hasta que la vuelvas a conectar:</div>
          <ul style={{ margin: '8px 0 0', paddingLeft: 18, color: 'var(--ax-fg-muted)' }}>
            <li style={{ marginBottom: 4 }}>Entregar avisos por correo desde tu dirección.</li>
            <li>Cruzar tu libreta de contactos con tu cartera.</li>
          </ul>
        </div>
      </AxModal>
    </div>
  );
}

function CuentaTarjeta({ titulo, icono, nota, derecha, children }) {
  return (
    <div style={{
      border: '1px solid var(--ax-border-strong)', borderRadius: 8,
      background: 'var(--ax-bg-1)', overflow: 'hidden',
    }}>
      <div style={{
        padding: '12px 16px', borderBottom: '1px solid var(--ax-border)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <AxIcon name={icono} size={14} style={{ color: 'var(--ax-fg-muted)' }}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)', fontWeight: 500 }}>{titulo}</div>
          {nota ? <div style={{ marginTop: 2, fontSize: 11, color: 'var(--ax-fg-faint)' }}>{nota}</div> : null}
        </div>
        {derecha}
      </div>
      <div style={{ padding: 16 }}>{children}</div>
    </div>
  );
}

function CuentaDato({ etiqueta, valor, pill }) {
  return (
    <div>
      <div className="ax-mono" style={{
        fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase',
        color: 'var(--ax-fg-faint)',
      }}>{etiqueta}</div>
      <div style={{ marginTop: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontSize: 13, color: 'var(--ax-fg-strong)' }}>{valor}</span>
        {pill}
      </div>
    </div>
  );
}

function CuentaPermiso({ permiso: p }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 11,
      border: '1px solid var(--ax-border)', borderRadius: 6,
      padding: '11px 13px', background: 'var(--ax-bg-2)',
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: 5, flexShrink: 0,
        background: 'var(--ax-bg-3)', border: '1px solid var(--ax-border-strong)',
        color: 'var(--ax-fg-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><AxIcon name={p.icono} size={13}/></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 13, color: 'var(--ax-fg-strong)' }}>{p.titulo}</span>
          {p.concedido ? <AxIcon name="check" size={12} style={{ color: 'var(--ax-accent)' }}/> : null}
        </div>
        <div style={{ marginTop: 3, fontSize: 12, color: 'var(--ax-fg-muted)', lineHeight: 1.55 }}>{p.puede}</div>
        <div style={{ marginTop: 3, fontSize: 12, color: 'var(--ax-fg-faint)', lineHeight: 1.55 }}>{p.noPuede}</div>
      </div>
    </div>
  );
}

Object.assign(window, { CuentaScreen });