/**
 * TrendApp — Perfil (§12) + modal Instalar aplicativo (§7.3)
 *
 * Elementos:
 *   Avatar, nome, e-mail fictícios
 *   Identificação do representante vinculado
 *   Item Instalar aplicativo
 *   Item Falar com suporte
 *   Item Termos de uso e privacidade
 *   Versão fictícia
 *   Ação Sair (visual apenas)
 */

// (React hooks declarados uma vez em logo.jsx)

function PerfilScreen({ payload }) {
  const { go } = useRouter();
  const [installOpen, setInstallOpen] = useState(false);
  const [sairOpen, setSairOpen] = useState(false);
  const { usuario } = payload;
  useLucide();

  return (
    <div className="page tab-fade">
      <div className="page-body" style={{ paddingTop: 0 }}>
        <HeroHeader
          eyebrow={usuario.email}
          title={usuario.nome}
          subtitle={usuario.vinculado}
          minHeight={240}
          avatar={usuario.nome}
          action={{
            icon: 'settings',
            ariaLabel: 'Configurações',
            onClick: () => alert('Configurações — apenas visual no protótipo'),
          }}
        />

        <div className="stack" style={{ paddingTop: 8 }}>
          {/* Grupo de ações */}
          <Section title="Aplicativo">
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <MenuItem icon="download" label="Instalar aplicativo" description="Adicionar à tela de início" onClick={() => setInstallOpen(true)} />
              <MenuDivider />
              <MenuItem icon="user-round" label="Meus dados" description="Nome, e-mail e preferências" onClick={() => alert('Meus dados — apenas visual no protótipo')} />
            </div>
          </Section>

          <Section title="Ajuda">
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <MenuItem icon="life-buoy" label="Falar com suporte" description="Tirar dúvidas com nossa equipe" onClick={() => alert('Suporte — apenas visual no protótipo')} />
              <MenuDivider />
              <MenuItem icon="shield-check" label="Termos e privacidade" description="Políticas de uso do TrendApp" onClick={() => alert('Termos — apenas visual no protótipo')} />
            </div>
          </Section>

          {/* Sair */}
          <button className="btn secondary block" style={{ marginTop: 4, color: 'var(--destructive)' }} onClick={() => setSairOpen(true)}>
            <Icon name="log-out" size={16} />
            Sair
          </button>

          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--muted-foreground)', padding: '8px 0' }}>
            TrendApp <span className="tabnum">v0.1.0</span> · protótipo visual
          </div>
        </div>
      </div>

      {/* Instalar */}
      <Sheet open={installOpen} onClose={() => setInstallOpen(false)} title="Instale o TrendApp">
        <div style={{ fontSize: 14, color: 'var(--muted-foreground)', lineHeight: 1.5, marginBottom: 16 }}>
          Adicione o TrendApp à tela de início para abrir com um toque e receber atualizações em tempo real.
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 20 }}>
          <InstallGuide os="iOS" instructions="Toque em Compartilhar e depois em “Adicionar à Tela de Início”." iconName="apple" />
          <InstallGuide os="Android" instructions="No menu do navegador, toque em “Instalar aplicativo” ou “Adicionar à tela inicial”." iconName="smartphone" />
        </div>
        <button className="btn secondary block" onClick={() => setInstallOpen(false)}>Agora não</button>
      </Sheet>

      {/* Sair confirmação */}
      <Sheet open={sairOpen} onClose={() => setSairOpen(false)} title="Sair da sua conta?">
        <div style={{ fontSize: 14, color: 'var(--muted-foreground)', lineHeight: 1.5, marginBottom: 20 }}>
          Você precisará entrar novamente para acessar o TrendApp.
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn secondary" style={{ flex: 1 }} onClick={() => setSairOpen(false)}>Cancelar</button>
          <button
            className="btn primary" style={{ flex: 1, background: 'var(--destructive)' }}
            onClick={() => { setSairOpen(false); localStorage.removeItem('trendapp:tweaks:v1'); go('/welcome', { replace: true }); }}
          >
            Sair
          </button>
        </div>
      </Sheet>
    </div>
  );
}

// ─── MenuItem ──────────────────────────────────────────────────────────────
function MenuItem({ icon, label, description, onClick }) {
  useLucide([icon]);
  return (
    <button
      onClick={onClick}
      style={{
        width: '100%',
        display: 'flex', gap: 12, alignItems: 'center',
        padding: '14px 16px',
        textAlign: 'left', minHeight: 60,
      }}
    >
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: 'var(--muted)',
        color: 'var(--foreground)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <Icon name={icon} size={18} />
      </div>
      <div className="grow">
        <div style={{ fontSize: 14, fontWeight: 500 }}>{label}</div>
        {description && <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 2 }}>{description}</div>}
      </div>
      <Icon name="chevron-right" size={16} color="var(--muted-foreground)" />
    </button>
  );
}
function MenuDivider() {
  return <div style={{ height: 1, background: 'var(--border)', margin: '0 16px 0 64px' }} />;
}

function InstallGuide({ os, instructions, iconName }) {
  useLucide([iconName]);
  return (
    <div style={{
      padding: '12px 14px', borderRadius: 12,
      background: 'var(--muted)',
      display: 'flex', gap: 12, alignItems: 'flex-start',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: 'var(--background)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
        border: '1px solid var(--border)',
      }}>
        <Icon name={iconName} size={16} />
      </div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{os}</div>
        <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 2, lineHeight: 1.4 }}>{instructions}</div>
      </div>
    </div>
  );
}

Object.assign(window, { PerfilScreen });