// components.jsx — shared visual atoms for VideoHub
// Premium dark: bg #0a0a0c · surface #15151a · hairline rgba(255,255,255,.06)

const VH_BG = '#0a0a0c';
const VH_SURFACE = '#15151a';
const VH_SURFACE_HI = '#1d1d24';
const VH_HAIRLINE = 'rgba(255,255,255,0.07)';
const VH_TEXT = '#f5f5f7';
const VH_DIM = 'rgba(245,245,247,0.55)';
const VH_DIM2 = 'rgba(245,245,247,0.35)';

// ─── Poster tile (abstract gradient + code overlay) ──────────────
function PosterTile({ code, status, ratio = '2 / 3', locked = false, accent = '#e11d48', coverUrl = '' }) {
  const [imgFailed, setImgFailed] = React.useState(false);
  const showImage = coverUrl && !imgFailed && !locked;
  const bg = window.coverGradient(code || 'NONE');
  const display = locked ? '••••••' : code;
  const meta = window.STATUS_META[status];
  return (
    <div style={{
      position: 'relative', borderRadius: 12, overflow: 'hidden',
      aspectRatio: ratio, background: bg,
      boxShadow: '0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 20px rgba(0,0,0,0.4)',
    }}>
      {showImage && (
        <img
          src={coverUrl} alt=""
          onError={() => setImgFailed(true)}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', display: 'block',
          }}/>
      )}
      {/* subtle grain */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%)',
      }} />
      {/* heavier blur layer when locked */}
      {locked && (
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(80% 80% at 50% 50%, rgba(255,255,255,0.06), transparent 70%)',
          backdropFilter: 'blur(8px) saturate(120%)',
          WebkitBackdropFilter: 'blur(8px) saturate(120%)',
        }}/>
      )}
      {locked && (
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div className="vh-lock-glow" style={{
            width: 32, height: 32, borderRadius: 99,
            background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '0.5px solid rgba(255,255,255,0.22)',
          }}>
            <svg width="13" height="15" viewBox="0 0 14 16" fill="none">
              <rect x="2" y="7" width="10" height="8" rx="1.5" stroke="rgba(255,255,255,0.92)" strokeWidth="1.6"/>
              <path d="M4 7V4.5a3 3 0 016 0V7" stroke="rgba(255,255,255,0.92)" strokeWidth="1.6"/>
            </svg>
          </div>
        </div>
      )}
      {/* code overlay */}
      <div style={{
        position: 'absolute', left: 10, top: 9,
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 11, letterSpacing: 0.6, fontWeight: 600,
        color: 'rgba(255,255,255,0.92)',
        textShadow: '0 1px 2px rgba(0,0,0,0.5)',
        filter: locked ? 'blur(2px)' : 'none',
      }}>{display}</div>
      {/* status dot */}
      {meta && (
        <div style={{
          position: 'absolute', right: 9, top: 10,
          width: 8, height: 8, borderRadius: 99, background: meta.dot,
          boxShadow: '0 0 0 2px rgba(0,0,0,0.35)',
        }} />
      )}
      {/* favorite heart */}
      {status === 'favorite' && (
        <div style={{
          position: 'absolute', right: 8, bottom: 8,
          width: 22, height: 22, borderRadius: 99,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="11" height="10" viewBox="0 0 11 10" fill={accent}>
            <path d="M5.5 9.2S.5 6.2.5 3.2C.5 1.7 1.7.5 3.2.5c.9 0 1.7.4 2.3 1.1C6.1.9 6.9.5 7.8.5c1.5 0 2.7 1.2 2.7 2.7 0 3-5 6-5 6z"/>
          </svg>
        </div>
      )}
    </div>
  );
}

// ─── Rating dots (5) ─────────────────────────────────────────────
function RatingDots({ value = 0, size = 5, accent = '#e11d48' }) {
  return (
    <div style={{ display: 'flex', gap: 3 }}>
      {[1,2,3,4,5].map(i => (
        <div key={i} style={{
          width: size, height: size, borderRadius: 99,
          background: i <= value ? accent : 'rgba(255,255,255,0.16)',
        }} />
      ))}
    </div>
  );
}

// ─── Status pill ─────────────────────────────────────────────────
function StatusPill({ status, compact = false }) {
  const m = window.STATUS_META[status];
  if (!m) return null;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: compact ? '2px 7px' : '3px 9px',
      borderRadius: 99,
      background: 'rgba(255,255,255,0.06)',
      border: '0.5px solid rgba(255,255,255,0.08)',
      color: VH_TEXT,
      fontSize: compact ? 10 : 11, fontWeight: 500, letterSpacing: 0.1,
    }}>
      <span style={{
        width: 5, height: 5, borderRadius: 99, background: m.dot,
      }} />
      {m.short}
    </span>
  );
}

// ─── Chip (filter) ───────────────────────────────────────────────
function Chip({ children, active = false, onClick, accent = '#e11d48', icon }) {
  return (
    <button onClick={onClick} className="vh-tap" style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '7px 12px', borderRadius: 99,
      background: active ? accent : 'rgba(255,255,255,0.05)',
      color: active ? '#fff' : VH_TEXT,
      border: active ? `0.5px solid ${accent}` : '0.5px solid rgba(255,255,255,0.08)',
      fontSize: 12, fontWeight: 500, letterSpacing: 0.1,
      cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
      fontFamily: 'inherit',
      boxShadow: active ? `0 4px 14px ${accent}33` : 'none',
    }}>
      {icon}
      {children}
    </button>
  );
}

// ─── Section header (uppercase eyebrow) ──────────────────────────
function SectionHeader({ children, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 16px', marginTop: 18, marginBottom: 10,
    }}>
      <div style={{
        fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase',
        color: VH_DIM, fontWeight: 600,
      }}>{children}</div>
      {right}
    </div>
  );
}

// ─── Bottom tab bar (4 tabs) ─────────────────────────────────────
function BottomTabs({ active, onChange, accent }) {
  const tabs = [
    { id: 'library',  label: 'Library',  icon: TabIconLibrary },
    { id: 'search',   label: 'Search',   icon: TabIconSearch },
    { id: 'cast',     label: 'Cast',     icon: TabIconActress },
    { id: 'profile',  label: 'Profile',  icon: TabIconProfile },
  ];
  return (
    <div style={{
      position: 'relative', zIndex: 40,
      paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 4px)',
      paddingTop: 8,
      background: 'linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.85) 35%, rgba(10,10,12,0.96) 100%)',
      backdropFilter: 'blur(14px) saturate(160%)',
      WebkitBackdropFilter: 'blur(14px) saturate(160%)',
      borderTop: `0.5px solid ${VH_HAIRLINE}`,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', padding: '6px 12px 4px' }}>
        {tabs.map(t => {
          const isActive = active === t.id;
          const Icon = t.icon;
          return (
            <button key={t.id} onClick={() => onChange(t.id)}
              className="vh-tap"
              style={{
                position: 'relative',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
                padding: '6px 14px', minWidth: 60, border: 'none', background: 'transparent',
                color: isActive ? accent : VH_DIM, cursor: 'pointer',
                fontFamily: 'inherit',
              }}>
              <Icon active={isActive} color={isActive ? accent : 'rgba(245,245,247,0.55)'} />
              <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.2 }}>{t.label}</span>
              {isActive && (
                <div className="vh-tab-glow" style={{ background: accent }}/>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function TabIconLibrary({ color, active }) {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <rect x="3"  y="4" width="4" height="14" rx="1.2" stroke={color} strokeWidth="1.6" fill={active ? color : 'none'} fillOpacity={active ? 0.18 : 0}/>
      <rect x="9"  y="4" width="4" height="14" rx="1.2" stroke={color} strokeWidth="1.6" fill={active ? color : 'none'} fillOpacity={active ? 0.18 : 0}/>
      <rect x="15" y="4" width="4" height="14" rx="1.2" stroke={color} strokeWidth="1.6" fill={active ? color : 'none'} fillOpacity={active ? 0.18 : 0}/>
    </svg>
  );
}
function TabIconSearch({ color }) {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <circle cx="10" cy="10" r="6" stroke={color} strokeWidth="1.7"/>
      <path d="M14.5 14.5L18 18" stroke={color} strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  );
}
function TabIconActress({ color, active }) {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <circle cx="11" cy="8" r="3.8" stroke={color} strokeWidth="1.7" fill={active ? color : 'none'} fillOpacity={active ? 0.18 : 0}/>
      <path d="M4 19c0-3.5 3.1-6 7-6s7 2.5 7 6" stroke={color} strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  );
}
function TabIconProfile({ color, active }) {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <circle cx="11" cy="11" r="8" stroke={color} strokeWidth="1.7" fill={active ? color : 'none'} fillOpacity={active ? 0.15 : 0}/>
      <circle cx="11" cy="9" r="2.6" stroke={color} strokeWidth="1.6"/>
      <path d="M5.5 17.5c1-2.2 3.1-3.5 5.5-3.5s4.5 1.3 5.5 3.5" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  );
}

// ─── Floating Add button ────────────────────────────────────────
function FAB({ accent, onClick }) {
  return (
    <button onClick={onClick} className="vh-tap" style={{
      position: 'fixed', right: 18, bottom: 'calc(72px + env(safe-area-inset-bottom, 0px))', zIndex: 45,
      width: 54, height: 54, borderRadius: 99, border: 'none', cursor: 'pointer',
      background: accent,
      boxShadow: `0 10px 30px ${accent}55, 0 4px 10px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.15) inset`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width="22" height="22" viewBox="0 0 22 22">
        <path d="M11 4v14M4 11h14" stroke="#fff" strokeWidth="2.4" strokeLinecap="round"/>
      </svg>
    </button>
  );
}

// ─── Top app bar (compact, dark) ────────────────────────────────
function TopBar({ title, subtitle, locked, onToggleLock, right, accent, topPad = 56 }) {
  return (
    <div style={{
      paddingTop: topPad, padding: `${topPad}px 16px 12px`,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        {subtitle && (
          <div style={{
            fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase',
            color: VH_DIM2, fontWeight: 600, marginBottom: 4,
          }}>{subtitle}</div>
        )}
        <div style={{
          fontSize: 28, fontWeight: 700, color: VH_TEXT, letterSpacing: -0.5,
          lineHeight: 1.1,
        }}>{title}</div>
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <button onClick={onToggleLock} title={locked ? 'Unlock' : 'Lock'} style={{
          width: 36, height: 36, borderRadius: 99, border: 'none', cursor: 'pointer',
          background: locked ? accent : 'rgba(255,255,255,0.07)',
          color: locked ? '#fff' : VH_TEXT,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {locked ? (
            <svg width="14" height="16" viewBox="0 0 14 16" fill="none">
              <rect x="2" y="7" width="10" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.6"/>
              <path d="M4 7V4.5a3 3 0 016 0V7" stroke="currentColor" strokeWidth="1.6"/>
            </svg>
          ) : (
            <svg width="14" height="16" viewBox="0 0 14 16" fill="none">
              <rect x="2" y="7" width="10" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.6"/>
              <path d="M4 7V4.5a3 3 0 016 0" stroke="currentColor" strokeWidth="1.6"/>
            </svg>
          )}
        </button>
        {right}
      </div>
    </div>
  );
}

Object.assign(window, {
  VH_BG, VH_SURFACE, VH_SURFACE_HI, VH_HAIRLINE, VH_TEXT, VH_DIM, VH_DIM2,
  PosterTile, RatingDots, StatusPill, Chip, SectionHeader,
  BottomTabs, FAB, TopBar,
});