// Unified screen shell for Extra Dollar.
// Every screen uses these primitives so spacing/type/chrome are identical.

const ED_SAFE_TOP = 64;       // status bar + breathing room (status bar lives at y=0..47)
const ED_SAFE_BOTTOM = 34;    // home indicator
const ED_TAB_HEIGHT = 78;     // tab bar reserved height
const ED_GUTTER = 24;         // horizontal page gutter

// Outer screen container — full height, owns background.
function EDScreen({ children, bg = ED_PAPER, dark = false }) {
  return (
    <div style={{
      height: "100%", width: "100%",
      background: bg,
      color: dark ? ED_CREAM : ED_FOREST,
      display: "flex", flexDirection: "column",
      position: "relative", overflow: "hidden",
    }}>{children}</div>
  );
}

// Header band. ALWAYS at the same y position. Owns eyebrow + title + back/trailing.
// Use this for light-mode screens. For dark hero blocks, use EDHero.
function EDHeader({
  back, trailing, eyebrow, title, subtitle,
  dark = false, paddingTop = ED_SAFE_TOP, paddingBottom = 16,
  showBackRow = true,
}) {
  const fg = dark ? ED_CREAM : ED_FOREST;
  const sub = dark ? ED_ON_DARK_2 : ED_FG2;
  const eyebrowColor = dark ? ED_BILL : ED_FG3;
  const showRow = showBackRow && (back || trailing);
  return (
    <div style={{ flexShrink: 0, padding: `${paddingTop}px ${ED_GUTTER}px ${paddingBottom}px` }}>
      {showRow && (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 36, marginBottom: 14 }}>
          {back ? <EDBackButton onClick={back} variant={dark ? "dark" : "light"}/> : <span style={{ width: 36, height: 36 }}/>}
          {trailing || <span/>}
        </div>
      )}
      {eyebrow && (
        <EDEyebrow color={eyebrowColor} style={{ marginBottom: 8 }}>{eyebrow}</EDEyebrow>
      )}
      {title && (
        <h1 style={{ margin: 0, fontSize: 28, fontWeight: 800, letterSpacing: "-0.025em", lineHeight: 1.1, color: fg }}>{title}</h1>
      )}
      {subtitle && (
        <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.5, color: sub, maxWidth: 340 }}>{subtitle}</p>
      )}
    </div>
  );
}

// Dark "hero" header band — used by Profile, Card Detail, Txn Detail, Referral, Pay Confirm, DashC.
// Owns: bg color, padding, optional back/trailing chrome row, optional decorative blob.
// Content (title, stats, custom layout) is composed by the caller.
function EDHero({
  back, trailing,
  bg = ED_FOREST_900,
  decorative = true,
  paddingTop = ED_SAFE_TOP,
  paddingBottom = 28,
  bottomRadius = 0,           // set 24 to make a "card-like" hero (used by DashC)
  children,
  style = {},
}) {
  const showRow = !!(back || trailing);
  return (
    <div style={{
      flexShrink: 0, background: bg, color: ED_ON_DARK,
      padding: `${paddingTop}px ${ED_GUTTER}px ${paddingBottom}px`,
      position: "relative", overflow: "hidden",
      borderRadius: bottomRadius ? `0 0 ${bottomRadius}px ${bottomRadius}px` : 0,
      ...style,
    }}>
      {decorative && (
        <div style={{
          position: "absolute", top: -100, right: -80, width: 280, height: 280, borderRadius: "50%",
          background: `radial-gradient(circle, ${ED_BILL}26, transparent 70%)`, pointerEvents: "none",
        }}/>
      )}
      {showRow && (
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          marginBottom: 18, position: "relative", height: 36,
        }}>
          {back ? <EDBackButton onClick={back} variant="dark"/> : <span style={{ width: 36, height: 36 }}/>}
          {trailing || <span/>}
        </div>
      )}
      <div style={{ position: "relative" }}>{children}</div>
    </div>
  );
}

// Body region — scrollable content. Locked gutters.
function EDBody({ children, noGutter = false, style = {} }) {
  return (
    <div style={{
      flex: 1, minHeight: 0,
      overflowY: "auto", overflowX: "hidden",
      padding: noGutter ? 0 : `0 ${ED_GUTTER}px`,
      WebkitOverflowScrolling: "touch",
      ...style,
    }}>{children}</div>
  );
}

// Footer band — sticky bottom CTAs.
function EDFooter({ children, dark = false, reserveBottom = ED_SAFE_BOTTOM, gap = 10 }) {
  return (
    <div style={{
      flexShrink: 0,
      padding: `16px ${ED_GUTTER}px ${reserveBottom + 8}px`,
      background: dark ? "transparent" : "transparent",
      display: "flex", flexDirection: "column", gap,
      position: "relative", zIndex: 5,
    }}>{children}</div>
  );
}

// Primary CTA — locked across every screen.
//   variant: "light"  → forest bg, cream fg (default, on light backgrounds)
//   variant: "dark"   → bill (green) bg, forest_900 fg (on dark backgrounds)
//   variant: "apple"  → black bg, white fg ("Continue with Apple"-style only)
// `dark` prop is kept as a shorthand for variant="dark" (back-compat).
function EDPrimaryButton({ children, onClick, dark = false, variant, disabled = false, style = {} }) {
  const v = variant || (dark ? "dark" : "light");
  const palette = {
    light: { bg: ED_FOREST,    fg: ED_CREAM },
    dark:  { bg: ED_BILL,      fg: ED_FOREST_900 },
    apple: { bg: "#000",       fg: "#fff" },
  }[v];
  return (
    <button onClick={onClick} disabled={disabled} style={{
      width: "100%", height: 54, borderRadius: ED_R_BTN, border: "none",
      cursor: disabled ? "not-allowed" : "pointer",
      background: palette.bg, color: palette.fg,
      fontSize: 16, fontWeight: 700, fontFamily: "inherit",
      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
      letterSpacing: "-0.005em",
      opacity: disabled ? 0.4 : 1,
      ...style,
    }}>{children}</button>
  );
}

function EDSecondaryButton({ children, onClick, dark = false, style = {} }) {
  return (
    <button onClick={onClick} style={{
      width: "100%", height: 54, borderRadius: ED_R_BTN, cursor: "pointer",
      background: "transparent",
      color: dark ? ED_CREAM : ED_FOREST,
      border: dark ? `1px solid ${ED_ON_DARK_BORDER}` : `1px solid rgba(6,57,50,0.18)`,
      fontSize: 16, fontWeight: 600, fontFamily: "inherit",
      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
      ...style,
    }}>{children}</button>
  );
}

// Logo — uses the actual brand asset
function EDLogo({ tone = "forest", height = 22 }) {
  const src = {
    forest: "/assets/logo-forest.png",
    cream: "/assets/logo-cream.png",
    bill: "/assets/logo-bill.png",
    black: "/assets/logo-black.png",
  }[tone];
  return <img src={src} alt="Extra Dollar" style={{ height, width: "auto", display: "block" }}/>;
}

// Step counter — locked position above title in onboarding.
function EDStep({ n, total, dark = false }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      fontSize: 11, fontWeight: 700, letterSpacing: ED_TRACK_CAPS, textTransform: "uppercase",
      color: dark ? ED_BILL : ED_FG3,
    }}>
      <span>Step {n} of {total}</span>
      <span style={{ display: "inline-flex", gap: 4 }}>
        {Array.from({ length: total }).map((_, i) => (
          <span key={i} style={{
            width: i < n ? 16 : 6, height: 4, borderRadius: ED_R_XS,
            background: i < n ? (dark ? ED_BILL : ED_FOREST) : (dark ? "rgba(238,230,227,0.2)" : "rgba(6,57,50,0.15)"),
            transition: "all 200ms",
          }}/>
        ))}
      </span>
    </div>
  );
}

// Fallback screen — shown when an unknown screen ID is requested.
// Replaces the old "blank white screen + React crash" failure mode.
function ScrFallback({ screenId, onBack }) {
  return (
    <EDScreen>
      <EDHeader back={onBack} eyebrow="Heads up" title="Coming soon"
        subtitle={screenId
          ? `"${screenId}" isn't built yet — but the app didn't crash. We're working on it.`
          : "This screen isn't built yet. Tap back to return."}
      />
      <EDBody>
        <div style={{
          background: "#fff", borderRadius: 18, padding: 18, border: `1px solid ${ED_LINE}`,
          color: ED_FG2, fontSize: 14, lineHeight: 1.5,
        }}>
          You found a destination that's planned for a future release. The team has been
          notified — for now, you can return to the dashboard or explore another tab.
        </div>
      </EDBody>
      <EDFooter>
        <EDPrimaryButton onClick={onBack}>Back to dashboard</EDPrimaryButton>
      </EDFooter>
    </EDScreen>
  );
}

Object.assign(window, {
  ED_SAFE_TOP, ED_SAFE_BOTTOM, ED_TAB_HEIGHT, ED_GUTTER,
  EDScreen, EDHeader, EDHero, EDBody, EDFooter,
  EDPrimaryButton, EDSecondaryButton, EDLogo, EDStep, ScrFallback,
});