/* ============================================================
   Componentes compartidos — María Paula Muriel Photography
   ============================================================ */

/* ——————————————————— Iconos ——————————————————— */
const ICONS = {
  gallery:   'M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 16l4.5-4.5a1.5 1.5 0 0 1 2 0L15 17M14 14l1.5-1.5a1.5 1.5 0 0 1 2 0L21 16M9 9.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z',
  layers:    'M12 3 3 8l9 5 9-5-9-5zM3 13l9 5 9-5M3 17.5l9 5 9-5',
  user:      'M12 12.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4.5 20a7.5 7.5 0 0 1 15 0',
  search:    'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3',
  plus:      'M12 5v14M5 12h14',
  edit:      'M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3zM14 7l3 3',
  eye:       'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
  eyeOff:    'M3 3l18 18M10.6 6.2A9.7 9.7 0 0 1 12 6c6.5 0 10 6 10 6a16 16 0 0 1-3 3.6M6.5 7.5C3.8 9 2 12 2 12s3.5 7 10 7c1.5 0 2.9-.3 4.1-.8M9.9 10a3 3 0 0 0 4.2 4.2',
  trash:     'M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M10 11v6M14 11v6',
  upload:    'M12 16V4M7 9l5-5 5 5M5 20h14',
  image:     'M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 16l5-5 4 4 3-3 6 6M9 9.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z',
  check:     'M5 12.5 10 17.5 20 6.5',
  star:      'M12 3.2l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.6 6.8 19.3l1-5.8L3.5 9.4l5.9-.9z',
  heart:     'M12 20s-7-4.4-9.3-8.5C1.2 8.7 2.6 5.5 5.8 5.5c2 0 3.2 1.3 4.2 2.6C11 6.8 12.2 5.5 14.2 5.5c3.2 0 4.6 3.2 3.1 6C19 15.6 12 20 12 20z',
  arrowLeft: 'M19 12H5M11 6l-6 6 6 6',
  arrowRight:'M5 12h14M13 6l6 6-6 6',
  chevLeft:  'M15 6l-6 6 6 6',
  chevRight: 'M9 6l6 6-6 6',
  close:     'M6 6l12 12M18 6 6 18',
  chart:     'M4 20V10M10 20V4M16 20v-7M22 20H2',
  clock:     'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
  database:  'M12 3c4.4 0 8 1.3 8 3s-3.6 3-8 3-8-1.3-8-3 3.6-3 8-3zM4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6',
  menu:      'M3 6h18M3 12h18M3 18h18',
  mail:      'M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 7l9 6 9-6',
  lock:      'M6 10V8a6 6 0 0 1 12 0v2M5 10h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z',
  logout:    'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9',
  filter:    'M3 5h18l-7 8v6l-4 2v-8z',
  replace:   'M3 9a8 8 0 0 1 13-4l2 2M21 5v4h-4M21 15a8 8 0 0 1-13 4l-2-2M3 19v-4h4',
  info:      'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v5M12 7.5h.01',
  grid:      'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
  photos:    'M5 7h11a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zM8 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2',
  download:  'M12 4v11M7 10l5 5 5-5M5 20h14',
  drag:      'M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01',
  sun:       'M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1',
  alert:     'M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zM12 8v5M12 16h.01',
};

function Icon({ name, size = 20, stroke = 1.7, fill = 'none', style, className }) {
  const d = ICONS[name];
  const solid = fill !== 'none';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={solid ? fill : 'none'}
         stroke={solid ? 'none' : 'currentColor'} strokeWidth={stroke}
         strokeLinecap="round" strokeLinejoin="round" className={className}
         style={{ display: 'block', flexShrink: 0, ...style }}>
      <path d={d} />
    </svg>
  );
}

/* ——————————————————— Destello / chispa ——————————————————— */
function Sparkle({ size = 16, color = 'var(--rose)', style, delay = 0 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}
         style={{ display: 'block', animation: `twinkle 3s ease-in-out ${delay}s infinite`, ...style }}>
      <path d="M12 0c.6 5.4 2.4 9.6 12 12-9.6 2.4-11.4 6.6-12 12-.6-5.4-2.4-9.6-12-12C9.6 9.6 11.4 5.4 12 0z" />
    </svg>
  );
}

/* ——————————————————— Tríada de color (motivo de marca) ——————————————————— */
function TriDots({ size = 7, gap = 5, style }) {
  const cols = ['var(--rose)', 'var(--sky)', 'var(--green)'];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap, ...style }}>
      {cols.map((c, i) => <span key={i} style={{ width: size, height: size, borderRadius: '50%', background: c }} />)}
    </span>
  );
}
function toneVar(t) {
  return { rose: 'var(--rose)', sky: 'var(--sky)', green: 'var(--green)', sand: 'var(--sand)' }[t] || 'var(--rose)';
}
function toneDeep(t) {
  return { rose: 'var(--rose-deep)', sky: 'var(--sky-deep)', green: 'var(--green-deep)', sand: '#9a6f2c' }[t] || 'var(--rose-deep)';
}

/* ——————————————————— Logotipo ——————————————————— */
function Logo({ variant = 'full', dark = false, onClick }) {
  const ink = dark ? '#fff' : 'var(--ink)';
  const sub = dark ? 'rgba(255,255,255,.6)' : 'var(--ink-3)';
  if (variant === 'mark') {
    return (
      <span onClick={onClick} style={{ fontFamily: 'var(--script)', fontSize: 30, color: ink, lineHeight: 1, cursor: onClick ? 'pointer' : 'default' }}>
        MPM
      </span>
    );
  }
  return (
    <span onClick={onClick} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1, cursor: onClick ? 'pointer' : 'default', userSelect: 'none' }}>
      <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 500, fontSize: 25, color: ink, letterSpacing: '.01em', whiteSpace: 'nowrap' }}>
        María Paula Muriel
      </span>
      <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 9.5, letterSpacing: '.42em', color: sub, marginTop: 5, marginRight: '-.42em' }}>
        PHOTOGRAPHY
      </span>
    </span>
  );
}

/* ——————————————————— Firma / marca de agua ——————————————————— */
function Signature({ text = 'María Paula Muriel', size = 40, color = 'var(--ink)', style }) {
  return (
    <span className="script" style={{ fontSize: size, color, lineHeight: 1, display: 'inline-block', ...style }}>
      {text}
    </span>
  );
}

/* Marca de agua sobre una foto */
function Watermark({ position = 'br', styleName = 'white', text = 'MP Muriel', scale = 1 }) {
  const pos = {
    br: { bottom: 12, right: 14 }, bl: { bottom: 12, left: 14 },
    tr: { top: 12, right: 14 },    tl: { top: 12, left: 14 },
  }[position];
  const signature = window.MPM_SIGNATURE;
  const color = styleName === 'black' ? 'rgba(20,18,22,.78)'
              : styleName === 'semi'  ? 'rgba(255,255,255,.62)'
              : 'rgba(255,255,255,.92)';
  const shadow = styleName === 'black' ? 'none' : '0 1px 6px rgba(0,0,0,.28)';
  if (signature?.url) {
    const filter = styleName === 'black'
      ? 'none'
      : styleName === 'semi'
      ? 'invert(1) drop-shadow(0 1px 5px rgba(0,0,0,.25))'
      : 'invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.32))';
    const opacity = styleName === 'black' ? .78 : styleName === 'semi' ? .62 : .92;
    return (
      <img
        src={signature.url}
        alt=""
        aria-hidden="true"
        style={{
          position: 'absolute', ...pos, width: 96 * scale, maxWidth: '34%',
          height: 'auto', filter, opacity, pointerEvents: 'none', zIndex: 3,
        }}
      />
    );
  }
  return (
    <span className="script" style={{
      position: 'absolute', ...pos, color, fontSize: 22 * scale, lineHeight: 1,
      textShadow: shadow, pointerEvents: 'none', letterSpacing: '.01em', zIndex: 3, whiteSpace: 'nowrap',
    }}>
      {text}
    </span>
  );
}

/* ——————————————————— Marco de foto (placeholder temporal) ——————————————————— */
const TONES = {
  rose:  ['#fbe1e9', '#f0b3c6', '#e689a3'],
  sky:   ['#e4f1f8', '#b6dcec', '#7cbcdb'],
  sand:  ['#f8eddc', '#edd2ac', '#ddb787'],
  green: ['#e7f3e0', '#c3e3b8', '#90cd85'],
};
const RATIO = { v: '3 / 4', h: '3 / 2', s: '1 / 1' };

function PhotoFrame({ photo, ratio, label = true, wm = true, wmPos = 'br', wmStyle = 'white',
                      temp = true, rounded = 'var(--r-md)', hover = false, className = '', style }) {
  const o = ratio || RATIO[photo?.o || 'v'];
  const tone = TONES[photo?.tone || 'rose'];
  const cat = (window.CATEGORIES.find(c => c.id === photo?.cat) || {}).label || 'Fotografía';
  return (
    <div className={`photo-frame ${hover ? 'pf-hover' : ''} ${className}`} style={{
      position: 'relative', width: '100%', aspectRatio: o, borderRadius: rounded,
      overflow: 'hidden', background: tone[1], ...style,
    }}>
      <div className="pf-img" style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.55), transparent 55%),
          radial-gradient(90% 80% at 85% 90%, ${hexA(tone[2], .55)}, transparent 60%),
          linear-gradient(150deg, ${tone[0]} 0%, ${tone[1]} 52%, ${tone[2]} 100%)`,
      }}>
        {/* textura diagonal sutil que delata el contenido temporal */}
        <div style={{ position: 'absolute', inset: 0, opacity: .14,
          backgroundImage: `repeating-linear-gradient(135deg, rgba(255,255,255,.7) 0 1.5px, transparent 1.5px 13px)` }} />
        {/* etiqueta central */}
        {label && (
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 7, textAlign: 'center', padding: 16 }}>
            <Icon name="image" size={26} stroke={1.4} style={{ color: 'rgba(255,255,255,.85)' }} />
            <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 10.5,
              letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(70,50,60,.62)',
              background: 'rgba(255,255,255,.5)', padding: '4px 9px', borderRadius: 99, backdropFilter: 'blur(2px)' }}>
              {cat} · temporal
            </span>
          </div>
        )}
      </div>
      {wm && <Watermark position={wmPos} styleName={wmStyle} />}
      {temp && (
        <span className="badge badge-temp" style={{ position: 'absolute', top: 10, left: 10, zIndex: 4,
          background: 'rgba(255,255,255,.82)', color: '#3d7791', backdropFilter: 'blur(3px)', fontSize: 10, padding: '4px 9px' }}>
          TEMPORAL
        </span>
      )}
    </div>
  );
}

function hexA(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n>>16)&255}, ${(n>>8)&255}, ${n&255}, ${a})`;
}

/* ——————————————————— Estado de publicación ——————————————————— */
function StatusBadge({ status }) {
  if (status === 'published')
    return <span className="badge badge-published"><span className="badge-dot" />Publicada</span>;
  return <span className="badge badge-draft"><span className="badge-dot" />Borrador</span>;
}

/* ——————————————————— Empty state ——————————————————— */
function EmptyState({ title, sub, action }) {
  return (
    <div style={{ textAlign: 'center', padding: '64px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
      <div style={{ position: 'relative', width: 84, height: 84, borderRadius: '50%',
        background: 'var(--rose-tint)', display: 'grid', placeItems: 'center' }}>
        <Icon name="image" size={34} stroke={1.4} style={{ color: 'var(--rose)' }} />
        <Sparkle size={18} color="var(--sand)" style={{ position: 'absolute', top: -2, right: -2 }} />
        <Sparkle size={12} color="var(--rose)" delay={1} style={{ position: 'absolute', bottom: 6, left: -4 }} />
      </div>
      <h3 className="serif" style={{ margin: 0, fontSize: 26, fontWeight: 500, color: 'var(--ink)' }}>{title}</h3>
      <p style={{ margin: 0, color: 'var(--ink-2)', maxWidth: 360, lineHeight: 1.6, fontSize: 14.5 }}>{sub}</p>
      {action}
    </div>
  );
}

/* ——————————————————— Toast / confirmación visual ——————————————————— */
function Toast({ toast }) {
  if (!toast) return null;
  return (
    <div className="animate-scaleIn" style={{ position: 'fixed', bottom: 28, left: '50%', transform: 'translateX(-50%)',
      zIndex: 200, background: 'var(--ink)', color: '#fff', padding: '13px 20px', borderRadius: 'var(--r-pill)',
      display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--sh-lg)', fontSize: 14, fontWeight: 500 }}>
      <span style={{ display: 'grid', placeItems: 'center', width: 22, height: 22, borderRadius: '50%',
        background: 'var(--published)' }}>
        <Icon name="check" size={14} stroke={2.4} style={{ color: '#fff' }} />
      </span>
      {toast}
    </div>
  );
}

Object.assign(window, { Icon, ICONS, Sparkle, TriDots, toneVar, toneDeep, Logo, Signature, Watermark, PhotoFrame, TONES, RATIO, StatusBadge, EmptyState, Toast, hexA });