// Screen: "Your bach" overview — all saved themes

function HomeDashboard({ user, dates, themes, saved, onOpenTheme, onAddTheme, onLogout, onDeleteTheme, onShareTheme, onShareBach, onEditDetails }) {
  const progressTotal = dates.count || themes.length || 1;
  const progressDone = themes.length;
  const pct = Math.min(100, Math.round((progressDone / progressTotal) * 100));

  const themeItems = (t) => (t.items && t.items.length > 0) ? t.items : (CATALOG || []);
  // Each cart line may have been priced in a different currency depending on who
  // viewed/generated the theme — convert to this viewer's region before summing.
  const viewerRegion = user && user.region;
  const totalCartValue = themes.reduce((sum, t) => {
    const catalog = themeItems(t);
    return sum + Object.keys(t.cart || {}).reduce((s, itemId) => {
      const it = catalog.find(x => x.id === itemId);
      if (!it) return s;
      return s + convertAmount(it.price, viewerRegion, it.priceCurrency) * t.cart[itemId];
    }, 0);
  }, 0);

  const dateRange = (dates.start && dates.end)
    ? `${dates.start} → ${dates.end}`
    : 'Dates to be confirmed';
  const regionLabel = user.region ? `${REGIONS[user.region].flag} ${user.region}` : '';

  const emptySlots = Math.max(0, progressTotal - themes.length);

  return (
    <div style={{ background: TBL.cream, height: '100%', overflow: 'auto', position: 'relative' }}>
      {/* Hero */}
      <div style={{ padding: '26px 22px 8px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <Eyebrow style={{ marginBottom: 6 }}>Your bach</Eyebrow>
            <div style={{ fontFamily: SERIF, fontSize: 40, lineHeight: 1, color: TBL.ink, letterSpacing: -1.2, marginBottom: 10 }}>
              for <i style={{ color: TBL.jam }}>{user.brideName || '…'}</i>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', fontSize: 12, color: TBL.subtle }}>
              <span>{dateRange}</span>
              {regionLabel && <><span>·</span><span>{regionLabel}</span></>}
              {user.role && <><span>·</span><span>{user.role}</span></>}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
            {onShareBach && themes.length > 0 && (
              <button onClick={onShareBach} aria-label="Share whole bach" title="Share with the bridesmaids" style={{
                background: TBL.jam, color: TBL.cream, border: 'none',
                height: 32, padding: '0 14px', borderRadius: 999,
                cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6,
                fontFamily: SANS, fontSize: 12, fontWeight: 500,
                boxShadow: '0 1px 2px rgba(224,90,61,0.25), 0 3px 8px rgba(224,90,61,0.2)',
              }}>
                <svg width="12" height="12" viewBox="0 0 14 14"><path d="M10 4 L10 1 L13 4 M10 1 L5 6 M3 3 L3 12 L12 12 L12 8" stroke={TBL.cream} strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                <span>Share</span>
              </button>
            )}
            {onEditDetails && (
              <button onClick={onEditDetails} aria-label="Edit bach details" title="Edit" style={{
                background: 'none', border: `1px solid ${TBL.line}`, width: 32, height: 32,
                borderRadius: 999, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <svg width="13" height="13" viewBox="0 0 14 14"><path d="M10.5 1.5 L12.5 3.5 L3 13 L1 13 L1 11 Z" stroke={TBL.ink} strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Progress card */}
      <div style={{ padding: '20px 22px 0' }}>
        <Card pad={18}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <div style={{ fontFamily: SERIF, fontSize: 22, fontStyle: 'italic', color: TBL.ink, letterSpacing: -0.4 }}>
              {progressDone} of {progressTotal} themes built
            </div>
            <div style={{ fontFamily: MONO, fontSize: 11, color: TBL.jam }}>{pct}%</div>
          </div>
          <GradientProgress pct={pct}/>
          <div style={{ fontSize: 12, color: TBL.subtle, marginTop: 10 }}>
            {emptySlots > 0 ? `${emptySlots} more to go` : 'All themes started'} · total so far <b style={{ color: TBL.ink }}>{formatPrice(totalCartValue, user.region)}</b>
          </div>
        </Card>
      </div>

      {/* Themes */}
      <div style={{ padding: '22px 22px 0' }}>
        <Eyebrow style={{ marginBottom: 12 }}>Your themes</Eyebrow>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {themes.map((t, i) => {
            const v = t.vibe || {};
            const catalog = themeItems(t);
            const items = Object.keys(t.cart || {}).filter(k => t.cart[k] > 0).length;
            const sub = Object.keys(t.cart || {}).reduce((s, k) => {
              const it = catalog.find(x => x.id === k);
              if (!it) return s;
              return s + convertAmount(it.price, viewerRegion, it.priceCurrency) * t.cart[k];
            }, 0);
            const isHearted = !!(saved && v.key && saved[v.key]);
            return (
              <div key={t.id} style={{
                position: 'relative',
                background: '#fff', border: `1px solid ${TBL.line}`, borderRadius: 18,
                overflow: 'hidden', display: 'flex', width: '100%',
              }}>
                <button onClick={() => onOpenTheme(t.id)} style={{
                  flex: 1, background: 'none', border: 'none', padding: 0,
                  cursor: 'pointer', textAlign: 'left', display: 'flex', minWidth: 0,
                }}>
                  <div style={{ width: 96, background: v.grad || THEME_GRADIENTS.coastal, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 36, flexShrink: 0, position: 'relative' }}>
                    <span>{v.em || '🎨'}</span>
                    {isHearted && (
                      <div title="Saved to favourites" style={{
                        position: 'absolute', bottom: 8, left: 8,
                        width: 22, height: 22, borderRadius: 999,
                        background: TBL.jam, color: TBL.cream, fontSize: 11,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>♥</div>
                    )}
                  </div>
                  <div style={{ flex: 1, padding: '14px 14px 14px 14px', minWidth: 0 }}>
                    <Eyebrow style={{ marginBottom: 4 }}>Theme {i + 1}</Eyebrow>
                    <div style={{ fontFamily: SERIF, fontSize: 19, fontStyle: 'italic', color: TBL.ink, letterSpacing: -0.4, lineHeight: 1, marginBottom: 10, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', paddingRight: 60 }}>{v.n || v.name || 'Your theme'}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <PaletteDots colors={v.palette || ['#2d5d8a','#fbeee0','#e8d4c5','#f3b94a']}/>
                      <div style={{ fontSize: 12, color: TBL.subtle, whiteSpace: 'nowrap' }}>
                        {items === 0 ? 'Empty list' : <>{items} items · <b style={{ color: TBL.ink }}>{formatPrice(sub, user.region)}</b></>}
                      </div>
                    </div>
                  </div>
                </button>
                <div style={{
                  position: 'absolute', top: 8, right: 8, display: 'flex', gap: 4,
                }}>
                  {onShareTheme && (
                    <button onClick={(e) => { e.stopPropagation(); onShareTheme(t); }} aria-label="Share theme" title="Share" style={{
                      width: 28, height: 28, borderRadius: 999,
                      background: 'rgba(251,238,224,0.85)', border: `1px solid ${TBL.line}`,
                      cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <svg width="12" height="12" viewBox="0 0 14 14"><path d="M10 4 L10 1 L13 4 M10 1 L5 6 M3 3 L3 12 L12 12 L12 8" stroke={TBL.ink} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </button>
                  )}
                  {onDeleteTheme && (
                    <button onClick={(e) => { e.stopPropagation(); onDeleteTheme(t.id); }} aria-label="Delete theme" title="Delete" style={{
                      width: 28, height: 28, borderRadius: 999,
                      background: 'rgba(251,238,224,0.85)', border: `1px solid ${TBL.line}`,
                      cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <svg width="11" height="12" viewBox="0 0 12 13"><path d="M2 3 L10 3 M4 3 L4 1.5 L8 1.5 L8 3 M3 3 L3.5 12 L8.5 12 L9 3" stroke={TBL.ink} strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </button>
                  )}
                </div>
              </div>
            );
          })}
          {Array.from({ length: emptySlots }).map((_, i) => (
            <button key={'e' + i} onClick={onAddTheme} style={{
              background: 'transparent', border: `1.5px dashed rgba(42,26,31,0.2)`, borderRadius: 18,
              padding: 18, cursor: 'pointer', textAlign: 'left',
              display: 'flex', alignItems: 'center', gap: 14, width: '100%',
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 999, border: `1.5px solid ${TBL.ink}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, color: TBL.ink, fontWeight: 300, flexShrink: 0 }}>+</div>
              <div>
                <div style={{ fontFamily: SERIF, fontSize: 17, fontStyle: 'italic', color: TBL.ink }}>Build theme {themes.length + i + 1}</div>
                <div style={{ fontSize: 11, color: TBL.mute, marginTop: 2 }}>Pick a vibe or describe your own</div>
              </div>
            </button>
          ))}
          {emptySlots === 0 && themes.length > 0 && (
            <button onClick={onAddTheme} style={{
              background: 'transparent', border: `1.5px dashed rgba(42,26,31,0.2)`, borderRadius: 18,
              padding: 18, cursor: 'pointer', textAlign: 'left',
              display: 'flex', alignItems: 'center', gap: 14, width: '100%',
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 999, border: `1.5px solid ${TBL.ink}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, color: TBL.ink, fontWeight: 300, flexShrink: 0 }}>+</div>
              <div>
                <div style={{ fontFamily: SERIF, fontSize: 17, fontStyle: 'italic', color: TBL.ink }}>Add another theme</div>
                <div style={{ fontSize: 11, color: TBL.mute, marginTop: 2 }}>For another day or vibe</div>
              </div>
            </button>
          )}
        </div>
      </div>

      {/* Account footer */}
      <div style={{ padding: '28px 22px 40px' }}>
        <div style={{ background: `${TBL.mint}12`, border: `1px solid ${TBL.mint}30`, borderRadius: 14, padding: 16 }}>
          <Eyebrow color={TBL.ink} style={{ marginBottom: 6 }}>Saved locally</Eyebrow>
          <div style={{ fontSize: 13, color: TBL.subtle, lineHeight: 1.5, marginBottom: 10 }}>
            We're keeping everything safe in your browser — come back anytime to pick up where you left off. Accounts with email login launch this spring.
          </div>
          {onLogout && (
            <button onClick={onLogout} style={{
              background: 'none', border: 'none', fontFamily: MONO, fontSize: 10, letterSpacing: 1.5,
              color: TBL.mute, cursor: 'pointer', padding: 0, textTransform: 'uppercase',
            }}>Clear my bach & start over</button>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomeDashboard });