// ------------------------------------------------------------------
// Shared visual primitives used across multiple screens.
// ------------------------------------------------------------------

// Placeholder visual for products — striped tinted background + glyph.
// We never draw real product art; this is intentionally a placeholder.
const ProductVisual = ({ product, size = 'card' }) => {
  const glyph = window.DATA.CATEGORY_GLYPH[product.category] || '✦';
  const big = size === 'big';
  return (
    <div
      className={`relative overflow-hidden ${big ? 'rounded-2xl' : 'rounded-xl'} flex items-center justify-center`}
      style={{
        background: product.tint,
        aspectRatio: big ? '4 / 3' : '1 / 1',
      }}
    >
      <div className="absolute inset-0 placeholder-stripe-2 opacity-60" />
      <div className="absolute inset-0 flex items-center justify-center">
        <span style={{ fontSize: big ? 96 : 56, filter: 'drop-shadow(0 4px 8px rgba(140,70,20,0.18))' }}>{glyph}</span>
      </div>
      {/* Faint label so it's clearly a placeholder, not real photography */}
      <div className={`absolute bottom-2 left-3 right-3 text-[10px] uppercase tracking-wider font-mono ${big ? '' : ''} text-ink-700/55`}>
        фото товара
      </div>
    </div>
  );
};

const Badge = ({ stock }) => {
  if (stock === 'in') return <span className="chip chip-green"><span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />В наличии</span>;
  return <span className="chip chip-amber"><span className="w-1.5 h-1.5 rounded-full bg-amber-500" />Ограничено</span>;
};

const Pill = ({ children, tone = 'paper', className = '' }) => {
  const tones = {
    paper: 'bg-paper-100 text-ink-700',
    brand: 'bg-brand-50 text-brand-700',
    white: 'bg-white text-ink-700 border border-paper-200',
  };
  return <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${tones[tone]} ${className}`}>{children}</span>;
};

const SectionTitle = ({ eyebrow, title, subtitle, align = 'left' }) => (
  <div className={align === 'center' ? 'text-center max-w-2xl mx-auto' : 'max-w-2xl'}>
    {eyebrow ? (
      <div className={`inline-flex items-center gap-2 text-brand-700 text-sm font-medium mb-3 ${align === 'center' ? '' : ''}`}>
        <span className="w-6 h-px bg-brand-400" />
        {eyebrow}
      </div>
    ) : null}
    <h2 className="font-display font-semibold text-3xl md:text-4xl tracking-tight text-ink-900">{title}</h2>
    {subtitle ? <p className="mt-3 text-ink-500 text-base md:text-lg">{subtitle}</p> : null}
  </div>
);

const EmptyState = ({ icon = 'sparkle', title, subtitle, action }) => (
  <div className="flex flex-col items-center justify-center py-16 text-center">
    <div className="w-16 h-16 rounded-2xl bg-brand-50 text-brand-500 flex items-center justify-center mb-4">
      <Icon name={icon} size={28} />
    </div>
    <div className="font-semibold text-lg text-ink-900">{title}</div>
    {subtitle ? <div className="text-ink-500 mt-1 max-w-sm">{subtitle}</div> : null}
    {action ? <div className="mt-5">{action}</div> : null}
  </div>
);

const Toast = () => {
  const { toast } = useStore();
  if (!toast) return null;
  return (
    <div
      key={toast.id}
      className="fixed top-20 left-1/2 -translate-x-1/2 z-[60] animate-toast"
    >
      <div className="bg-ink-900 text-white px-4 py-3 rounded-2xl shadow-pop flex items-center gap-2.5 text-sm font-medium">
        <Icon name="check" size={18} className="text-brand-300" />
        {toast.msg}
      </div>
    </div>
  );
};

// Generic modal wrapper with backdrop click-to-close.
const Modal = ({ open, onClose, children, size = 'md' }) => {
  if (!open) return null;
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);
  const sizes = { md: 'max-w-2xl', lg: 'max-w-4xl', sm: 'max-w-md' };
  return (
    <div className="fixed inset-0 z-50 flex items-end md:items-center justify-center animate-fade">
      <div className="absolute inset-0 bg-ink-900/40 backdrop-blur-sm" onClick={onClose} />
      <div className={`relative w-full ${sizes[size]} m-0 md:m-4 max-h-[92vh] overflow-y-auto bg-white md:rounded-3xl rounded-t-3xl shadow-pop animate-slide-up`}>
        {children}
      </div>
    </div>
  );
};

const Stepper = ({ value, onChange, min = 1, max = 99 }) => (
  <div className="inline-flex items-center bg-paper-100 rounded-full p-1">
    <button
      onClick={() => onChange(Math.max(min, value - 1))}
      className="w-9 h-9 rounded-full bg-white text-ink-700 flex items-center justify-center hover:bg-brand-50 hover:text-brand-700 transition disabled:opacity-40"
      disabled={value <= min}
      aria-label="Уменьшить"
    >
      <Icon name="minus" size={16} />
    </button>
    <span className="w-10 text-center font-semibold text-ink-900 tabular-nums">{value}</span>
    <button
      onClick={() => onChange(Math.min(max, value + 1))}
      className="w-9 h-9 rounded-full bg-white text-ink-700 flex items-center justify-center hover:bg-brand-50 hover:text-brand-700 transition"
      aria-label="Увеличить"
    >
      <Icon name="plus" size={16} />
    </button>
  </div>
);

Object.assign(window, { ProductVisual, Badge, Pill, SectionTitle, EmptyState, Toast, Modal, Stepper });