// Shared UI primitives used across scenes. Brand-matched to the app screenshots.
// Cream bg, emerald primary, white cards, soft borders.

const BRAND = {
  bg: '#f6f4ef',
  card: '#ffffff',
  border: '#e8e4d9',
  borderSoft: '#efece4',
  ink: '#0f172a',
  inkSoft: '#475569',
  inkSub: '#94a3b8',
  green: '#047857',
  greenMid: '#10b981',
  greenSoft: '#d1fae5',
  greenSofter: '#ecfdf5',
  amber: '#d97706',
  amberSoft: '#fef3c7',
  rose: '#dc2626',
  roseSoft: '#fee2e2',
  shadow: '0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.04)',
  font: '"Inter", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

// Subject colors as observed in app screenshots — soft tinted bg + saturated left bar
const SUBJECTS = {
  Math:    { name: 'Mathematics',   bg: '#e8efff', bar: '#3b82f6', text: '#1e3a8a' },
  English: { name: 'English',       bg: '#e7edff', bar: '#6366f1', text: '#3730a3' },
  Hindi:   { name: 'Hindi',         bg: '#e2f2ea', bar: '#10b981', text: '#065f46' },
  Science: { name: 'Science',       bg: '#fde8e6', bar: '#ef4444', text: '#991b1b' },
  Social:  { name: 'Social Sci.',   bg: '#ece4f8', bar: '#8b5cf6', text: '#5b21b6' },
  Art:     { name: 'Art',           bg: '#fce7e2', bar: '#ef4444', text: '#9b2c2c' },
  Music:   { name: 'Music',         bg: '#ece2f0', bar: '#a855f7', text: '#6b21a8' },
  PE:      { name: 'PE',            bg: '#e3f1e7', bar: '#22c55e', text: '#15803d' },
  IT:      { name: 'IT',            bg: '#fdf3dd', bar: '#d97706', text: '#92400e' },
  Stem:    { name: 'Stem',          bg: '#fde6e1', bar: '#fb7185', text: '#9f1239' },
  Library: { name: 'Library',       bg: '#dff4ee', bar: '#14b8a6', text: '#115e59' },
  Dance:   { name: 'Dance',         bg: '#e7e5ff', bar: '#818cf8', text: '#3730a3' },
  Punjabi: { name: 'Punjabi',       bg: '#fde4ee', bar: '#ec4899', text: '#9d174d' },
  French:  { name: 'French',        bg: '#e2ecff', bar: '#3b82f6', text: '#1e3a8a' },
  GK:      { name: 'GK',            bg: '#ece2f0', bar: '#a855f7', text: '#6b21a8' },
  Value:   { name: 'Value Ed.',     bg: '#fdf0d6', bar: '#d97706', text: '#92400e' },
};

// ── App window chrome (top bar + soft frame) ────────────────────────────────
function AppFrame({ x = 0, y = 0, width, height, children, style }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width, height,
      background: BRAND.bg,
      borderRadius: 18,
      border: `1px solid ${BRAND.border}`,
      overflow: 'hidden',
      fontFamily: BRAND.font,
      boxShadow: '0 30px 80px rgba(15,23,42,0.10), 0 6px 16px rgba(15,23,42,0.04)',
      ...style,
    }}>
      {children}
    </div>
  );
}

function TopChrome({ school = 'Sunridge Academy', year = '2025-26', role = 'Admin' }) {
  return (
    <div style={{
      height: 64, padding: '0 28px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid ${BRAND.borderSoft}`,
      background: BRAND.bg,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: BRAND.greenSoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={BRAND.green} strokeWidth="2">
            <path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01"/>
          </svg>
        </div>
        <div>
          <div style={{ fontSize: 15, fontWeight: 600, color: BRAND.ink, lineHeight: 1.1 }}>{school}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, whiteSpace: 'nowrap' }}>
            <span style={{ fontSize: 12, color: BRAND.inkSoft, whiteSpace: 'nowrap' }}>{year}</span>
            <span style={{
              fontSize: 11, fontWeight: 600,
              padding: '2px 7px', borderRadius: 6,
              background: '#fef3c7', color: '#92400e',
            }}>{role}</span>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          padding: '6px 12px', borderRadius: 999,
          background: BRAND.greenSoft, color: BRAND.green,
          fontSize: 13, fontWeight: 600,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M2 6l5 4 5-7 5 7 5-4-2 13H4z"/></svg>
          Growth
        </div>
        <div style={{
          width: 30, height: 30, borderRadius: 999,
          background: BRAND.green, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 13, fontWeight: 600,
        }}>C</div>
      </div>
    </div>
  );
}

// ── Card / Pill / Button ────────────────────────────────────────────────────
function Card({ children, style }) {
  return (
    <div style={{
      background: BRAND.card,
      border: `1px solid ${BRAND.border}`,
      borderRadius: 14,
      padding: 24,
      boxShadow: BRAND.shadow,
      ...style,
    }}>{children}</div>
  );
}

function Pill({ children, tone = 'green', style }) {
  const tones = {
    green: { bg: BRAND.greenSoft, fg: BRAND.green },
    amber: { bg: BRAND.amberSoft, fg: BRAND.amber },
    rose:  { bg: BRAND.roseSoft, fg: BRAND.rose },
    ink:   { bg: '#e2e8f0', fg: BRAND.ink },
  };
  const t = tones[tone] || tones.green;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '3px 9px', borderRadius: 999,
      fontSize: 12, fontWeight: 600,
      whiteSpace: 'nowrap',
      background: t.bg, color: t.fg,
      ...style,
    }}>{children}</span>
  );
}

function PrimaryButton({ children, hot = false, style }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '12px 18px', borderRadius: 10,
      background: BRAND.green, color: '#fff',
      fontSize: 14, fontWeight: 600,
      boxShadow: hot
        ? `0 0 0 6px ${BRAND.greenSoft}, 0 8px 24px rgba(4,120,87,0.32)`
        : '0 2px 6px rgba(4,120,87,0.18)',
      transition: 'box-shadow 200ms',
      ...style,
    }}>{children}</div>
  );
}

// ── Step indicator (the 6-step wizard strip) ────────────────────────────────
function StepStrip({ active = 0, completed = [] }) {
  const steps = ['School', 'Classes', 'Periods', 'Subjects', 'Teachers'];
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      background: '#fff', border: `1px solid ${BRAND.border}`,
      borderRadius: 14, padding: '18px 24px',
      gap: 0,
    }}>
      {steps.map((s, i) => {
        const isDone = completed.includes(i);
        const isActive = i === active;
        return (
          <React.Fragment key={s}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 26, height: 26, borderRadius: 999,
                background: isDone ? BRAND.greenSoft : (isActive ? BRAND.green : '#f1efe8'),
                color: isDone ? BRAND.green : (isActive ? '#fff' : BRAND.inkSub),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 700,
                transition: 'all 240ms ease',
              }}>
                {isDone ? (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M4 12l5 5 11-12"/>
                  </svg>
                ) : (i + 1)}
              </div>
              <span style={{
                fontSize: 14,
                fontWeight: isActive ? 700 : 500,
                color: isDone || isActive ? BRAND.ink : BRAND.inkSub,
                whiteSpace: 'nowrap',
              }}>{s}</span>
            </div>
            {i < steps.length - 1 && (
              <div style={{
                flex: 1, height: 1,
                background: isDone ? BRAND.greenMid : BRAND.borderSoft,
                margin: '0 14px',
                transition: 'background 240ms',
              }}/>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ── Timetable cell ──────────────────────────────────────────────────────────
function Cell({ subject, teacher, w = 110, h = 64, opacity = 1, glow = false }) {
  const s = SUBJECTS[subject];
  if (!s) return <div style={{ width: w, height: h, opacity }}/>;
  return (
    <div style={{
      width: w, height: h, opacity,
      background: s.bg,
      borderLeft: `4px solid ${s.bar}`,
      borderRadius: 6,
      padding: '8px 10px',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      boxShadow: glow ? `0 0 0 3px ${BRAND.greenSoft}` : 'none',
      transition: 'box-shadow 200ms',
    }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: s.text, lineHeight: 1.1 }}>{s.name}</div>
      {teacher && <div style={{ fontSize: 11, color: '#64748b' }}>{teacher}</div>}
    </div>
  );
}

// ── Phone frame (for WhatsApp + portal) ─────────────────────────────────────
function Phone({ x = 0, y = 0, width = 320, height = 640, children, style }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width, height,
      background: '#0f172a',
      borderRadius: 44,
      padding: 8,
      boxShadow: '0 30px 60px rgba(15,23,42,0.35), 0 10px 20px rgba(15,23,42,0.18)',
      ...style,
    }}>
      <div style={{
        width: '100%', height: '100%',
        background: '#fff',
        borderRadius: 36,
        overflow: 'hidden',
        position: 'relative',
        fontFamily: BRAND.font,
      }}>
        <div style={{
          position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
          width: 90, height: 22, background: '#0f172a', borderRadius: 999, zIndex: 10,
        }}/>
        {children}
      </div>
    </div>
  );
}

// ── Caption strip (lower-thirds style) ──────────────────────────────────────
function Caption({ children, x = 96, y = 880, color = BRAND.ink, size = 38, weight = 600, opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      color, fontSize: size, fontWeight: weight,
      letterSpacing: '-0.02em', lineHeight: 1.1,
      fontFamily: BRAND.font,
      opacity,
    }}>{children}</div>
  );
}

// ── Section label (small uppercase) ─────────────────────────────────────────
function SectionLabel({ children, color = BRAND.inkSub }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
      textTransform: 'uppercase', color,
      whiteSpace: 'nowrap',
    }}>{children}</div>
  );
}

Object.assign(window, {
  BRAND, SUBJECTS,
  AppFrame, TopChrome,
  Card, Pill, PrimaryButton,
  StepStrip, Cell, Phone,
  Caption, SectionLabel,
});