// plans.jsx — subscription tiers (space themed) + Profile plan card

const { useState: useStateP } = React;
const { Card, Chip, TopBar, IconBtn, DisplayHeading, Icon } = window.LAUNCH_SCREENS_1;

// Three tiers: free (browse only), basic ($9.99), vip ($19.99). Monthly,
// 30-day periods. Benefits map 1:1 to entitlements in user.jsx / subscriptions.sql.
const PLANS = [
  {
    id: 'free',
    name: 'FREE',
    price: 0,
    priceDisplay: '0',
    short: 'no plan',
    tagline: 'Browse the community. Subscribe to join in.',
    altitude: 'GROUND CONTROL',
    coords: 'T-MINUS 10',
    perks: [
      'See the Feed, profiles & coaches',
      'No posting, liking or comments',
      'No chat or following',
      'Upgrade anytime to unlock everything',
    ],
    palette: ['#3A3F4A', '#0B0B0F'],
    glow: '#9AA3B2',
  },
  {
    id: 'basic',
    name: 'BASIC',
    price: 9.99,
    priceDisplay: '9.99',
    short: '$9.99 / mo',
    tagline: 'Join the community + a free quick review every month.',
    altitude: 'LOW EARTH ORBIT',
    coords: '400 KM · ALTITUDE',
    perks: [
      'Full Feed access — post, like, comment, upload & rate',
      'Earn & redeem community points',
      '1 free Quick Score review ($11) every month',
    ],
    palette: ['#5B6AC4', '#0B1030'],
    glow: '#7AA8FF',
    badge: 'POPULAR',
  },
  {
    id: 'vip',
    name: 'VIP',
    price: 19.99,
    priceDisplay: '19.99',
    short: '$19.99 / mo',
    tagline: 'Everything in Basic, plus pro reviews & a coach class.',
    altitude: 'DEEP SPACE',
    coords: 'ALL ACCESS',
    perks: [
      'Everything in Basic',
      '2 free In-Depth reviews ($40 each) every month',
      '1 free 20-min class with a coach every month',
    ],
    palette: ['#C72820', '#7A1A0A'],
    glow: '#FF7849',
    badge: 'BEST VALUE',
  },
];

// Format a plan expiry ISO date → 'JUN 30, 2026'.
function fmtPlanDate(iso) {
  if (!iso) return '';
  try {
    return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' }).toUpperCase();
  } catch (e) { return ''; }
}

// SVG starfield + planet for plan cards
function PlanCelestial({ palette, glow, size = 110 }) {
  const [c1, c2] = palette;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
      <defs>
        <radialGradient id={`g-${glow.slice(1)}`} cx="35%" cy="35%">
          <stop offset="0%" stopColor={glow} stopOpacity="0.9"/>
          <stop offset="40%" stopColor={c1} stopOpacity="1"/>
          <stop offset="100%" stopColor={c2} stopOpacity="1"/>
        </radialGradient>
        <radialGradient id={`halo-${glow.slice(1)}`} cx="50%" cy="50%">
          <stop offset="50%" stopColor={glow} stopOpacity="0"/>
          <stop offset="70%" stopColor={glow} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={glow} stopOpacity="0"/>
        </radialGradient>
      </defs>
      {/* halo */}
      <circle cx="50" cy="50" r="48" fill={`url(#halo-${glow.slice(1)})`}/>
      {/* stars */}
      {[[12,18,1],[88,22,1.2],[20,82,0.9],[82,78,1],[68,12,0.7],[10,52,0.6],[92,55,0.8]].map(([x,y,r], i) => (
        <circle key={i} cx={x} cy={y} r={r} fill="#fff" opacity={0.85}/>
      ))}
      {/* planet */}
      <circle cx="50" cy="50" r="28" fill={`url(#g-${glow.slice(1)})`}/>
      {/* ring (for tier 3) */}
      {glow === '#CAFF33' && (
        <ellipse cx="50" cy="50" rx="40" ry="8" fill="none" stroke={glow} strokeWidth="1.5" opacity="0.7" transform="rotate(-18 50 50)"/>
      )}
      {/* surface detail */}
      <ellipse cx="42" cy="44" rx="6" ry="3" fill={c2} opacity="0.35"/>
      <ellipse cx="58" cy="56" rx="8" ry="4" fill={c2} opacity="0.25"/>
      {/* shine */}
      <ellipse cx="40" cy="38" rx="6" ry="3" fill="#fff" opacity="0.35"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Compact plan card for Profile
// ─────────────────────────────────────────────────────────────
function ProfilePlanCard({ theme, currentPlanId, expiresAt, active, onOpen }) {
  const plan = PLANS.find(p => p.id === currentPlanId) || PLANS[0];
  const isFree = plan.id === 'free' || !active;
  const subline = isFree
    ? 'NO PLAN · TAP TO SUBSCRIBE'
    : `$${plan.priceDisplay}/MO · RENEWS ${fmtPlanDate(expiresAt)}`;
  return (
    <button onClick={onOpen} style={{
      width: '100%', padding: 0, border: 'none', cursor: 'pointer',
      borderRadius: 18, overflow: 'hidden', textAlign: 'left',
      background: `linear-gradient(135deg, ${plan.palette[0]} 0%, ${plan.palette[1]} 100%)`,
      position: 'relative', color: '#fff',
    }}>
      {/* starfield bg */}
      <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none"
        style={{ position: 'absolute', inset: 0, opacity: 0.6, pointerEvents: 'none' }}>
        {[[40,30,1],[120,60,0.7],[200,20,1.2],[280,80,0.8],[340,40,0.9],
          [70,140,0.6],[160,180,1],[230,150,0.8],[310,170,1.1],[380,120,0.7],
          [20,90,0.5],[100,110,0.9],[180,100,0.6]].map(([x,y,r], i) => (
          <circle key={i} cx={x} cy={y} r={r} fill="#fff"/>
        ))}
      </svg>
      <div style={{ position: 'relative', padding: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
        <PlanCelestial palette={plan.palette} glow={plan.glow} size={86} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 10, color: plan.glow,
            letterSpacing: 1, fontWeight: 700,
          }}>YOUR PLAN</div>
          <div style={{
            fontFamily: theme.fontDisplay, fontSize: 22, color: '#fff',
            letterSpacing: 0.2, lineHeight: 1, marginTop: 4,
            textTransform: 'uppercase',
          }}>{plan.name}</div>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 10, color: 'rgba(255,255,255,0.65)',
            letterSpacing: 0.5, marginTop: 4, fontWeight: 600,
          }}>{subline}</div>
        </div>
        <div style={{
          padding: '8px 12px', borderRadius: 99,
          background: 'rgba(255,255,255,0.15)',
          backdropFilter: 'blur(10px)',
          fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700,
          letterSpacing: 1, color: '#fff', whiteSpace: 'nowrap',
        }}>{isFree ? 'SUBSCRIBE →' : 'MANAGE →'}</div>
      </div>
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// Full plans screen
// ─────────────────────────────────────────────────────────────
function PlansScreen({ theme, currentPlanId, onBack, onSubscribe }) {
  const [selected, setSelected] = useStateP(currentPlanId === 'free' ? 'basic' : currentPlanId);

  return (
    <div style={{
      paddingBottom: 130,
      background: '#03050E',
      minHeight: '100%', color: '#fff',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Starfield background */}
      <svg width="100%" height="100%" viewBox="0 0 400 1200" preserveAspectRatio="none"
        style={{ position: 'absolute', inset: 0, opacity: 0.7, pointerEvents: 'none' }}>
        <defs>
          <radialGradient id="bgGlow" cx="20%" cy="10%">
            <stop offset="0%" stopColor="#7A5AE0" stopOpacity="0.25"/>
            <stop offset="100%" stopColor="#03050E" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="bgGlow2" cx="90%" cy="40%">
            <stop offset="0%" stopColor="#C72820" stopOpacity="0.18"/>
            <stop offset="100%" stopColor="#03050E" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="400" height="1200" fill="url(#bgGlow)"/>
        <rect width="400" height="1200" fill="url(#bgGlow2)"/>
        {Array.from({ length: 80 }, (_, i) => {
          const x = (i * 73) % 400;
          const y = (i * 137) % 1200;
          const r = (i % 5 === 0) ? 1.4 : (i % 3 === 0) ? 1 : 0.6;
          return <circle key={i} cx={x} cy={y} r={r} fill="#fff" opacity={(i % 4) * 0.25 + 0.3}/>;
        })}
      </svg>

      {/* Top bar */}
      <div style={{
        paddingTop: 58, paddingBottom: 8, paddingLeft: theme.pad, paddingRight: theme.pad,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative',
      }}>
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12,
          background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 10, color: 'rgba(255,255,255,0.5)',
          letterSpacing: 1, fontWeight: 700,
        }}>MISSION CONTROL</div>
      </div>

      {/* Hero */}
      <div style={{ padding: `4px ${theme.pad}px 0`, position: 'relative' }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 10, color: '#CAFF33',
          letterSpacing: 1.5, fontWeight: 700, marginBottom: 8,
        }}>★ CHOOSE YOUR ALTITUDE</div>
        <div style={{
          fontFamily: theme.fontDisplay, fontSize: 40, color: '#fff',
          letterSpacing: 0.2, lineHeight: 0.9, textTransform: 'uppercase',
        }}>
          HOW FAR<br/>YOU GOING?
        </div>
        <div style={{
          fontFamily: theme.fontBody, fontSize: 14, color: 'rgba(255,255,255,0.65)',
          marginTop: 12, lineHeight: 1.5,
        }}>
          Three orbits. Cancel anytime. The further out you go, the more we put behind your launch.
        </div>
      </div>

      {/* Plan cards */}
      <div style={{ padding: `${theme.gap + 8}px ${theme.pad}px 0`, display: 'flex', flexDirection: 'column', gap: 12, position: 'relative' }}>
        {PLANS.map((p, i) => {
          const isCurrent = p.id === currentPlanId;
          const isSelected = p.id === selected;
          return (
            <button
              key={p.id}
              onClick={() => {
                setSelected(p.id);
                // Tapping a plan goes straight to checkout (or activates Free).
                if (p.id !== currentPlanId && onSubscribe) onSubscribe(p.id);
              }}
              style={{
                padding: 0, border: 'none', cursor: 'pointer',
                borderRadius: 20, overflow: 'hidden', textAlign: 'left',
                position: 'relative',
                background: `linear-gradient(160deg, ${p.palette[0]}40 0%, ${p.palette[1]} 70%, #03050E 100%)`,
                boxShadow: isSelected
                  ? `0 0 0 2px ${p.glow}, 0 12px 40px ${p.glow}35`
                  : `0 0 0 1px rgba(255,255,255,0.08)`,
                transition: 'box-shadow .25s ease',
              }}
            >
              {/* badge */}
              {p.badge && (
                <div style={{
                  position: 'absolute', top: 14, right: 14, zIndex: 2,
                  padding: '5px 10px', borderRadius: 99,
                  background: p.glow, color: '#0A0A0A',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 9, fontWeight: 700,
                  letterSpacing: 1,
                }}>{p.badge}</div>
              )}

              <div style={{ padding: 18, display: 'flex', alignItems: 'flex-start', gap: 14, position: 'relative' }}>
                <PlanCelestial palette={p.palette} glow={p.glow} size={88} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: p.glow,
                    letterSpacing: 1.2, fontWeight: 700, textTransform: 'uppercase',
                  }}>{p.short} · {p.coords}</div>
                  <div style={{
                    fontFamily: theme.fontDisplay, fontSize: 26, color: '#fff',
                    letterSpacing: 0.3, lineHeight: 1, marginTop: 4,
                    textTransform: 'uppercase',
                  }}>{p.name}</div>
                  <div style={{
                    fontFamily: theme.fontBody, fontSize: 13, color: 'rgba(255,255,255,0.75)',
                    marginTop: 6, lineHeight: 1.4, fontStyle: 'italic',
                  }}>{p.tagline}</div>
                  <div style={{ marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                    <span style={{ fontFamily: theme.fontDisplay, fontSize: 32, color: '#fff', lineHeight: 1, letterSpacing: -0.5 }}>
                      <span style={{ fontSize: 16, opacity: 0.7 }}>$</span>{p.priceDisplay}
                    </span>
                    <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'rgba(255,255,255,0.55)', letterSpacing: 0.5, fontWeight: 600 }}>
                      /MO
                    </span>
                  </div>
                </div>
              </div>

              {/* perks */}
              <div style={{
                padding: '0 18px 18px',
                borderTop: '1px solid rgba(255,255,255,0.08)',
                marginTop: 4, paddingTop: 14,
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                {p.perks.map((perk, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <div style={{
                      width: 16, height: 16, borderRadius: 99,
                      background: `${p.glow}30`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0, marginTop: 1,
                    }}>
                      <svg width="9" height="9" viewBox="0 0 14 14" fill="none">
                        <path d="M2 7l3.5 3.5L12 4" stroke={p.glow} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </div>
                    <span style={{
                      fontFamily: theme.fontBody, fontSize: 13, color: 'rgba(255,255,255,0.85)',
                      lineHeight: 1.4, fontWeight: 500,
                    }}>{perk}</span>
                  </div>
                ))}
              </div>

              {/* À la carte add-ons (Launch Pad + Orbit) */}
              {p.addons && (
                <div style={{
                  margin: '0 18px 16px', padding: 12, borderRadius: 12,
                  background: 'rgba(0,0,0,0.25)',
                  border: '1px dashed rgba(255,255,255,0.15)',
                }}>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: p.glow,
                    letterSpacing: 1.2, fontWeight: 700, marginBottom: 8,
                  }}>
                    ★ À LA CARTE {p.id === 'orbit' && '· 30% OFF'}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                    {p.addons.map((a, k) => (
                      <div key={k} style={{
                        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      }}>
                        <span style={{
                          fontFamily: theme.fontBody, fontSize: 12, color: 'rgba(255,255,255,0.7)',
                        }}>{a.l}</span>
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                          {a.strike && (
                            <span style={{
                              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                              color: 'rgba(255,255,255,0.35)', textDecoration: 'line-through',
                              fontWeight: 600,
                            }}>{a.strike}</span>
                          )}
                          <span style={{
                            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                            color: '#fff', fontWeight: 700,
                          }}>{a.p}</span>
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Nashville HQ callout (Stratosphere) */}
              {p.location && (
                <div style={{
                  margin: '0 18px 16px', padding: 14, borderRadius: 12,
                  background: `linear-gradient(135deg, ${p.glow}25 0%, transparent 100%)`,
                  border: `1px solid ${p.glow}40`,
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: p.glow, color: '#0A0A0A',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                      <path d="M12 22s-7-7-7-13a7 7 0 0114 0c0 6-7 13-7 13z" stroke="#0A0A0A" strokeWidth="2" strokeLinejoin="round"/>
                      <circle cx="12" cy="9" r="2.5" stroke="#0A0A0A" strokeWidth="2"/>
                    </svg>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: p.glow,
                      letterSpacing: 1.2, fontWeight: 700,
                    }}>BASED IN</div>
                    <div style={{
                      fontFamily: theme.fontDisplay, fontSize: 20, color: '#fff',
                      letterSpacing: 0.2, lineHeight: 1, marginTop: 2,
                      textTransform: 'uppercase',
                    }}>NASHVILLE HQ</div>
                    <div style={{
                      fontFamily: theme.fontBody, fontSize: 11, color: 'rgba(255,255,255,0.7)',
                      marginTop: 4, lineHeight: 1.4,
                    }}>
                      In-person sessions · studio time · co-writing rooms
                    </div>
                  </div>
                </div>
              )}

              {/* status pill */}
              <div style={{ padding: '0 18px 18px' }}>
                <div style={{
                  padding: '10px 14px', borderRadius: 10, textAlign: 'center',
                  background: isCurrent
                    ? 'rgba(255,255,255,0.08)'
                    : isSelected
                      ? p.glow
                      : 'rgba(255,255,255,0.06)',
                  color: isCurrent
                    ? 'rgba(255,255,255,0.7)'
                    : isSelected
                      ? '#0A0A0A'
                      : '#fff',
                  border: !isCurrent && !isSelected ? '1px solid rgba(255,255,255,0.12)' : 'none',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700,
                  letterSpacing: 1, textTransform: 'uppercase',
                }}>
                  {isCurrent ? '★ CURRENT PLAN' :
                   p.id === 'free' ? 'SWITCH TO FREE' :
                   `GET ${p.name} →`}
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {/* FAQ-ish strip */}
      <div style={{ padding: `${theme.gap + 8}px ${theme.pad}px 0`, position: 'relative' }}>
        <Card theme={{ ...theme, surface: 'rgba(255,255,255,0.05)', border: 'rgba(255,255,255,0.12)' }}
          style={{ padding: 14, background: 'rgba(255,255,255,0.05)', borderColor: 'rgba(255,255,255,0.12)' }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'rgba(255,255,255,0.5)',
            letterSpacing: 1, fontWeight: 700, marginBottom: 8,
          }}>★ THE FINE PRINT</div>
          <div style={{ fontFamily: theme.fontBody, fontSize: 13, color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>
            Cancel or change orbit anytime. We pro-rate upgrades and refund downgrades. Stratosphere is invite-only — apply and we'll review within 7 days.
          </div>
        </Card>
      </div>

      {/* Sticky CTA */}
      <div style={{
        position: 'absolute', bottom: 24, left: theme.pad, right: theme.pad,
        background: 'rgba(10,10,20,0.85)',
        backdropFilter: 'blur(20px)',
        borderRadius: 16, padding: 12,
        border: '1px solid rgba(255,255,255,0.12)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, fontWeight: 700 }}>
            SELECTED ALTITUDE
          </div>
          <div style={{ fontFamily: theme.fontDisplay, fontSize: 18, color: '#fff', lineHeight: 1, marginTop: 2, letterSpacing: 0.2 }}>
            {PLANS.find(p => p.id === selected).name} · ${PLANS.find(p => p.id === selected).priceDisplay}/MO
          </div>
        </div>
        <button
          onClick={() => onSubscribe && onSubscribe(selected)}
          disabled={selected === currentPlanId}
          style={{
            background: selected === currentPlanId ? 'rgba(255,255,255,0.1)' : '#CAFF33',
            color: selected === currentPlanId ? 'rgba(255,255,255,0.5)' : '#0A0A0A',
            fontFamily: theme.fontDisplay, fontSize: 14, letterSpacing: 1,
            padding: '14px 18px', borderRadius: 12, border: 'none',
            cursor: selected === currentPlanId ? 'default' : 'pointer',
            textTransform: 'uppercase',
          }}>
          {selected === currentPlanId ? 'CURRENT' :
           selected === 'free' ? 'SWITCH TO FREE' : 'SUBSCRIBE →'}
        </button>
      </div>
    </div>
  );
}

window.LAUNCH_SCREENS_4 = { PlansScreen, ProfilePlanCard, PLANS };