// screen-dashboard.jsx — Mock dashboard after registration completes

function DashboardScreen({ go, params, tweaks }) {
  const showAI = tweaks?.showAISections !== false;
  const user = params?.user || {
    firstName: 'Lorenzo',
    lastName: 'Bianchi',
    bio: 'Baseliner aggressivo con un dritto in topspin pesante.',
    strengths: ['Pressione sull\'avversario', 'Vincenti facili', 'Controllo del punto'],
    weaknesses: ['Errori non forzati', 'Cali di rendimento'],
    racquet: { brand: 'Babolat', model: 'Pure Aero' },
    shoes: { brand: 'Asics', model: 'Gel Resolution 9' },
    coachId: 'marco',
    height: 178,
    weight: 72,
    dominantHand: 'right'
  };

  const coach = COACHES.find((c) => c.id === user.coachId) || COACHES[0];
  const [showWelcome, setShowWelcome] = React.useState(!params?.mockUser);

  React.useEffect(() => {
    if (showWelcome) {
      const t = setTimeout(() => setShowWelcome(false), 2400);
      return () => clearTimeout(t);
    }
  }, [showWelcome]);

  if (showWelcome) {
    return <WelcomeSplash name={user.firstName} />;
  }

  return (
    <div style={{
      minHeight: '100%',
      background: 'var(--bg)'
    }}>
      {/* Top bar */}
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px clamp(20px, 5vw, 40px)',
        borderBottom: '1px solid var(--border)',
        position: 'sticky', top: 0, background: 'var(--bg)', zIndex: 10
      }}>
        <Logo size={20} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <button style={iconBtn}>
            <BellIcon />
          </button>
          <LetterAvatar name={`${user.firstName} ${user.lastName}`} size={36} hue={140} />
        </div>
      </header>

      <main style={{
        padding: '24px clamp(20px, 5vw, 40px) 60px',
        maxWidth: 980, margin: '0 auto',
        display: 'flex', flexDirection: 'column', gap: 24
      }}>
        {/* Welcome */}
        <section>
          <div style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.08em',
            color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 8
          }}>{greetingLabel()}</div>
          <h1 style={{
            fontFamily: '"Instrument Serif", Georgia, serif',
            fontSize: 'clamp(32px, 4vw, 44px)',
            fontWeight: 400,
            letterSpacing: '-0.02em', margin: 0,
            color: 'var(--ink)', lineHeight: 1.1
          }}>
            Benvenuto, <em style={{ color: 'var(--accent-strong)' }}>{user.firstName}</em>.
            Il tuo profilo è attivo.
          </h1>
        </section>

        {/* Next session card */}
        <section style={{
          background: 'var(--accent)',
          color: 'var(--accent-fg)',
          borderRadius: 20,
          padding: 24,
          position: 'relative', overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', top: -40, right: -40,
            width: 180, height: 180, borderRadius: '50%',
            background: 'var(--accent-fg)', opacity: 0.08
          }} />
          <div style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
            opacity: 0.7, textTransform: 'uppercase', marginBottom: 8
          }}>Prossimo passo</div>
          <h2 style={{
            fontFamily: '"Instrument Serif", Georgia, serif',
            fontSize: 'clamp(22px, 3vw, 28px)',
            fontWeight: 400,
            margin: 0, letterSpacing: '-0.01em', lineHeight: 1.2
          }}>
            Prenota la tua prima sessione con {coach.name.split(' ')[0]}
          </h2>
          <p style={{
            margin: '8px 0 16px',
            fontSize: 14, opacity: 0.85,
            letterSpacing: '-0.005em',
            maxWidth: 460
          }}>
            {coach.matchReason}
          </p>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
            <button style={{
              height: 42, padding: '0 20px', borderRadius: 999,
              background: 'var(--ink)', color: 'var(--bg)',
              border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 14, fontWeight: 600
            }}>Prenota una lezione →</button>
            <button style={{
              height: 42, padding: '0 16px', borderRadius: 999,
              background: 'transparent', color: 'var(--accent-fg)',
              border: '1px solid currentColor', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
              opacity: 0.85
            }}>Scrivi al coach</button>
          </div>
        </section>

        {/* Stats grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 12
        }}>
          <StatCard label="Profilo completo" value="100%" tone="accent" />
          <StatCard label="Affinità coach" value={`${coach.matchScore}%`} />
          <StatCard label="Sessioni" value="0" />
          <StatCard label="Ore giocate" value="—" />
        </div>

        {/* AI Upload CTA — Prossimamente */}
        {window.AIUploadCTA && showAI && <AIUploadCTA />}

        {/* Profile summary */}
        <section>
          <SectionTitle title="Il tuo profilo" action="Modifica" />
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 16,
            marginTop: 12, width: "100%"
          }}>
            <Card padding={20}>
              <SmallLabel>Presentazione</SmallLabel>
              <p style={{
                margin: '8px 0 0', fontSize: 14,
                color: 'var(--ink)', lineHeight: 1.5,
                letterSpacing: '-0.005em'
              }}>{user.bio}</p>
            </Card>

            <Card padding={20}>
              <SmallLabel>Caratteristiche fisiche</SmallLabel>
              <div style={{
                display: 'flex', gap: 24, marginTop: 12, flexWrap: 'wrap'
              }}>
                <Metric label="Altezza" value={`${user.height}cm`} />
                <Metric label="Peso" value={`${user.weight}kg`} />
                <Metric label="Mano" value={
                user.dominantHand === 'right' ? 'Destra' :
                user.dominantHand === 'left' ? 'Sinistra' : 'Ambi'
                } />
              </div>
            </Card>

            <Card padding={20}>
              <SmallLabel>Punti di forza</SmallLabel>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
                {(user.strengths.length ? user.strengths : ['Dritto', 'Fondo campo']).slice(0, 8).map((s) =>
                <span key={s} style={tagStyle('accent')}>{s}</span>
                )}
              </div>
            </Card>

            <Card padding={20}>
              <SmallLabel>Da migliorare</SmallLabel>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
                {(user.weaknesses.length ? user.weaknesses : ['Volée']).slice(0, 8).map((s) =>
                <span key={s} style={tagStyle('neutral')}>{s}</span>
                )}
              </div>
            </Card>

            <Card padding={20}>
              <SmallLabel>Attrezzatura</SmallLabel>
              <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <GearRow icon="🎾" label="Racchetta"
                value={user.racquet ? `${user.racquet.brand} ${user.racquet.model}` : user.customRacquet || '—'} />
                <GearRow icon="👟" label="Scarpe"
                value={user.shoes ? `${user.shoes.brand} ${user.shoes.model}` : user.customShoes || '—'} />
              </div>
            </Card>

            <Card padding={20}>
              <SmallLabel>Il tuo coach</SmallLabel>
              <div style={{ marginTop: 12, display: 'flex', gap: 12, alignItems: 'center' }}>
                <LetterAvatar name={coach.name} hue={coach.hue} size={44} />
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em', color: 'var(--ink)' }}>{coach.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{coach.specialty} · {coach.city}</div>
                </div>
              </div>
            </Card>
          </div>
        </section>

        {/* AI Player Profile — Prossimamente */}
        {window.AIPlayerProfile && showAI && <AIPlayerProfile />}

        {/* Improvement Phases — Prossimamente */}
        {window.ImprovementPhases && showAI && <ImprovementPhases />}

        {/* Back to landing for demo purposes */}
        <div style={{
          textAlign: 'center', marginTop: 20,
          padding: 16,
          fontSize: 13, color: 'var(--muted)'
        }}>
          <Button variant="ghost" size="sm" onClick={() => go('landing')}>
            ← Ricomincia demo
          </Button>
        </div>
      </main>
    </div>);

}

function greetingLabel() {
  const h = new Date().getHours();
  if (h < 12) return 'Buongiorno';
  if (h < 18) return 'Buon pomeriggio';
  return 'Buonasera';
}

function StatCard({ label, value, tone }) {
  return (
    <div style={{
      padding: 16,
      borderRadius: 14,
      background: tone === 'accent' ? 'var(--accent-soft)' : 'var(--surface)',
      border: `1px solid ${tone === 'accent' ? 'transparent' : 'var(--border)'}`
    }}>
      <div style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
        color: 'var(--muted)', textTransform: 'uppercase'
      }}>{label}</div>
      <div style={{
        marginTop: 6,
        fontSize: 28, fontWeight: 400,
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontStyle: 'italic',
        color: tone === 'accent' ? 'var(--accent-strong)' : 'var(--ink)',
        letterSpacing: '-0.02em', lineHeight: 1
      }}>{value}</div>
    </div>);

}

function SectionTitle({ title, action }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between'
    }}>
      <h2 style={{
        margin: 0,
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontSize: 24, fontWeight: 400,
        letterSpacing: '-0.01em', color: 'var(--ink)'
      }}>{title}</h2>
      {action &&
      <button style={{
        background: 'transparent', border: 'none', cursor: 'pointer',
        color: 'var(--accent-strong)', fontSize: 13, fontWeight: 500,
        fontFamily: 'inherit', padding: 0
      }}>{action}</button>
      }
    </div>);

}

function SmallLabel({ children }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
      color: 'var(--muted)', textTransform: 'uppercase'
    }}>{children}</div>);

}

function Metric({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: 'var(--muted)' }}>{label}</div>
      <div style={{
        fontSize: 18, fontWeight: 600, color: 'var(--ink)',
        letterSpacing: '-0.01em', marginTop: 2
      }}>{value}</div>
    </div>);

}

function GearRow({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8,
        background: 'var(--surface-deep)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 18
      }}>{icon}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, color: 'var(--muted)' }}>{label}</div>
        <div style={{ fontSize: 14, color: 'var(--ink)', fontWeight: 500, letterSpacing: '-0.005em' }}>{value}</div>
      </div>
    </div>);

}

function tagStyle(tone) {
  return {
    fontSize: 12, padding: '5px 10px',
    background: tone === 'accent' ? 'var(--accent-soft)' : 'var(--surface-deep)',
    color: tone === 'accent' ? 'var(--accent-strong)' : 'var(--ink)',
    border: `1px solid ${tone === 'accent' ? 'transparent' : 'var(--border)'}`,
    borderRadius: 999, fontWeight: 500
  };
}

const iconBtn = {
  width: 36, height: 36, borderRadius: 999,
  border: '1px solid var(--border)',
  background: 'var(--surface)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  color: 'var(--ink)', cursor: 'pointer'
};

function BellIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M3 12h10l-1.5-2V7a3.5 3.5 0 1 0-7 0v3L3 12zM6 13a2 2 0 0 0 4 0"
      stroke="currentColor" strokeWidth="1.4"
      strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

// Welcome splash after registration
function WelcomeSplash({ name }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
      background: 'var(--accent)',
      color: 'var(--accent-fg)',
      animation: 'splashIn .4s ease'
    }}>
      <div style={{
        width: 80, height: 80, borderRadius: '50%',
        background: 'var(--accent-fg)',
        color: 'var(--accent)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 40,
        animation: 'bounceIn .6s cubic-bezier(.34,1.56,.64,1)'
      }}>✓</div>
      <h1 style={{
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontSize: 'clamp(36px, 6vw, 56px)',
        fontWeight: 400, margin: '24px 0 8px',
        letterSpacing: '-0.02em',
        animation: 'fadeUp .5s ease .2s both'
      }}>Ci sei, {name}.</h1>
      <p style={{
        fontSize: 16, opacity: 0.8, margin: 0,
        animation: 'fadeUp .5s ease .35s both'
      }}>Sto preparando il tuo profilo...</p>
    </div>);

}

Object.assign(window, { DashboardScreen });