/* ===== Shell: sidebar + topbar + step rail ===== */

const FLOW_STEPS = [
  { id: 'address', label: 'Address', icon: 'map-pin', step: '01' },
  { id: 'analysis', label: 'Site analysis', icon: 'scan-line', step: '02' },
  { id: 'conditions', label: 'Conditions', icon: 'clipboard-check', step: '03' },
  { id: 'survey', label: 'Preferences', icon: 'messages-square', step: '04' },
  { id: 'design', label: 'Your design', icon: 'sprout', step: '05' },
  { id: 'tiers', label: 'Plan tier', icon: 'layers', step: '06' },
  { id: 'checkout', label: 'Checkout', icon: 'shopping-bag', step: '07' },
];

const Sidebar = ({ current, unlocked, onJump, compact }) => {
  const currentIdx = FLOW_STEPS.findIndex(s => s.id === current);
  return (
    <aside className={`sidebar ${compact ? 'sidebar--compact' : ''}`}>
      <div className="sidebar__brand">
        <BlossomMark size={26} />
        <span className="sidebar__brand-text">Novale</span>
      </div>

      <div className="sidebar__section-label">Your project</div>
      <button className="nav-item" data-active={false}>
        <Icon name="folder" size={16} />
        <span className="nav-item__label">Snoqualmie backyard</span>
      </button>

      <div className="sidebar__section-label">Design flow</div>
      {FLOW_STEPS.map((s, i) => {
        const state = unlocked.includes(s.id) ? 'unlocked' : 'locked';
        const active = s.id === current;
        const done = i < currentIdx;
        return (
          <button
            key={s.id}
            className="nav-item"
            data-active={active}
            data-state={state}
            onClick={() => onJump(s.id)}
          >
            <Icon name={done ? 'check' : s.icon} size={16} />
            <span className="nav-item__label">{s.label}</span>
            <span className="nav-item__step">{s.step}</span>
          </button>
        );
      })}

      <div className="sidebar__footer">
        <div className="avatar">E</div>
        <div className="sidebar__footer-text">
          <div style={{ fontSize: 13, color: 'var(--blossom-paper)', fontWeight: 500 }}>Emily</div>
          <div style={{ fontSize: 11, color: 'var(--foliage-400)' }}>Snoqualmie, WA</div>
        </div>
      </div>
    </aside>
  );
};

const StepRail = ({ current }) => {
  const idx = FLOW_STEPS.findIndex(s => s.id === current);
  return (
    <div className="steprail">
      {FLOW_STEPS.map((s, i) => {
        const state = i < idx ? 'done' : (i === idx ? 'current' : 'upcoming');
        return (
          <React.Fragment key={s.id}>
            <div className="steprail__item" data-state={state}>
              <div className="steprail__dot">
                {state === 'done' ? <Icon name="check" size={12} stroke={2.5} /> : s.step.replace('0','')}
              </div>
              {state === 'current' && <span>{s.label}</span>}
            </div>
            {i < FLOW_STEPS.length - 1 && <div className="steprail__sep" />}
          </React.Fragment>
        );
      })}
    </div>
  );
};

const Topbar = ({ title, actions, crumbs }) => (
  <div className="topbar">
    <div className="topbar__crumbs">
      {crumbs?.map((c, i) => (
        <React.Fragment key={i}>
          {i > 0 && <Icon name="chevron-right" size={14} />}
          <span style={i === crumbs.length - 1 ? { color: 'var(--fg-primary)', fontWeight: 500 } : {}}>{c}</span>
        </React.Fragment>
      ))}
    </div>
    <div className="topbar__actions">{actions}</div>
  </div>
);

Object.assign(window, { Sidebar, StepRail, Topbar, FLOW_STEPS });