/* global React */

// ============================================================================
// Núcleo de Líderes — shared icons + components
// Exports everything to window so other Babel scripts can use them.
// ============================================================================

const Icon = ({ name, size = 18, stroke = 1.6, ...rest }) => {
  const paths = {
    home: <><path d="M3 11L12 4l9 7"/><path d="M5 10v10h14V10"/></>,
    journey: <><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M6 8.5v3.5a4 4 0 0 0 4 4h4"/></>,
    play: <><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></>,
    file: <><path d="M14 3H6v18h12V7l-4-4z"/><path d="M14 3v4h4"/></>,
    video: <><rect x="3" y="6" width="14" height="12" rx="2"/><path d="M17 10l4-2v8l-4-2z"/></>,
    chat: <><path d="M21 12a8 8 0 1 1-3.5-6.6L21 4l-1 4.5A8 8 0 0 1 21 12z"/></>,
    users: <><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3.5 2.5-6 6-6s6 2.5 6 6"/><circle cx="17" cy="9" r="2.5"/><path d="M15 20c0-3 1.7-4.5 4-4.5s4 1.5 4 4.5"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.5 3.5-7 8-7s8 2.5 8 7"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>,
    logout: <><path d="M15 17l5-5-5-5"/><path d="M20 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></>,
    check: <><polyline points="5 12 10 17 19 7"/></>,
    arrow: <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    chevronDown: <><polyline points="6 9 12 15 18 9"/></>,
    chevronRight: <><polyline points="9 6 15 12 9 18"/></>,
    download: <><path d="M12 4v12"/><path d="M7 11l5 5 5-5"/><path d="M4 20h16"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M8 3v4M16 3v4"/></>,
    plus: <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
    eyeOff: <><path d="M4 4l16 16"/><path d="M10.6 10.6a3 3 0 0 0 4.2 4.2"/><path d="M9.9 5.1A10 10 0 0 1 22 12a13 13 0 0 1-2.7 3.6"/><path d="M6.6 6.6A13 13 0 0 0 2 12s3.5 7 10 7a10 10 0 0 0 4.6-1.1"/></>,
    trash: <><path d="M5 7h14"/><path d="M10 7V4h4v3"/><path d="M7 7l1 13h8l1-13"/></>,
    edit: <><path d="M4 20h4l11-11-4-4L4 16v4z"/></>,
    copy: <><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></>,
    sparkle: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6"/></>,
    book: <><path d="M4 4h10a4 4 0 0 1 4 4v14"/><path d="M4 4v14a4 4 0 0 1 4 0h10"/><path d="M4 4a4 4 0 0 0 4 4h10"/></>,
    flame: <><path d="M12 22c-4.5 0-7-3-7-6.5C5 12 8 10 8 7c0-2 1.5-4 4-4 0 3 4 4 4 8 0 1.5-.5 2.5-1.5 3.5C16 14 18 15.5 18 17.5c0 2.5-2.5 4.5-6 4.5z"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></>
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}>
      {paths[name] || null}
    </svg>
  );
};

const Avatar = ({ user, size = 'md', className = '' }) => {
  const isAdmin = user?.role === 'admin';
  const sizes = { sm: '', md: '', lg: 'avatar-lg', xl: 'avatar-xl' };
  return (
    <div className={`avatar ${isAdmin ? 'gold' : ''} ${sizes[size] || ''} ${className}`}>
      {user?.avatar || '·'}
    </div>
  );
};

const ProgressRing = ({ value, size = 92, stroke = 6, color = 'var(--blue-bright)' }) => {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c - (value / 100) * c;
  return (
    <div className="progress-ring" style={{ width: size, height: size }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} stroke="var(--line-dark)" strokeWidth={stroke} fill="none" />
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke} strokeLinecap="round" fill="none"
                strokeDasharray={c} strokeDashoffset={offset} style={{ transition: 'stroke-dashoffset .6s ease' }} />
      </svg>
      <div className="pct">{value}<span style={{ fontSize: 12, opacity: 0.6 }}>%</span></div>
    </div>
  );
};

const ProgressBar = ({ value, gold = false }) => (
  <div className={`progress-bar ${gold ? 'gold' : ''}`}>
    <div className="fill" style={{ width: `${Math.max(0, Math.min(100, value))}%` }} />
  </div>
);

// ----- relative date helper -----
function timeAgo(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  const s = Math.floor((Date.now() - d.getTime()) / 1000);
  if (s < 60) return 'agora';
  if (s < 3600) return `${Math.floor(s/60)} min`;
  if (s < 86400) return `${Math.floor(s/3600)} h`;
  if (s < 86400 * 7) return `${Math.floor(s/86400)} d`;
  return d.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' });
}

function formatDate(iso, opts) {
  if (!iso) return '';
  return new Date(iso).toLocaleDateString('pt-BR', opts || { day:'2-digit', month:'short', year:'numeric' });
}

function formatTime(iso) {
  if (!iso) return '';
  return new Date(iso).toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit' });
}

// ----- modal -----
const Modal = ({ title, sub, onClose, children, actions }) => (
  <div className="modal-backdrop" onClick={onClose}>
    <div className="modal" onClick={e => e.stopPropagation()}>
      {title && <h3>{title}</h3>}
      {sub && <div className="sub">{sub}</div>}
      {children}
      {actions && <div className="modal-actions">{actions}</div>}
    </div>
  </div>
);

// ----- routing helper -----
function useHashRoute() {
  const [hash, setHash] = React.useState(() => window.location.hash.slice(1) || '/dashboard');
  React.useEffect(() => {
    const onHash = () => setHash(window.location.hash.slice(1) || '/dashboard');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const nav = React.useCallback((path) => { window.location.hash = path; }, []);
  return { hash, nav };
}

// re-render hook on DB change
function useDB() {
  const [, setT] = React.useState(0);
  React.useEffect(() => DB.subscribe(() => setT(t => t + 1)), []);
  return DB;
}

Object.assign(window, {
  Icon, Avatar, ProgressRing, ProgressBar, Modal,
  timeAgo, formatDate, formatTime,
  useHashRoute, useDB
});