const ScreenPerfil = ({ user }) => {
  const { stats, activity } = VELYX;

  return (
    <div className="max-w-[1360px] mx-auto px-10 py-10" data-screen-label="09 Perfil">
      <PageHeader
        eyebrow="Conta"
        title="Perfil e progresso"
        desc="Seus dados, seu plano e o que você já percorreu."
      />

      <div className="grid grid-cols-[1fr_380px] gap-8">
        {/* Left column */}
        <div className="space-y-8 min-w-0">
          {/* Identity */}
          <section>
            <div className="flex items-start gap-5 mb-8">
              <div className="w-[72px] h-[72px] rounded-full bg-accent text-black flex items-center justify-center text-[26px] font-semibold">
                {user.avatar}
              </div>
              <div className="flex-1 pt-1">
                <h2 className="text-[22px] font-semibold tracking-tightest text-ink">{user.fullName}</h2>
                <p className="text-mute text-[13.5px] mt-0.5">{user.role} · {user.company}</p>
                <p className="text-mute2 text-[12px] font-mono mt-1">Membro desde {user.joined}</p>
              </div>
              <Button variant="secondary" size="md" icon={<I.settings size={13}/>}>Editar</Button>
            </div>

            {/* Fields */}
            <div className="rounded-[10px] hairline bg-panel overflow-hidden">
              <Field label="Nome" value={user.fullName}/>
              <Field label="Email" value={user.email}/>
              <Field label="Empresa" value={user.company} last/>
            </div>
          </section>

          {/* Stats row */}
          <section>
            <h3 className="text-ink text-[15px] font-semibold tracking-tightest mb-4">Estatísticas</h3>
            <div className="grid grid-cols-4 gap-3">
              <StatCard big={stats.horas.toFixed(1)} unit="h" label="Horas estudadas"/>
              <StatCard big={stats.modulosConcluidos} label="Módulos" sub={`de ${stats.modulosTotal}`}/>
              <StatCard big={stats.certificacoes} label="Certificações"/>
              <StatCard big={stats.streak} unit="d" label="Sequência"/>
            </div>
          </section>

          {/* Activity */}
          <section>
            <h3 className="text-ink text-[15px] font-semibold tracking-tightest mb-4">Atividade recente</h3>
            <div className="rounded-[10px] hairline bg-panel">
              {activity.map((a, i) => (
                <div key={i} className={`flex items-start gap-4 px-5 py-4 ${i !== activity.length-1 ? 'border-b border-line' : ''}`}>
                  <div className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"/>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-baseline gap-2 mb-0.5">
                      <span className="text-ink text-[13px] font-medium">{a.what}</span>
                      <span className="text-mute2 text-[11px]">·</span>
                      <span className="text-mute text-[12.5px] truncate">{a.detail}</span>
                    </div>
                  </div>
                  <div className="text-mute2 text-[11px] font-mono uppercase tracking-wide shrink-0">{a.when}</div>
                </div>
              ))}
            </div>
          </section>
        </div>

        {/* Right: plan */}
        <div>
          <div className="sticky top-6 space-y-5">
            <section>
              <div className="text-mute2 text-[10.5px] font-mono uppercase tracking-[0.12em] mb-3">Plano atual</div>
              <Card className="p-5 relative overflow-hidden">
                <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent"/>
                <div className="flex items-center gap-2 mb-2">
                  <I.bldg size={14} className="text-accent"/>
                  <span className="text-ink text-[12.5px] font-medium">Empresa · {user.company}</span>
                </div>
                <div className="text-[20px] font-semibold tracking-tightest text-ink leading-tight mb-0.5">
                  {user.plan}
                </div>
                <p className="text-mute text-[12.5px] mb-5">Você faz parte de uma assinatura corporativa. Sua empresa gerencia a cobrança.</p>

                <div className="space-y-2 text-[12px] mb-5 pt-4 border-t border-line">
                  <Row k="Renovação" v="15 jan 2027"/>
                  <Row k="Administrador" v="contato@lumiar.com.br"/>
                  <Row k="Assentos usados" v="8 de 12"/>
                </div>

                <Button variant="secondary" size="md" className="w-full" icon={<I.ext size={13}/>}>
                  Abrir painel da empresa
                </Button>
              </Card>
            </section>

            <section>
              <Card className="p-5">
                <div className="flex items-center gap-2 mb-2">
                  <I.flame size={14} className="text-accent"/>
                  <span className="text-ink text-[13px] font-medium">Sequência: {stats.streak} dias</span>
                </div>
                <p className="text-mute text-[12.5px] leading-relaxed mb-3">
                  Você estudou todos os dias dessa semana. Bora fechar o domingo também?
                </p>
                <div className="flex gap-1">
                  {Array.from({length: 7}).map((_, i) => (
                    <div key={i} className={`flex-1 h-7 rounded-[4px] ${i < stats.streak ? 'bg-accent' : 'bg-white/[0.05] hairline2'}`}/>
                  ))}
                </div>
              </Card>
            </section>

            <Button variant="ghost" size="md" className="w-full" icon={<I.logout size={13}/>}>Sair</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

const Field = ({ label, value, last }) => (
  <div className={`flex items-center justify-between px-5 py-3.5 ${!last ? 'border-b border-line' : ''}`}>
    <span className="text-mute text-[12.5px]">{label}</span>
    <span className="text-ink text-[13px] font-mono">{value}</span>
  </div>
);

const StatCard = ({ big, unit, label, sub }) => (
  <div className="p-4 rounded-[10px] hairline bg-panel">
    <div className="flex items-baseline gap-1 mb-1">
      <span className="text-[26px] font-semibold tracking-tightest text-ink">{big}</span>
      {unit && <span className="text-[13px] text-mute">{unit}</span>}
      {sub && <span className="text-mute2 text-[11px] font-mono ml-1">{sub}</span>}
    </div>
    <div className="text-mute text-[11.5px]">{label}</div>
  </div>
);

const Row = ({ k, v }) => (
  <div className="flex items-center justify-between">
    <span className="text-mute">{k}</span>
    <span className="text-ink font-mono">{v}</span>
  </div>
);

window.ScreenPerfil = ScreenPerfil;