/* Surgr App — Dashboard Screen
   Recreates surgr/app/dashboard/page.js — header, stat row, plan list. */

const {
  SectionLabel: DSectionLabel,
  AppH1: DAppH1,
  AppH2: DAppH2,
  Card: DCard,
  Pill: DPill,
  Icons: DIcons,
} = window.SurgrAppKit;

function StatTile({ value, unit, label, icon: IconC }) {
  return (
    <div style={{
      background: 'var(--surgr-bg-card)',
      border: '1px solid var(--surgr-border)',
      borderRadius: 14,
      padding: 14,
      display: 'flex',
      flexDirection: 'column',
      gap: 8,
      minHeight: 96,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 28, height: 28,
          borderRadius: 8,
          background: 'rgba(200,255,0,0.08)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--surgr-accent)',
        }}><IconC size={16} strokeWidth={2}/></div>
      </div>
      <div style={{
        fontFamily: 'var(--surgr-font-heading)',
        fontWeight: 700,
        fontSize: 28,
        color: 'var(--surgr-text-strong)',
        lineHeight: 1,
        fontVariantNumeric: 'tabular-nums',
      }}>{value}<span style={{ fontSize: 13, color: 'var(--surgr-text-dim)', fontFamily: 'var(--surgr-font-body)', fontWeight: 500, marginLeft: 4 }}>{unit}</span></div>
      <div style={{
        fontSize: 10,
        fontWeight: 800,
        letterSpacing: 1.5,
        textTransform: 'uppercase',
        color: 'var(--surgr-text-muted)',
        fontFamily: 'var(--surgr-font-body)',
      }}>{label}</div>
    </div>
  );
}

function PlanRow({ name, focus, completed = false, next = false, onClick }) {
  return (
    <DCard accent={next} hover onClick={onClick} style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 14,
      padding: '14px 16px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0 }}>
        <div style={{
          width: 36, height: 36,
          borderRadius: 10,
          background: completed ? 'rgba(0,230,118,0.1)'
                     : next ? 'rgba(200,255,0,0.12)'
                     : 'rgba(255,255,255,0.04)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: completed ? 'var(--surgr-success)'
                : next ? 'var(--surgr-accent)'
                : 'var(--surgr-text-muted)',
          flexShrink: 0,
        }}>
          {completed ? <DIcons.Check size={18}/> : <DIcons.Dumbbell size={18}/>}
        </div>
        <div style={{ minWidth: 0 }}>
          <div style={{
            fontFamily: 'var(--surgr-font-heading)',
            fontWeight: 700,
            fontSize: 16,
            color: 'var(--surgr-text)',
            letterSpacing: 0.3,
          }}>{name}</div>
          <div style={{
            fontSize: 12,
            color: 'var(--surgr-text-muted)',
            marginTop: 2,
            fontFamily: 'var(--surgr-font-body)',
          }}>{focus}</div>
        </div>
      </div>
      {next && (
        <div style={{
          padding: '4px 10px',
          borderRadius: 100,
          background: 'var(--surgr-accent)',
          color: '#000',
          fontSize: 9,
          fontWeight: 800,
          letterSpacing: 1.5,
          textTransform: 'uppercase',
          fontFamily: 'var(--surgr-font-body)',
        }}>Próximo</div>
      )}
      {!next && !completed && <DIcons.ArrowRight size={18} style={{ color: 'var(--surgr-text-dim)' }}/>}
    </DCard>
  );
}

function DashboardScreen({ onStartWorkout }) {
  return (
    <div style={{ padding: '24px 20px 100px', display: 'flex', flexDirection: 'column', gap: 24 }}>
      {/* Header */}
      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <p style={{ fontSize: 13, color: 'var(--surgr-text-muted)', margin: '0 0 4px', fontFamily: 'var(--surgr-font-body)' }}>
            Bem-vindo de volta,
          </p>
          <DAppH1>VITOR</DAppH1>
        </div>
        <DPill style={{ background: 'rgba(255,184,0,0.08)', borderColor: 'rgba(255,184,0,0.25)', color: 'var(--surgr-pro)' }}>
          <DIcons.Crown size={11}/> PRO
        </DPill>
      </header>

      {/* Stat row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
        <StatTile value="24"  unit=""    label="Treinos"  icon={DIcons.Dumbbell}/>
        <StatTile value="7"   unit="dias" label="Streak"  icon={DIcons.Flame}/>
        <StatTile value="8.5" unit="t"    label="Volume"  icon={DIcons.Chart}/>
      </div>

      {/* Coach nudge */}
      <DCard accent style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <DSectionLabel accent style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <DIcons.Brain size={12}/> SURGR COACH
        </DSectionLabel>
        <p style={{
          fontSize: 14,
          lineHeight: 1.6,
          color: 'var(--surgr-text)',
          margin: 0,
          fontFamily: 'var(--surgr-font-body)',
          fontWeight: 500,
        }}>
          Aumento detectado na sua performance. Vamos elevar a carga no supino para <strong style={{ color: 'var(--surgr-accent)' }}>82.5kg</strong> hoje pra quebrar o platô.
        </p>
      </DCard>

      {/* Plan list */}
      <section style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <DAppH2>SEU PLANO · ROTAÇÃO ABCDE</DAppH2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PlanRow name="Push Day"  focus="Peito · Ombro · Tríceps"  completed/>
          <PlanRow name="Pull Day"  focus="Costas · Bíceps"          next onClick={onStartWorkout}/>
          <PlanRow name="Leg Day"   focus="Quadríceps · Glúteo"/>
          <PlanRow name="Upper"     focus="Acessórios"/>
          <PlanRow name="Cardio"    focus="HIIT · 25min"/>
        </div>
      </section>
    </div>
  );
}

window.SurgrAppKit.DashboardScreen = DashboardScreen;