// SunSync — Insights + Premium

// ─── INSIGHTS DASHBOARD ─────────────────────────────────────
function InsightsScreen({ dark }) {
  // 7-day UV bars
  const week = [
    { d: 'M', v: 0.45, dot: false },
    { d: 'T', v: 0.62, dot: true },
    { d: 'W', v: 0.78, dot: false },
    { d: 'T', v: 0.55, dot: true },
    { d: 'F', v: 0.82, dot: false },
    { d: 'S', v: 0.95, dot: false },
    { d: 'S', v: 0.7, dot: false, today: true },
  ];

  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="calm" />
      <div style={{ position: 'relative', height: '100%', overflowY: 'auto', paddingBottom: 110 }} className="no-scrollbar">
        <div style={{ padding: '70px 24px 0' }}>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92' }}>This week</div>
          <h1 className="font-display" style={{ fontSize: 36, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: '4px 0 24px 0', lineHeight: 1 }}>Insights</h1>

          {/* Protection Score Hero */}
          <Glass dark={dark} padding={24} radius={28}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92' }}>Skin protection score</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
                  <span className="font-display" style={{ fontSize: 64, fontStyle: 'italic', lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16' }}>87</span>
                  <span style={{ fontFamily: 'Geist', fontSize: 16, color: dark ? '#B8AE9F' : '#6B6258' }}>/ 100</span>
                </div>
                <div style={{ marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 10px', borderRadius: 12, background: dark ? 'rgba(139,168,138,0.16)' : 'rgba(139,168,138,0.18)' }}>
                  <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 6l3-3 3 3" fill="none" stroke={dark ? '#8BA88A' : '#5C7A5B'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  <span style={{ fontFamily: 'Geist', fontSize: 11, fontWeight: 600, color: dark ? '#8BA88A' : '#5C7A5B' }}>+4 this week</span>
                </div>
              </div>
              <ProtectionRing pct={87} size={96} dark={dark} />
            </div>

            <div style={{ marginTop: 18, padding: 14, borderRadius: 16, background: dark ? 'rgba(255,255,255,0.04)' : 'rgba(31,27,22,0.03)', display: 'flex', gap: 10 }}>
              <Glyph.Sparkle s={16} c={dark ? '#F4B567' : '#C99750'} />
              <div style={{ flex: 1, fontFamily: 'Geist', fontSize: 12, lineHeight: 1.45, color: dark ? '#B8AE9F' : '#6B6258' }}>
                You've stayed protected <span style={{ color: dark ? '#F2EBDF' : '#1F1B16', fontWeight: 600 }}>92% of peak UV hours</span> this week. Keep going — three more days and you'll hit a 30-day streak.
              </div>
            </div>
          </Glass>

          {/* 7-day UV exposure chart */}
          <div style={{ marginTop: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 4px', marginBottom: 10 }}>
              <div style={{ fontFamily: 'Geist', fontSize: 13, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>UV Exposure</div>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92' }}>past 7 days</div>
            </div>
            <Glass dark={dark} padding={20} radius={24}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 16 }}>
                <span className="font-display" style={{ fontSize: 30, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16' }}>14h 32m</span>
                <span style={{ fontFamily: 'Geist', fontSize: 12, color: dark ? '#A89F92' : '#A89F92' }}>· avg UV 6.4</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 110 }}>
                {week.map((d, i) => (
                  <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                    <div style={{ flex: 1, width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', position: 'relative' }}>
                      <div style={{
                        width: '100%', height: `${d.v * 100}%`,
                        borderRadius: 8,
                        background: d.today
                          ? 'linear-gradient(180deg, #D9624A, #E8A24A)'
                          : dark
                            ? 'linear-gradient(180deg, rgba(232,162,74,0.5), rgba(232,162,74,0.15))'
                            : 'linear-gradient(180deg, rgba(232,162,74,0.7), rgba(232,162,74,0.2))',
                        position: 'relative',
                      }}>
                        {d.dot && (
                          <div style={{
                            position: 'absolute', top: 6, left: '50%', transform: 'translateX(-50%)',
                            width: 6, height: 6, borderRadius: '50%',
                            background: dark ? '#1F1B16' : '#FFF', border: `1.5px solid ${dark ? '#E07856' : '#D9624A'}`,
                          }} />
                        )}
                      </div>
                    </div>
                    <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: d.today ? (dark ? '#F4B567' : '#C99750') : (dark ? '#7A7065' : '#A89F92'), fontWeight: d.today ? 600 : 400 }}>{d.d}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16, display: 'flex', gap: 16, fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ width: 8, height: 8, borderRadius: 2, background: '#E8A24A' }} /> UV exposure
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: dark ? '#1F1B16' : '#FFF', border: `1.5px solid #D9624A` }} /> Missed reapply
                </div>
              </div>
            </Glass>
          </div>

          {/* Two metric cards */}
          <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Glass dark={dark} padding={18} radius={22}>
              <Glyph.Clock s={18} c={dark ? '#8FB4C8' : '#6F9CB5'} />
              <div className="font-display" style={{ fontSize: 28, fontStyle: 'italic', marginTop: 8, lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16' }}>2</div>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92', marginTop: 2 }}>missed reapplies</div>
            </Glass>
            <Glass dark={dark} padding={18} radius={22}>
              <Glyph.Sun s={18} c={dark ? '#F4B567' : '#C99750'} />
              <div className="font-display" style={{ fontSize: 28, fontStyle: 'italic', marginTop: 8, lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16' }}>28</div>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92', marginTop: 2 }}>day streak</div>
            </Glass>
          </div>

          {/* AI Wellness insight */}
          <div style={{ marginTop: 14 }}>
            <Glass dark={dark} padding={20} radius={24} style={{
              background: dark ? 'rgba(244,181,103,0.08)' : 'rgba(232,162,74,0.08)',
              border: `0.5px solid ${dark ? 'rgba(244,181,103,0.25)' : 'rgba(232,162,74,0.25)'}`,
            }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: 12, background: 'linear-gradient(135deg, #FFD08A, #E8A24A)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Glyph.Sparkle s={18} c="#FFF" />
                </div>
                <div>
                  <div style={{ fontFamily: 'Geist', fontSize: 11, fontWeight: 600, letterSpacing: 1.5, textTransform: 'uppercase', color: dark ? '#F4B567' : '#C99750' }}>This week's pattern</div>
                  <div style={{ fontFamily: 'Geist', fontSize: 14, lineHeight: 1.5, color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 6 }}>
                    Your skin gets the most sun between <span style={{ fontWeight: 600 }}>1–3 PM on weekends</span>. Pre-applying at noon on Saturday could lift your score to 92.
                  </div>
                  <div style={{ marginTop: 12, display: 'inline-flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 14, background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.04)' }}>
                    <span style={{ fontFamily: 'Geist', fontSize: 12, fontWeight: 500, color: dark ? '#F2EBDF' : '#1F1B16' }}>Set Saturday reminder</span>
                    <Glyph.Chevron s={12} c={dark ? '#F2EBDF' : '#1F1B16'} />
                  </div>
                </div>
              </div>
            </Glass>
          </div>

          {/* Cumulative ring */}
          <div style={{ marginTop: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 4px', marginBottom: 10 }}>
              <div style={{ fontFamily: 'Geist', fontSize: 13, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>Cumulative · 2026</div>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92' }}>view all →</div>
            </div>
            <Glass dark={dark} padding={20} radius={24}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <ProtectionRing pct={42} size={88} dark={dark} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Geist', fontSize: 12, color: dark ? '#A89F92' : '#A89F92' }}>Year-to-date UV exposure</div>
                  <div className="font-display" style={{ fontSize: 28, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 2, lineHeight: 1.05 }}>184 hours</div>
                  <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#8BA88A' : '#5C7A5B', marginTop: 4 }}>32% below average for your skin type</div>
                </div>
              </div>
            </Glass>
          </div>
        </div>
      </div>

      <TabBar active="insights" dark={dark} />
    </div>
  );
}

// ─── PREMIUM SUBSCRIPTION ───────────────────────────────────
function PremiumScreen({ dark }) {
  const features = [
    { icon: 'Sparkle', title: 'AI UV insights', sub: 'Daily, personalized recommendations from your patterns' },
    { icon: 'Watch', title: 'Apple Watch support', sub: 'Complications + haptic reapply reminders' },
    { icon: 'Chart', title: 'Advanced analytics', sub: 'Year-over-year trends, dermatologist-ready reports' },
    { icon: 'Drop', title: 'Smart activity detection', sub: 'Auto-adjusts protection when you swim, run, or hike' },
    { icon: 'Family', title: 'Family tracking', sub: 'Up to 6 profiles, kids included' },
  ];

  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="extreme" />
      <div style={{ position: 'relative', height: '100%', overflowY: 'auto' }} className="no-scrollbar">

        {/* Close X */}
        <div style={{
          position: 'absolute', top: 60, left: 20, zIndex: 5,
          width: 36, height: 36, borderRadius: '50%',
          background: dark ? 'rgba(40,32,22,0.5)' : 'rgba(255,255,255,0.5)',
          backdropFilter: 'blur(20px)',
          border: `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.9)'}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke={dark ? '#F2EBDF' : '#1F1B16'} strokeWidth="1.6" strokeLinecap="round" /></svg>
        </div>

        {/* Hero */}
        <div style={{ position: 'relative', height: 320, marginTop: 50 }}>
          {/* Sun + halo */}
          <div style={{ position: 'absolute', top: 30, left: '50%', transform: 'translateX(-50%)', width: 200, height: 200 }}>
            <div className="sun-pulse" style={{
              position: 'absolute', inset: -30, borderRadius: '50%',
              background: `radial-gradient(circle, ${dark ? 'rgba(244,181,103,0.4)' : 'rgba(232,162,74,0.5)'} 0%, transparent 65%)`,
              filter: 'blur(28px)',
            }} />
            <div style={{
              position: 'absolute', inset: 30, borderRadius: '50%',
              background: 'linear-gradient(135deg, #FFE0B0 0%, #F2C46B 35%, #E8A24A 70%, #D9624A 100%)',
              boxShadow: '0 30px 80px rgba(232,162,74,0.5), inset 0 -10px 30px rgba(217,98,74,0.4), inset 0 12px 30px rgba(255,255,255,0.5)',
            }} />
            {/* orbiting plus icon */}
            <div style={{
              position: 'absolute', top: -10, right: 10,
              width: 56, height: 56, borderRadius: '50%',
              background: dark ? 'rgba(40,32,22,0.7)' : 'rgba(255,255,255,0.8)',
              backdropFilter: 'blur(20px)',
              border: `0.5px solid ${dark ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.9)'}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 12px 30px rgba(31,27,22,0.15)',
            }}>
              <span className="font-display" style={{ fontSize: 26, fontStyle: 'italic', color: dark ? '#F4B567' : '#C99750' }}>+</span>
            </div>
          </div>
        </div>

        <div style={{ padding: '0 28px' }}>
          <h1 className="font-display" style={{ fontSize: 44, fontStyle: 'italic', lineHeight: 1.0, fontWeight: 400, color: dark ? '#F2EBDF' : '#1F1B16', margin: 0, textAlign: 'center' }}>
            SunSync <span style={{ color: dark ? '#F4B567' : '#C99750' }}>Plus</span>
          </h1>
          <p style={{ fontFamily: 'Geist', fontSize: 15, color: dark ? '#B8AE9F' : '#6B6258', textAlign: 'center', marginTop: 10 }}>
            Your daily ritual, beautifully intelligent.
          </p>

          <Glass dark={dark} padding={16} radius={26} style={{ marginTop: 28 }}>
            {features.map((f, i) => {
              const I = Glyph[f.icon] || Glyph.Sparkle;
              return (
                <div key={i} style={{
                  display: 'flex', gap: 14, alignItems: 'flex-start', padding: '14px 6px',
                  borderBottom: i < features.length - 1 ? `0.5px solid ${dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.06)'}` : 'none',
                }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 12, flexShrink: 0,
                    background: dark ? 'rgba(244,181,103,0.16)' : 'rgba(232,162,74,0.14)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <I s={18} c={dark ? '#F4B567' : '#C99750'} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>{f.title}</div>
                    <div style={{ fontFamily: 'Geist', fontSize: 12, lineHeight: 1.45, color: dark ? '#B8AE9F' : '#6B6258', marginTop: 2 }}>{f.sub}</div>
                  </div>
                </div>
              );
            })}
          </Glass>

          {/* Plans */}
          <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
            <div style={{ flex: 1, padding: 16, borderRadius: 20, border: `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(31,27,22,0.08)'}`, background: dark ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.5)' }}>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92', textTransform: 'uppercase', letterSpacing: 1 }}>Monthly</div>
              <div className="font-display" style={{ fontSize: 28, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 4, lineHeight: 1 }}>$4.99</div>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#7A7065' : '#A89F92' }}>per month</div>
            </div>
            <div style={{ flex: 1.1, padding: 16, borderRadius: 20, position: 'relative', background: dark ? 'rgba(244,181,103,0.12)' : 'rgba(232,162,74,0.14)', border: `1.5px solid ${dark ? '#F4B567' : '#C99750'}` }}>
              <div style={{ position: 'absolute', top: -10, right: 10, padding: '3px 10px', borderRadius: 10, background: dark ? '#F4B567' : '#C99750', fontFamily: 'Geist', fontSize: 9, fontWeight: 700, letterSpacing: 1, color: dark ? '#1F1B16' : '#FFF' }}>BEST VALUE</div>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#F4B567' : '#C99750', textTransform: 'uppercase', letterSpacing: 1 }}>Yearly</div>
              <div className="font-display" style={{ fontSize: 28, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 4, lineHeight: 1 }}>$29.99</div>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#B8AE9F' : '#6B6258' }}>$2.50/mo · save 50%</div>
            </div>
          </div>

          <div style={{ marginTop: 22, paddingBottom: 50 }}>
            <PillBtn dark={dark} primary full size="lg">Start 7 days free</PillBtn>
            <div style={{ marginTop: 14, textAlign: 'center', fontFamily: 'Geist', fontSize: 11, color: dark ? '#7A7065' : '#A89F92', maxWidth: 300, margin: '14px auto 0' }}>
              Then $29.99/yr. Cancel any time in Settings. Restore purchases · Terms · Privacy.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InsightsScreen, PremiumScreen });