// JammSanté Dentiste — atoms + tokens (chassis JammSanté, accent teal + spécialité sky)
const { useState, useEffect, useRef, useMemo } = React;

function Icon({ name, size = 18, color = 'currentColor', strokeWidth = 1.6, style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size, 'stroke-width': strokeWidth } });
    }
  }, [name, size, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', color, ...style }} />;
}

function Button({ variant = 'primary', size = 'md', children, icon, iconRight, onClick, style, disabled }) {
  const [h, setH] = useState(false);
  const pal = {
    primary:   { background: h ? '#0F766E' : '#0D9488', color: '#fff', border: '1px solid transparent' },
    secondary: { background: h ? 'var(--d-accent-bg-2)' : 'var(--d-accent-bg)', color: '#0D9488', border: '1px solid var(--d-accent-bg-2)' },
    outline:   { background: h ? 'var(--d-accent-bg)' : 'transparent', color: '#0D9488', border: '1px solid #0D9488' },
    ghost:     { background: h ? 'var(--d-surface-2)' : 'transparent', color: 'var(--d-fg-muted)', border: '1px solid transparent' },
    danger:    { background: h ? '#DC2626' : '#EF4444', color: '#fff', border: '1px solid transparent' },
    sky:       { background: h ? '#075985' : '#0369A1', color: '#fff', border: '1px solid transparent' },
  }[variant];
  const sz = { xs:{padding:'4px 10px',fontSize:11}, sm:{padding:'6px 12px',fontSize:12}, md:{padding:'9px 16px',fontSize:13}, lg:{padding:'12px 22px',fontSize:14} }[size];
  return (
    <button onClick={onClick} disabled={disabled} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ ...pal, ...sz, ...style, borderRadius: 9, fontWeight: 600, fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', transition: 'all 150ms' }}>
      {icon && <Icon name={icon} size={size === 'sm' || size === 'xs' ? 14 : 15} />}{children}{iconRight && <Icon name={iconRight} size={15} />}
    </button>
  );
}

function IconButton({ icon, onClick, style, size = 34, title }) {
  const [h, setH] = useState(false);
  return <button title={title} onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{ width: size, height: size, borderRadius: 9, background: h ? 'var(--d-surface-2)' : 'transparent', border: 'none', cursor: 'pointer', color: 'var(--d-fg-subtle)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'background 150ms', ...style }}>
    <Icon name={icon} size={17} /></button>;
}

function Card({ children, style, padding = 20, onClick, hoverable }) {
  const [h, setH] = useState(false);
  return <div onClick={onClick} onMouseEnter={() => hoverable && setH(true)} onMouseLeave={() => hoverable && setH(false)}
    style={{ background: 'var(--d-surface)', border: '1px solid var(--d-border)', borderRadius: 14, padding, boxShadow: h ? '0 8px 24px rgba(15,23,42,0.08)' : '0 1px 2px rgba(15,23,42,0.04)', transform: h ? 'translateY(-2px)' : 'none', transition: 'all 200ms', cursor: onClick ? 'pointer' : 'default', ...style }}>{children}</div>;
}

function Badge({ tone = 'neutral', children, dot = true }) {
  const map = {
    teal:{bg:'var(--d-accent-bg)',fg:'#0D9488'}, green:{bg:'var(--d-success-bg)',fg:'#059669'},
    amber:{bg:'var(--d-warn-bg)',fg:'#B45309'}, red:{bg:'var(--d-danger-bg)',fg:'#B91C1C'},
    blue:{bg:'var(--d-info-bg)',fg:'#1D4ED8'}, violet:{bg:'var(--d-violet-bg)',fg:'#6D28D9'},
    sky:{bg:'var(--d-sky-bg)',fg:'#0369A1'}, neutral:{bg:'var(--d-surface-2)',fg:'var(--d-fg-subtle)'},
  }[tone] || {bg:'var(--d-surface-2)',fg:'var(--d-fg-subtle)'};
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: map.bg, color: map.fg, padding: '3px 9px', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>{dot && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'currentColor' }} />}{children}</span>;
}

function Tag({ children, tone = 'neutral' }) {
  const map = { neutral:{bg:'var(--d-surface-2)',fg:'var(--d-fg-muted)'}, teal:{bg:'var(--d-accent-bg)',fg:'#0D9488'}, sky:{bg:'var(--d-sky-bg)',fg:'#0369A1'}, violet:{bg:'var(--d-violet-bg)',fg:'#6D28D9'}, amber:{bg:'var(--d-warn-bg)',fg:'#B45309'}, red:{bg:'var(--d-danger-bg)',fg:'#B91C1C'} }[tone];
  return <span style={{ fontSize: 11, padding: '2px 9px', background: map.bg, color: map.fg, borderRadius: 999, fontWeight: 500 }}>{children}</span>;
}

function Avatar({ name, size = 38, color }) {
  const initials = name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
  const colors = ['#0D9488','#0369A1','#8B5CF6','#0EA5E9','#F97316','#10B981','#6366F1'];
  const bg = color || colors[name.charCodeAt(0) % colors.length];
  return <div style={{ width: size, height: size, borderRadius: '50%', background: bg, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.38, fontWeight: 600, flexShrink: 0, letterSpacing: '-0.02em' }}>{initials}</div>;
}

function SearchInput({ placeholder = 'Rechercher…', value, onChange, style }) {
  return <div style={{ position: 'relative', ...style }}>
    <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--d-fg-faint)', display: 'inline-flex', pointerEvents: 'none' }}><Icon name="search" size={15} /></span>
    <input placeholder={placeholder} value={value ?? ''} onChange={onChange} style={{ width: '100%', padding: '9px 14px 9px 34px', borderRadius: 9, border: '1px solid var(--d-border)', fontSize: 13, outline: 'none', background: 'var(--d-surface)', fontFamily: 'inherit', color: 'var(--d-fg)', boxSizing: 'border-box' }} />
  </div>;
}

function Tabs({ items, active, onChange, style }) {
  return <div style={{ display: 'flex', gap: 2, borderBottom: '1px solid var(--d-border)', overflowX: 'auto', ...style }}>
    {items.map(t => <button key={t} onClick={() => onChange(t)} style={{ padding: '10px 14px', background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 600, fontFamily: 'inherit', color: active === t ? '#0D9488' : 'var(--d-fg-subtle)', borderBottom: active === t ? '2px solid #0D9488' : '2px solid transparent', marginBottom: -1, whiteSpace: 'nowrap', transition: 'color 160ms' }}>{t}</button>)}
  </div>;
}

function Segmented({ items, active, onChange, style }) {
  return <div style={{ display: 'inline-flex', gap: 2, padding: 3, background: 'var(--d-surface-2)', borderRadius: 9, ...style }}>
    {items.map(t => <button key={t} onClick={() => onChange(t)} style={{ padding: '6px 13px', background: active === t ? 'var(--d-surface)' : 'transparent', color: active === t ? 'var(--d-fg)' : 'var(--d-fg-subtle)', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: 12, fontWeight: 600, fontFamily: 'inherit', boxShadow: active === t ? '0 1px 2px rgba(15,23,42,0.06)' : 'none', transition: 'all 160ms' }}>{t}</button>)}
  </div>;
}

function Stat({ label, value, hint, hintTone = 'neutral', icon }) {
  const hc = { neutral:'var(--d-fg-subtle)', green:'#059669', amber:'#B45309', teal:'#0D9488', red:'#B91C1C', sky:'#0369A1' }[hintTone];
  return <Card padding={18}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ fontSize: 12, color: 'var(--d-fg-subtle)', fontWeight: 500 }}>{label}</div>
      {icon && <span style={{ color: 'var(--d-fg-faint)' }}><Icon name={icon} size={15} /></span>}
    </div>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--d-fg)' }}>{value}</div>
      {hint && <div style={{ fontSize: 12, color: hc, fontWeight: 500 }}>{hint}</div>}
    </div>
  </Card>;
}

function Switch({ on, onChange }) {
  return <span onClick={() => onChange(!on)} style={{ width: 36, height: 22, borderRadius: 999, background: on ? '#0D9488' : 'var(--d-border-strong)', position: 'relative', cursor: 'pointer', transition: 'background 180ms', flexShrink: 0, display: 'inline-block' }}>
    <span style={{ position: 'absolute', top: 2, left: on ? 16 : 2, width: 18, height: 18, borderRadius: '50%', background: '#fff', transition: 'left 180ms', boxShadow: '0 1px 2px rgba(0,0,0,0.15)' }} /></span>;
}

function Field({ label, children, hint }) {
  return <label style={{ display: 'block' }}>
    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--d-fg-subtle)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 7 }}>{label}</div>
    {children}
    {hint && <div style={{ fontSize: 11.5, color: 'var(--d-fg-faint)', marginTop: 5 }}>{hint}</div>}
  </label>;
}

function Input({ value, onChange, placeholder, type = 'text', style }) {
  return <input type={type} value={value ?? ''} onChange={onChange} placeholder={placeholder}
    style={{ width: '100%', padding: '10px 12px', borderRadius: 9, border: '1px solid var(--d-border)', fontSize: 13.5, outline: 'none', background: 'var(--d-surface)', color: 'var(--d-fg)', fontFamily: 'inherit', boxSizing: 'border-box', ...style }} />;
}

function Modal({ children, onClose, width = 520 }) {
  return <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.45)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: 20, animation: 'dFade 160ms ease' }}>
    <div onClick={e => e.stopPropagation()} style={{ width, maxWidth: '100%', maxHeight: '90vh', overflowY: 'auto', background: 'var(--d-surface)', borderRadius: 18, boxShadow: '0 30px 80px rgba(15,23,42,0.25)', animation: 'dPop 200ms cubic-bezier(0.16,1,0.3,1)' }}>{children}</div>
  </div>;
}

function GatedNote({ children }) {
  return <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--d-fg-faint)', padding: '3px 9px', borderRadius: 999, background: 'var(--d-surface-2)', fontWeight: 600 }}>
    <Icon name="lock" size={11} /> Accès restreint{children}</div>;
}

function SectionTitle({ eyebrow, title, sub, right }) {
  return <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:22 }}>
    <div>
      {eyebrow && <div style={{ fontSize:11, fontWeight:600, color:'#0369A1', letterSpacing:'0.16em', textTransform:'uppercase' }}>{eyebrow}</div>}
      <h1 style={{ fontSize:28, fontWeight:700, letterSpacing:'-0.025em', margin:'6px 0 0', color:'var(--d-fg)' }}>{title}</h1>
      {sub && <p style={{ fontSize:14, color:'var(--d-fg-subtle)', marginTop:6 }}>{sub}</p>}
    </div>
    {right && <div style={{ display:'flex', gap:8 }}>{right}</div>}
  </div>;
}

Object.assign(window, { Icon, Button, IconButton, Card, Badge, Tag, Avatar, SearchInput, Tabs, Segmented, Stat, Switch, Field, Input, Modal, GatedNote, SectionTitle });