// profile-screen.jsx — signed-in profile + signed-out call-to-action

const { useState } = React;

function ProfileScreen({ user, items, locked, accent, onSignOut, onOpenAuth }) {
  if (!user) {
    return (
      <div style={{ paddingBottom: 140 }}>
        <window.TopBar
          title="Profile"
          subtitle="Sign in to unlock"
          locked={locked.value}
          onToggleLock={locked.toggle}
          accent={accent}
        />
        <div style={{ padding: '24px 22px 0' }}>
          <div className="vh-lock-glow" style={{
            borderRadius: 18, padding: 22,
            background: `linear-gradient(135deg, ${window.VH_SURFACE_HI} 0%, ${window.VH_SURFACE} 100%)`,
            border: `0.5px solid ${accent}44`,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: `radial-gradient(60% 60% at 100% 0%, ${accent}33, transparent 65%)`,
              pointerEvents: 'none',
            }}/>
            <div style={{ position: 'relative' }}>
              <LockBigIcon accent={accent}/>
              <div style={{ fontSize: 19, fontWeight: 700, color: window.VH_TEXT, marginTop: 14, letterSpacing: -0.3 }}>
                Unlock your private library
              </div>
              <div style={{ fontSize: 13.5, color: window.VH_DIM, marginTop: 6, lineHeight: 1.55 }}>
                Codes, titles, and cast are blurred until you sign in. Everything is scoped to your account — no public access, no sharing.
              </div>
              <button onClick={onOpenAuth} className="vh-tap" style={{
                marginTop: 18, width: '100%', height: 48, borderRadius: 12, border: 'none',
                background: accent, color: '#fff', fontSize: 14.5, fontWeight: 600,
                boxShadow: `0 10px 30px ${accent}55, 0 1px 0 rgba(255,255,255,0.18) inset`,
                cursor: 'pointer', fontFamily: 'inherit',
              }}>
                Sign in to continue
              </button>
            </div>
          </div>

          <PrivacyBullets/>
        </div>
      </div>
    );
  }

  // Signed-in: stats + email + sign-out
  const stats = {
    total: items.length,
    watched: items.filter(i => i.status === 'watched').length,
    want:    items.filter(i => i.status === 'want_to_watch').length,
    fav:     items.filter(i => i.status === 'favorite').length,
  };
  const initials = (user.displayName || user.email || '?').split(/[\s.@]/).filter(Boolean).slice(0,2).map(s => s[0]).join('').toUpperCase();
  const hue = window.hashHue(user.email || user.uid);
  const grad = `radial-gradient(110% 110% at 25% 20%, oklch(0.55 0.18 ${hue}), oklch(0.18 0.06 ${(hue+30)%360}))`;

  return (
    <div style={{ paddingBottom: 140 }}>
      <window.TopBar
        title="Profile"
        subtitle={window.VHFirebase.mode === 'mock' ? 'Local demo · private' : 'Firebase · private'}
        locked={locked.value}
        onToggleLock={locked.toggle}
        accent={accent}
      />

      <div style={{ padding: '0 16px' }}>
        <div style={{
          borderRadius: 18, padding: 18,
          background: `linear-gradient(135deg, ${window.VH_SURFACE_HI} 0%, ${window.VH_SURFACE} 100%)`,
          border: `0.5px solid ${window.VH_HAIRLINE}`,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            width: 60, height: 60, borderRadius: 99, background: grad,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 20, fontWeight: 700, flexShrink: 0,
          }}>{initials}</div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{
              fontSize: 16.5, fontWeight: 700, color: window.VH_TEXT,
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>{user.displayName || user.email.split('@')[0]}</div>
            <div style={{
              fontSize: 12.5, color: window.VH_DIM, marginTop: 2,
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>{user.email}</div>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr',
          gap: 8, marginTop: 14,
        }}>
          <Stat label="Saved"   value={stats.total} accent={accent}/>
          <Stat label="Watched" value={stats.watched}/>
          <Stat label="Want"    value={stats.want}/>
          <Stat label="Fav"     value={stats.fav}/>
        </div>

        <Row icon={<KeyIcon/>} label="Account" value={user.provider === 'google.com' ? 'Google' : 'Email'}/>
        <Row icon={<ShieldIcon/>} label="Privacy mode" value={locked.value ? 'On' : 'Off'} onClick={locked.toggle} accent={accent}/>
        <Row icon={<DbIcon/>} label="Backend" value={window.VHFirebase.mode === 'mock' ? 'Local (demo)' : 'Firestore'}/>

        <button onClick={onSignOut} style={{
          marginTop: 18, width: '100%', height: 46, borderRadius: 10, cursor: 'pointer',
          background: 'rgba(225,29,72,0.10)', color: '#fca5b1',
          border: '0.5px solid rgba(225,29,72,0.30)',
          fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
        }}>
          Sign out
        </button>
      </div>
    </div>
  );
}

function Stat({ label, value, accent }) {
  return (
    <div style={{
      padding: '12px 8px', borderRadius: 12,
      background: 'rgba(255,255,255,0.03)',
      border: `0.5px solid ${window.VH_HAIRLINE}`,
      textAlign: 'center',
    }}>
      <div style={{ fontSize: 19, fontWeight: 700, color: window.VH_TEXT, letterSpacing: -0.3 }}>{value}</div>
      <div style={{
        fontSize: 10, color: window.VH_DIM, textTransform: 'uppercase',
        letterSpacing: 0.8, marginTop: 2, fontWeight: 600,
      }}>{label}</div>
    </div>
  );
}

function Row({ icon, label, value, onClick, accent }) {
  return (
    <button onClick={onClick} disabled={!onClick} style={{
      marginTop: 12, width: '100%',
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '13px 14px', borderRadius: 12,
      background: 'rgba(255,255,255,0.03)',
      border: `0.5px solid ${window.VH_HAIRLINE}`,
      cursor: onClick ? 'pointer' : 'default', textAlign: 'left',
      fontFamily: 'inherit', color: window.VH_TEXT,
    }}>
      <div style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', color: window.VH_DIM }}>{icon}</div>
      <div style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 13, color: onClick ? accent || window.VH_DIM : window.VH_DIM, fontWeight: 500 }}>{value}</div>
    </button>
  );
}

function PrivacyBullets() {
  return (
    <div style={{ marginTop: 20 }}>
      {[
        ['Per-user data',     'Every record is scoped to your userId.'],
        ['Private by default', 'No public reads, no shared collections.'],
        ['Privacy lock',      'Blur codes / titles on a glance.'],
      ].map(([t, d]) => (
        <div key={t} style={{
          display: 'flex', gap: 10, padding: '12px 0',
          borderBottom: `0.5px solid ${window.VH_HAIRLINE}`,
        }}>
          <div style={{ width: 6, height: 6, borderRadius: 99, background: window.VH_DIM, marginTop: 7, flexShrink: 0 }}/>
          <div>
            <div style={{ color: window.VH_TEXT, fontSize: 13.5, fontWeight: 600 }}>{t}</div>
            <div style={{ color: window.VH_DIM, fontSize: 12.5, marginTop: 2, lineHeight: 1.4 }}>{d}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function LockBigIcon({ accent }) {
  return (
    <div style={{
      width: 44, height: 44, borderRadius: 12,
      background: `linear-gradient(135deg, ${accent}33, ${accent}11)`,
      border: `0.5px solid ${accent}55`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width="20" height="22" viewBox="0 0 20 22" fill="none">
        <rect x="3" y="10" width="14" height="10" rx="2" stroke={accent} strokeWidth="1.8"/>
        <path d="M6 10V6.5a4 4 0 018 0V10" stroke={accent} strokeWidth="1.8"/>
      </svg>
    </div>
  );
}
function KeyIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <circle cx="6" cy="12" r="3" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M8.5 9.5L15 3M12 6l2 2M14 4l2 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}
function ShieldIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M9 1.5L2.5 4.2v5.4c0 4 3 6.4 6.5 7.4 3.5-1 6.5-3.4 6.5-7.4V4.2L9 1.5z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
}
function DbIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <ellipse cx="9" cy="4" rx="6" ry="2" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3 4v10c0 1.1 2.7 2 6 2s6-.9 6-2V4" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3 9c0 1.1 2.7 2 6 2s6-.9 6-2" stroke="currentColor" strokeWidth="1.5"/>
    </svg>
  );
}

Object.assign(window, { ProfileScreen });