// AFTER — Dashboard screen
const { useState: useStateDB, useMemo: useMemoDb } = React;

const DB = {
  cream: '#fafaf8', black: '#0f0f0f', green: '#3d6b4f',
  gray: '#6b6b6b', border: '#e2e0db', greenLight: '#e8f0eb',
};

const dbStyles = {
  screen: { background: DB.cream, height: '100%', display: 'flex', flexDirection: 'column' },
  scroll: { flex: 1, overflowY: 'auto', padding: '64px 20px 20px' },
  headerRow: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24 },
  greeting: { fontFamily: '"DM Serif Display", Georgia, serif', fontSize: 30, color: DB.black, lineHeight: 1.2 },
  greetingSub: { fontFamily: '"DM Sans", system-ui', fontSize: 14, color: DB.gray, marginTop: 4 },
  signOut: { fontFamily: '"DM Sans", system-ui', fontSize: 14, fontWeight: 500, color: DB.gray, cursor: 'pointer', paddingTop: 4 },
  card: { background: DB.cream, border: `1px solid ${DB.border}`, borderRadius: 16, padding: 20, marginBottom: 12 },
  cardLabel: { fontFamily: '"DM Sans", system-ui', fontSize: 12, fontWeight: 600, color: DB.gray, textTransform: 'uppercase', letterSpacing: '.05em', marginBottom: 12 },
  todayLabel: { fontFamily: '"DM Sans", system-ui', fontSize: 14, color: DB.gray },
  weightValue: { fontFamily: '"DM Sans", system-ui', fontSize: 36, fontWeight: 600, color: DB.black, lineHeight: 1.1, marginTop: 4, marginBottom: 20 },
  input: {
    height: 48, borderRadius: 12, border: `1px solid ${DB.border}`,
    background: DB.cream, padding: '0 16px',
    fontFamily: '"DM Sans", system-ui', fontSize: 16, color: DB.black,
    outline: 'none', width: '100%', marginBottom: 10,
  },
  btn: {
    height: 48, borderRadius: 12, background: DB.green, border: 'none',
    width: '100%', cursor: 'pointer',
    fontFamily: '"DM Sans", system-ui', fontSize: 16, fontWeight: 600, color: DB.cream,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  saved: { fontFamily: '"DM Sans", system-ui', fontSize: 14, fontWeight: 500, color: DB.green, marginTop: 8 },
  noiseBody: { fontFamily: '"DM Sans", system-ui', fontSize: 14, color: DB.gray, lineHeight: 1.6, marginBottom: 20 },
  chips: { display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 20 },
  chip: (selected) => ({
    width: 40, height: 40, borderRadius: '50%',
    border: `1px solid ${selected ? DB.green : DB.border}`,
    background: selected ? DB.green : DB.cream,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: '"DM Sans", system-ui', fontSize: 14, fontWeight: 600,
    color: selected ? DB.cream : DB.black, cursor: 'pointer',
  }),
  // mini chart
  chartWrap: { marginTop: 8 },
  chartStats: { display: 'flex', gap: 24, marginTop: 12 },
  statLabel: { fontFamily: '"DM Sans", system-ui', fontSize: 12, color: DB.gray },
  statValue: { fontFamily: '"DM Sans", system-ui', fontSize: 16, fontWeight: 600, color: DB.black },
};

// Simple sparkline SVG
function WeightSparkline() {
  const pts = [184.2, 183.8, 183.5, 183.9, 183.1, 182.8, 182.4];
  const W = 310, H = 60, PAD = 8;
  const min = Math.min(...pts), max = Math.max(...pts), range = max - min || 1;
  const xs = pts.map((_, i) => PAD + (i / (pts.length - 1)) * (W - PAD * 2));
  const ys = pts.map(v => H - PAD - ((v - min) / range) * (H - PAD * 2));
  const d = xs.map((x, i) => `${i === 0 ? 'M' : 'L'} ${x} ${ys[i]}`).join(' ');
  const fill = xs.map((x, i) => `${i === 0 ? 'M' : 'L'} ${x} ${ys[i]}`).join(' ') +
    ` L ${xs[xs.length-1]} ${H} L ${xs[0]} ${H} Z`;
  return (
    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
      <defs>
        <linearGradient id="sg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3d6b4f" stopOpacity=".25" />
          <stop offset="100%" stopColor="#3d6b4f" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={fill} fill="url(#sg)" />
      <path d={d} fill="none" stroke="#3d6b4f" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={xs[xs.length-1]} cy={ys[ys.length-1]} r="4" fill="#3d6b4f" />
    </svg>
  );
}

function DashboardScreen() {
  const [weightInput, setWeightInput] = useStateDB('');
  const [score, setScore] = useStateDB(4);

  return (
    <div style={dbStyles.screen}>
    <div style={dbStyles.scroll}>
      <div style={dbStyles.headerRow}>
        <div>
          <div style={dbStyles.greeting}>Good morning, Sarah.</div>
          <div style={dbStyles.greetingSub}>A quick check-in for today.</div>
        </div>
        <span style={dbStyles.signOut}>Sign out</span>
      </div>

      {/* Weight card */}
      <div style={dbStyles.card}>
        <div style={dbStyles.cardLabel}>Weight</div>
        <div style={dbStyles.todayLabel}>Today</div>
        <div style={dbStyles.weightValue}>182.4 lb</div>
        <input style={dbStyles.input} type="text" placeholder="Weight in lbs" value={weightInput} onChange={e => setWeightInput(e.target.value)} />
        <button style={dbStyles.btn}>Log weight</button>
      </div>

      {/* Chart card */}
      <div style={{ ...dbStyles.card, paddingBottom: 16 }}>
        <div style={dbStyles.cardLabel}>14-day trend</div>
        <WeightSparkline />
        <div style={dbStyles.chartStats}>
          <div><div style={dbStyles.statLabel}>Start</div><div style={dbStyles.statValue}>184.2</div></div>
          <div><div style={dbStyles.statLabel}>Now</div><div style={dbStyles.statValue}>182.4</div></div>
          <div><div style={dbStyles.statLabel}>Trend</div><div style={{ ...dbStyles.statValue, color: '#3d6b4f' }}>↓ 1.8</div></div>
        </div>
      </div>

      {/* Food noise card */}
      <div style={dbStyles.card}>
        <div style={dbStyles.cardLabel}>Food noise today</div>
        <div style={dbStyles.noiseBody}>How loud is the food noise right now? (1 = quiet, 10 = overwhelming)</div>
        <div style={dbStyles.chips}>
          {Array.from({ length: 10 }, (_, i) => i + 1).map(n => (
            <div key={n} style={dbStyles.chip(score === n)} onClick={() => setScore(n)}>{n}</div>
          ))}
        </div>
        <button style={dbStyles.btn}>Log</button>
      </div>

    </div>
      <TabBar active="dashboard" />
    </div>
  );
}

function TabBar({ active }) {
  return (
    <div style={{
      flexShrink: 0,
      background: '#fafaf8', borderTop: '1px solid #e2e0db',
      display: 'flex', padding: '8px 0 20px',
      zIndex: 100,
    }}>
      {[
        { id: 'dashboard', label: 'Dashboard', icon: (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
            <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
          </svg>
        )},
        { id: 'coach', label: 'Coach', icon: (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
          </svg>
        )},
      ].map(tab => (
        <div key={tab.id} style={{
          flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          color: active === tab.id ? '#3d6b4f' : '#a1a1aa', cursor: 'pointer',
        }}>
          {tab.icon}
          <span style={{ fontFamily: '"DM Sans", system-ui', fontSize: 10, fontWeight: 500 }}>{tab.label}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { DashboardScreen, TabBar });