// app/screen-shared.jsx — recipes shared from other kitchens, grouped by sender.
// Each cook's wordmark adapts to their name. Save into your own library.

function SharedScreen() {
  const { layout, SHARED_KITCHENS, getRecipe, photoFor, openRecipe, back, saveRecipe, isFav } = useApp();
  const isMobile = layout === 'mobile';
  const isTablet = layout === 'tablet';
  const cols = isMobile ? 2 : (isTablet ? 3 : 4);
  const pad = isMobile ? '0 18px' : '0 48px';
  const [followed, setFollowed] = React.useState({});
  const [saved, setSaved] = React.useState({});

  return (
    <Shell tab="recipes">
      <div style={{ position: 'relative', minHeight: '100%' }}>
        <div style={{ padding: isMobile ? '24px 18px 14px' : '40px 48px 28px' }}>
          <button onClick={back} style={{ background: 'transparent', border: 'none', cursor: 'pointer',
            fontFamily: 'Bricolage Grotesque', fontSize: 13, fontWeight: 500, color: 'var(--ink-3)',
            padding: 0, marginBottom: 18 }}>← Back</button>
          <span style={{ display: 'block', fontFamily: 'Bricolage Grotesque', fontSize: isMobile ? 10 : 11,
            fontWeight: 600, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--olive)' }}>
            Shared with you · {SHARED_KITCHENS.reduce((s, k) => s + k.recipeIds.length, 0)} recipes from {SHARED_KITCHENS.length} cookbooks
          </span>
          <h1 style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: isMobile ? 38 : (isTablet ? 60 : 76),
            lineHeight: 0.92, letterSpacing: '-0.045em', color: 'var(--ink)', margin: '10px 0 0' }}>
            From other
            <span style={{ fontFamily: 'Spectral', fontStyle: 'italic', fontWeight: 400, color: 'var(--olive)' }}> kitchens.</span>
          </h1>
        </div>

        {SHARED_KITCHENS.map((k, ki) => (
          <div key={k.name} style={{ padding: isMobile ? '0 18px 40px' : '0 48px 48px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22,
              paddingTop: ki > 0 ? 32 : 0, borderTop: ki > 0 ? '1px solid var(--hairline)' : 'none' }}>
              <div style={{ width: isMobile ? 38 : 44, height: isMobile ? 38 : 44, borderRadius: 999,
                background: k.grad, color: '#f3ede1', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: isMobile ? 16 : 18, flexShrink: 0 }}>{k.initial}</div>
              <div style={{ minWidth: 0 }}>
                <h2 style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 600, fontSize: isMobile ? 22 : 26,
                  color: 'var(--ink)', letterSpacing: '-0.025em', margin: 0 }}>
                  {k.name}<span style={{ fontFamily: 'Spectral', fontStyle: 'italic', fontWeight: 400,
                    color: 'var(--olive)' }}> Cooks.</span>
                </h2>
                <div style={{ fontFamily: 'Spectral', fontStyle: 'italic', fontSize: isMobile ? 13 : 14,
                  color: 'var(--ink-3)', marginTop: 2 }}>{k.meta}</div>
              </div>
              <span style={{ flex: 1, height: 1, background: 'var(--hairline)' }} />
              {!isMobile && (
                <FButton size="s" variant="ghost" onClick={() => setFollowed((f) => ({ ...f, [k.name]: !f[k.name] }))}
                  style={followed[k.name] ? { color: 'var(--olive)', borderColor: 'rgba(240,168,80,0.5)',
                    background: 'rgba(240,168,80,0.10)' } : undefined}>
                  {followed[k.name] ? <><Icon.check size={14} stroke={2.4} />Following</> : 'Follow cookbook'}
                </FButton>
              )}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`,
              gap: isMobile ? '24px 14px' : '32px 24px' }}>
              {k.recipeIds.map((id) => {
                const r = getRecipe(id);
                if (!r) return null;
                return (
                  <div key={id} style={{ position: 'relative' }}>
                    <div onClick={() => openRecipe(id, { sharedBy: k.name })} style={{ cursor: 'pointer' }}>
                      <FRecipeCard recipe={r} photoSrc={photoFor(id)} size={isMobile ? 's' : 'm'} />
                    </div>
                    <button onClick={() => { if (saved[id]) return; saveRecipe(r); setSaved((s) => ({ ...s, [id]: true })); }}
                      disabled={!!saved[id]}
                      style={{ marginTop: 8, width: '100%', fontFamily: 'Bricolage Grotesque', fontSize: 12,
                        fontWeight: 500, padding: '8px 10px', borderRadius: 999, cursor: saved[id] ? 'default' : 'pointer',
                        background: saved[id] ? 'rgba(240,168,80,0.10)' : 'rgba(255,255,255,0.04)',
                        border: saved[id] ? '1px solid rgba(240,168,80,0.45)' : '1px solid var(--hairline)',
                        color: saved[id] ? 'var(--olive)' : 'var(--ink-2)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                      {saved[id] ? <><Icon.check size={13} stroke={2.4} />Saved to your cookbook</> : <><Icon.plus size={13} />Save to my cookbook</>}
                    </button>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </Shell>
  );
}

Object.assign(window, { SharedScreen });