// Shared design tokens + components for DevisVerif demo
const DV_COLOR = {
  navy: '#15314d',
  navyDark: '#0f2238',
  blue: '#2563eb',
  blueLight: '#dbeafe',
  blueSoft: '#eff4fa',
  bg: '#f6f8fb',
  card: '#ffffff',
  border: '#e5e9f0',
  text: '#0f172a',
  textMuted: '#64748b',
  textSubtle: '#94a3b8',
  orange: '#f97316',
  orangeLight: '#fb923c',
  amber: '#f59e0b',
  amberBg: '#fef3c7',
  green: '#10b981',
  greenLight: '#d1fae5',
  violet: '#7c3aed',
  violetLight: '#ede9fe',
  red: '#ef4444',
  yellow: '#eab308',
};

const DV_FONT = `'Plus Jakarta Sans', system-ui, sans-serif`;
const DV_MONO = `'JetBrains Mono', ui-monospace, monospace`;

function DVLogo({ size = 28, color = DV_COLOR.navy }) {
  return (
    <svg width={size} height={size} viewBox="0 0 28 28" fill="none">
      <rect x="1.5" y="1.5" width="25" height="25" rx="6" fill={color}/>
      <path d="M8 14.5 L12 18.5 L20 9.5" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function DVAvatar({ size = 42 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: DV_COLOR.navy, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 24 24" fill="none">
        <path d="M5 12.5 L10 17.5 L19 7.5" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function DVCursor({ x, y, scale = 1 }) {
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      pointerEvents: 'none',
      transform: `translate(-2px, -2px) scale(${scale})`,
      zIndex: 1000,
      filter: 'drop-shadow(0 4px 8px rgba(15,23,42,0.25))',
    }}>
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
        <path d="M5.5 3.5 L5.5 20 L9.5 16 L12 21 L14.5 20 L12 15 L18 15 Z" fill="#fff" stroke="#0f172a" strokeWidth="1.4" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function DVStepBadge({ num, label, accent = DV_COLOR.orange }) {
  return (
    <div style={{
      position: 'absolute', left: 32, bottom: 32,
      display: 'flex', alignItems: 'center', gap: 12,
      background: '#0f172a', color: '#fff',
      padding: '10px 18px 10px 10px', borderRadius: 999,
      boxShadow: '0 8px 24px rgba(15,23,42,0.25)',
      fontFamily: DV_FONT, zIndex: 100,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: '50%', background: accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontWeight: 800, fontSize: 14,
      }}>{num}</div>
      <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em' }}>{label}</div>
    </div>
  );
}

function DVSidebar({ activeId = '' }) {
  return (
    <aside style={{
      width: 280, height: '100%', background: '#fff',
      borderRight: `1px solid ${DV_COLOR.border}`,
      display: 'flex', flexDirection: 'column', flexShrink: 0,
      fontFamily: DV_FONT,
    }}>
      <div style={{ padding: '20px 22px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <DVLogo size={26} />
        <div style={{ fontWeight: 800, fontSize: 19, color: DV_COLOR.navy, letterSpacing: '-0.02em' }}>DevisVerif</div>
      </div>

      <div style={{ padding: '6px 22px', fontSize: 11, fontWeight: 700, color: DV_COLOR.textSubtle, letterSpacing: '0.08em', marginTop: 4 }}>
        MES CHANTIERS
      </div>

      <div style={{ padding: '8px 22px 10px', display: 'flex', alignItems: 'center', gap: 8, color: DV_COLOR.blue, fontWeight: 600, fontSize: 13.5 }}>
        <span style={{ fontSize: 16, lineHeight: 1, fontWeight: 700 }}>+</span> Nouveau chantier
      </div>

      <DVChantier
        icon="🛁" title="Salle de bain"
        active={activeId === 'salle-bain' || activeId === 'sdb'}
        items={[
          { name: 'Rénovation SDB et Insta…', price: '9 460 € TTC', tag: 'CMS CONFORT MAIN…', dot: DV_COLOR.green, active: activeId === 'sdb' },
          { name: 'Points Électriques Villa', price: '1 506 € TTC', tag: "Qualit'elec", dot: DV_COLOR.green },
        ]}
      />

      <DVChantier
        icon="🏗" title="Extension bureau 25m²"
        items={[
          { name: 'Extension garage', price: '10 086 € TTC', tag: 'BTP BÂTISSEURS', dot: DV_COLOR.green },
          { name: 'Rénovation Carrelage', price: '3 819 € TTC', tag: 'Carrelage Design', dot: DV_COLOR.green },
        ]}
      />

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

      <div style={{ borderTop: `1px solid ${DV_COLOR.border}`, padding: '12px 22px', fontSize: 13, color: DV_COLOR.text, display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke={DV_COLOR.text} strokeWidth="1.5"/><path d="M12 8v4l2.5 2.5" stroke={DV_COLOR.text} strokeWidth="1.5" strokeLinecap="round"/></svg>
        Découvrir les fonctionnalités
      </div>
      <div style={{ padding: '8px 22px 14px', fontSize: 13, color: DV_COLOR.text, display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke={DV_COLOR.text} strokeWidth="1.5"/></svg>
        Feedback
      </div>
      <div style={{ borderTop: `1px solid ${DV_COLOR.border}`, padding: '14px 22px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: DV_COLOR.navy, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700 }}>NS</div>
        <div style={{ fontSize: 13.5, fontWeight: 600, color: DV_COLOR.text }}>Nicolas Simoes</div>
      </div>
    </aside>
  );
}

function DVChantier({ icon, title, items, active }) {
  return (
    <div style={{ padding: '0 12px' }}>
      <div style={{
        margin: '4px 0', padding: '10px 14px', borderRadius: 10,
        display: 'flex', alignItems: 'center', gap: 10,
        background: active ? DV_COLOR.blueSoft : 'transparent',
        fontWeight: 700, color: DV_COLOR.navy, fontSize: 14,
      }}>
        <span style={{ fontSize: 15 }}>{icon}</span>{title}
      </div>
      <div style={{ padding: '0 14px 6px', fontSize: 12.5, color: DV_COLOR.blue, fontWeight: 600 }}>
        + Ajouter un devis ou une facture
      </div>
      {items && items.map((it, i) => <DVSidebarDevis key={i} {...it} />)}
    </div>
  );
}

function DVSidebarDevis({ name, price, tag, dot, active }) {
  return (
    <div style={{
      padding: '10px 12px', borderRadius: 10,
      background: active ? DV_COLOR.blueSoft : 'transparent',
      display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 2,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke={DV_COLOR.textMuted} strokeWidth="1.5"/><path d="M14 2v6h6" stroke={DV_COLOR.textMuted} strokeWidth="1.5"/></svg>
        <span style={{ fontSize: 13, color: DV_COLOR.text, fontWeight: 600, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</span>
        <span style={{ width: 6, height: 6, borderRadius: 3, background: dot }}/>
      </div>
      <div style={{ fontSize: 12, color: DV_COLOR.textMuted, paddingLeft: 22, fontFamily: DV_MONO }}>{price}</div>
      {tag && (
        <div style={{ paddingLeft: 22, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 9.5, fontWeight: 700, color: DV_COLOR.navy, background: DV_COLOR.blueLight, padding: '2px 5px', borderRadius: 3, letterSpacing: '0.04em' }}>DEVIS</span>
          <span style={{ fontSize: 11.5, color: DV_COLOR.textMuted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tag}</span>
        </div>
      )}
    </div>
  );
}

// expose
Object.assign(window, {
  DV_COLOR, DV_FONT, DV_MONO,
  DVLogo, DVAvatar, DVCursor, DVStepBadge, DVSidebar,
});