// layout.jsx — Shell, TopBar, SideNav, TweakContext, persona data
// Exports: PERSONAS, NAV_ITEMS, TweakContext, TopBar, SideNav, Shell

const PERSONAS = {
  nour: {
    id: 'nour', name: 'Nour Cairo', nameAr: 'نور كايرو',
    domain: 'nour-cairo.myshopify.com', plan: 'Growth', trialDays: 18,
    currency: 'EGP', locale: 'ar-EG', industry: 'Fashion',
    avatar: 'NC', color: '#8B5A2B',
    stats: { installs: 1240, sessions: 2480, conversion: 3.2, revenue: 12400, pushSent: 8, pushOpen: '18.4%' },
    appName: 'Nour Cairo', appIcon: '👗', status: 'trialing',
  },
  marcus: {
    id: 'marcus', name: 'Marcus Electronics', nameAr: null,
    domain: 'marcus-electronics.myshopify.com', plan: 'Pro', trialDays: null,
    currency: 'USD', locale: 'en-US', industry: 'Electronics',
    avatar: 'ME', color: '#2F6F5A',
    stats: { installs: 3847, sessions: 7694, conversion: 4.8, revenue: 28900, pushSent: 24, pushOpen: '12.6%' },
    appName: 'Marcus Electronics', appIcon: '🎧', status: 'active',
  },
};

const NAV_ITEMS = [
  { id: 'overview',     label: 'Overview',        icon: 'home',         group: null },
  { id: 'editor',       label: 'App editor',      icon: 'layers',       group: 'Your app' },
  { id: 'publishing',   label: 'Publishing',       icon: 'upload-cloud', group: 'Your app' },
  { id: 'campaigns',    label: 'Campaigns',        icon: 'bell',         group: 'Marketing', badge: null },
  { id: 'analytics',    label: 'Analytics',        icon: 'bar-chart-2',  group: 'Marketing' },
  { id: 'integrations', label: 'Integrations',     icon: 'puzzle',       group: 'Grow' },
  { id: 'settings',     label: 'Settings',         icon: 'settings',     group: 'Account' },
  { id: 'admin',        label: 'Platform admin',   icon: 'shield',       group: 'Platform' },
];

const TweakContext = React.createContext({
  store: 'nour', rtl: false, dark: false, test: false, compact: false,
  persona: PERSONAS.nour,
});

// TopBar
const TopBar = ({ screen, onNav, persona, testMode }) => {
  const screenLabel = NAV_ITEMS.find(n => n.id === screen)?.label || '';
  return (
    <div style={{
      height: 'var(--topbar-h)', background: 'var(--bg)', borderBottom: '1px solid var(--hairline)',
      display: 'flex', alignItems: 'center', padding: '0 24px', gap: 16,
      position: 'sticky', top: 0, zIndex: 100, flexShrink: 0,
    }}>
      {/* Logo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
        <img src="assets/logo-lockup.svg" alt="Shoplix" style={{ height: 22 }} />
      </div>

      {/* Separator */}
      <div style={{ width: 1, height: 20, background: 'var(--hairline)', flexShrink: 0 }}></div>

      {/* Breadcrumb */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--fg-2)', overflow: 'hidden' }}>
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 140 }}>{persona.name}</span>
        {screenLabel && <><span style={{ color: 'var(--fg-4)' }}>/</span><span style={{ color: 'var(--ink)', fontWeight: 500 }}>{screenLabel}</span></>}
      </div>

      {/* Spacer */}
      <div style={{ flex: 1 }}></div>

      {/* Test mode banner */}
      {testMode && (
        <div style={{ padding: '4px 12px', borderRadius: 999, background: 'var(--amber-tint)', color: 'var(--amber)', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', border: '1px solid var(--amber-tint)', flexShrink: 0 }}>
          ● Test mode
        </div>
      )}

      {/* Search */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--white)', border: '1px solid var(--hairline)', borderRadius: 8, padding: '6px 12px', fontSize: 13, color: 'var(--fg-3)', width: 210, cursor: 'text', flexShrink: 0 }}>
        <i data-lucide="search" style={{ width: 13, height: 13, color: 'var(--fg-4)' }}></i>
        <span>Search…</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10, background: 'var(--sand-50)', border: '1px solid var(--hairline)', borderRadius: 4, padding: '1px 5px', color: 'var(--fg-3)' }}>⌘K</span>
      </div>

      {/* Bell */}
      <button style={{ width: 34, height: 34, borderRadius: 8, border: '1px solid var(--hairline)', background: 'var(--white)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-2)', position: 'relative', flexShrink: 0 }}>
        <i data-lucide="bell" style={{ width: 15, height: 15 }}></i>
        <span style={{ position: 'absolute', top: 5, right: 5, width: 7, height: 7, borderRadius: '50%', background: 'var(--honey)', border: '2px solid var(--bg)' }}></span>
      </button>

      {/* Avatar */}
      <div style={{ width: 34, height: 34, borderRadius: '50%', background: persona.color, color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600, flexShrink: 0, cursor: 'pointer' }}>
        {persona.avatar}
      </div>
    </div>
  );
};

// SideNav
const SideNav = ({ activeScreen, onNav, persona, compact }) => {
  const groups = [...new Set(NAV_ITEMS.map(n => n.group))];
  const grouped = groups.map(g => ({ group: g, items: NAV_ITEMS.filter(n => n.group === g) }));

  const planColors = { trialing: 'var(--amber)', active: 'var(--mint)', past_due: 'var(--ruby)' };
  const trialBarPct = persona.trialDays ? Math.round((persona.trialDays / 30) * 100) : 100;

  return (
    <div style={{
      width: 'var(--nav-width)', background: 'var(--bg)', borderRight: '1px solid var(--hairline)',
      display: 'flex', flexDirection: 'column', height: '100%', overflow: 'auto', flexShrink: 0,
    }}>
      <div style={{ flex: 1, padding: compact ? '12px 8px' : '16px 8px', display: 'flex', flexDirection: 'column', gap: 6 }}>

        {/* Ungrouped (Overview) */}
        {NAV_ITEMS.filter(n => !n.group).map(item => (
          <NavItem key={item.id} item={item} active={activeScreen === item.id} onNav={onNav} compact={compact} />
        ))}

        {/* Grouped */}
        {grouped.filter(g => g.group !== null).map(({ group, items }) => (
          <div key={group} style={{ marginTop: 8 }}>
            <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-4)', fontWeight: 500, padding: compact ? '2px 10px' : '4px 10px', marginBottom: 2 }}>{group}</div>
            {items.map(item => (
              <NavItem key={item.id} item={item} active={activeScreen === item.id} onNav={onNav} compact={compact} />
            ))}
          </div>
        ))}
      </div>

      {/* Bottom: store info + plan */}
      <div style={{ padding: compact ? '10px 12px' : '16px 12px', borderTop: '1px solid var(--hairline)', display: 'flex', flexDirection: 'column', gap: compact ? 8 : 12 }}>
        {/* Trial bar for Nour */}
        {persona.trialDays && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-3)' }}>
              <span>Free trial</span>
              <span style={{ color: persona.trialDays <= 5 ? 'var(--ruby)' : 'var(--amber)', fontWeight: 500 }}>{persona.trialDays}d left</span>
            </div>
            <div style={{ height: 4, background: 'var(--sand-100)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${trialBarPct}%`, background: 'var(--honey)', borderRadius: 999 }}></div>
            </div>
          </div>
        )}

        {/* Store pill */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: persona.color, color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600, flexShrink: 0 }}>
            {persona.avatar}
          </div>
          <div style={{ overflow: 'hidden', flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{persona.name}</div>
            <div style={{ fontSize: 10, color: 'var(--fg-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{persona.plan} plan</div>
          </div>
          <i data-lucide="chevrons-up-down" style={{ width: 13, height: 13, color: 'var(--fg-4)', flexShrink: 0 }}></i>
        </div>
      </div>
    </div>
  );
};

const NavItem = ({ item, active, onNav, compact }) => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div onClick={() => onNav(item.id)}
      onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 9,
        padding: compact ? '5px 10px' : '7px 10px',
        borderRadius: 8, cursor: 'pointer', transition: 'background 120ms var(--ease)',
        background: active ? 'var(--ink)' : hovered ? 'var(--ink-04)' : 'transparent',
        color: active ? 'var(--paper)' : 'var(--fg-1)',
      }}>
      <i data-lucide={item.icon} style={{ width: 15, height: 15, flexShrink: 0, opacity: active ? 1 : 0.7 }}></i>
      <span style={{ fontSize: 13, fontWeight: active ? 500 : 400, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.label}</span>
      {item.badge && <span style={{ fontSize: 10, background: 'var(--honey)', color: 'var(--ink)', padding: '1px 6px', borderRadius: 999, fontWeight: 600 }}>{item.badge}</span>}
    </div>
  );
};

// Shell — the full page chrome
const Shell = ({ children, activeScreen, onNav, tweaks, persona }) => {
  const bodyBg = tweaks.dark ? '#1A1A1A' : 'var(--paper)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: bodyBg, overflow: 'hidden' }}>
      <TopBar screen={activeScreen} onNav={onNav} persona={persona} testMode={tweaks.test} />
      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
        <SideNav activeScreen={activeScreen} onNav={onNav} persona={persona} compact={tweaks.compact} />
        <main style={{ flex: 1, overflow: 'auto', background: 'var(--bg)', padding: tweaks.compact ? '24px' : '32px 40px' }}>
          {children}
        </main>
      </div>
    </div>
  );
};

Object.assign(window, { PERSONAS, NAV_ITEMS, TweakContext, TopBar, SideNav, Shell });