// Account page — single profile (Preyansh). Shows saved rooms, favourites, past visualisations.
const { useEffect, useRef, useState } = React;

function Account({ navigate, tiles }) {
  const { profile, favourites } = useAccount();
  // The Rooms and Visualisations tabs were tied to the AI Studio
  // feature (uploaded room photos + the visualiser's saved outputs).
  // Studio is removed; the Account page collapses to Favourites +
  // Profile only. We keep the imports of `rooms` / `visualisations`
  // out so AccountStore doesn't bother fetching them, but the store
  // itself still exposes them for any future feature.
  const [tab, setTab] = useState('favourites');

  const favTiles = (favourites || []).map(id => tiles.find(t => t.id === id)).filter(Boolean);

  return (
    <div style={{ paddingTop: 'var(--nav-h)', minHeight: '100vh' }}>
      <div style={{ padding: 'clamp(48px, 8vw, 80px) clamp(20px, 4vw, 40px) 40px', borderBottom: '1px solid var(--cream-deep)' }}>
        <p className="t-label" style={{ color: 'var(--terracotta)', marginBottom: '16px' }}>Your account</p>
        <h1 className="t-display" style={{ fontSize: 'clamp(36px, 7vw, 78px)' }}>
          Hi, {profile?.name?.split(' ')[0] || 'there'}
        </h1>
        <p className="t-body" style={{ marginTop: '14px', maxWidth: '560px' }}>
          Your saved tiles and account details. Everything syncs with your device.
        </p>
      </div>

      <div style={{ display: 'flex', gap: '26px', padding: '0 clamp(20px, 4vw, 40px)', borderBottom: '1px solid var(--cream-deep)' }}>
        {[['favourites', `Favourites (${favTiles.length})`], ['profile', 'Profile']].map(([id, label]) => (
          <button key={id} onClick={() => setTab(id)} style={{
            padding: '20px 0', background: 'none', border: 'none', cursor: 'pointer',
            fontFamily: 'var(--sans)', fontSize: '12px', letterSpacing: '0.12em', textTransform: 'uppercase',
            color: tab === id ? 'var(--dark)' : 'var(--dark-mid)',
            borderBottom: tab === id ? '2px solid var(--terracotta)' : '2px solid transparent',
          }}>{label}</button>
        ))}
      </div>

      <div style={{ padding: 'clamp(28px, 5vw, 40px)' }}>
        {tab === 'favourites' && (
          favTiles.length === 0 ? (
            <EmptyBlock icon="♡" title="No favourites yet" body="Tap the heart on any tile to save it here." ctaLabel="Browse tiles" onCta={() => navigate('collections')}/>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: '16px' }}>
              {favTiles.map(t => {
                const thumb = (Array.isArray(t.sightImages) && t.sightImages[0]) || t.img || '';
                const sub   = [t.collection, (Array.isArray(t.sizes) && t.sizes[0]) || t.size].filter(Boolean).join(' · ');
                return (
                  <button key={t.id} onClick={() => navigate('product', t)} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}>
                    <div className="tile-frame" style={{ aspectRatio: '1', overflow: 'hidden' }}>
                      <img src={thumb} alt={t.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                    </div>
                    <p style={{ fontFamily: 'var(--serif)', fontSize: '17px', marginTop: '10px' }}>{t.name}</p>
                    <p style={{ fontFamily: 'var(--sans)', fontSize: '11px', color: 'var(--dark-mid)', marginTop: '2px' }}>{sub || '—'}</p>
                  </button>
                );
              })}
            </div>
          )
        )}

        {tab === 'profile' && profile && (
          <div style={{ maxWidth: '420px' }}>
            <div style={{ marginBottom: '22px' }}><p className="t-label" style={{ marginBottom: '4px' }}>Name</p><p style={{ fontFamily: 'var(--serif)', fontSize: '22px' }}>{profile.name}</p></div>
            <div style={{ marginBottom: '22px' }}><p className="t-label" style={{ marginBottom: '4px' }}>Email</p><p style={{ fontFamily: 'var(--sans)', fontSize: '15px' }}>{profile.email}</p></div>
            <div style={{ marginBottom: '22px' }}><p className="t-label" style={{ marginBottom: '4px' }}>Phone</p><p style={{ fontFamily: 'var(--sans)', fontSize: '15px' }}>{profile.phone}</p></div>
            <div><p className="t-label" style={{ marginBottom: '4px' }}>Member since</p><p style={{ fontFamily: 'var(--sans)', fontSize: '15px' }}>{profile.createdAt ? new Date(profile.createdAt).toLocaleDateString() : '—'}</p></div>
          </div>
        )}
      </div>
    </div>
  );
}

function EmptyBlock({ icon, title, body, ctaLabel, onCta }) {
  return (
    <div style={{ textAlign: 'center', padding: '80px 20px', color: 'var(--dark-mid)' }}>
      <p style={{ fontSize: '52px', marginBottom: '12px', color: 'var(--terracotta)' }}>{icon}</p>
      <p style={{ fontFamily: 'var(--serif)', fontSize: '28px', fontWeight: 300, color: 'var(--dark)', marginBottom: '10px' }}>{title}</p>
      <p style={{ fontFamily: 'var(--sans)', fontSize: '14px', marginBottom: '24px', maxWidth: '420px', margin: '0 auto 24px' }}>{body}</p>
      <button onClick={onCta} className="btn btn-dark">{ctaLabel}</button>
    </div>
  );
}

Object.assign(window, { Account });