// Community surface: groups list, create/join dialogs, group detail,
// join-by-URL handoff. Extracted from app.jsx in Wave 7a.
//
// Exports (via Object.assign(window, { ... }) at bottom):
//   CommunityScreen, CreateGroupDialog, JoinGroupDialog,
//   GroupDetailScreen, JoinGroupRouteScreen
//
// External deps consumed:
//   from data modules: useGroups, useGroupMembers, useAuth,
//     createGroup, joinGroup, leaveGroup, deleteGroup, findGroup
//   from helpers.jsx: Page, navigate

(function () {

// ─── Community ─────────────────────────────────────────────────────────────
// Lists the user's groups and offers Create / Join actions. Owner-created
// groups get a unique join_code; sharing the code (or the deep-link) lets
// other users join via the join_group_by_code RPC.

function CommunityScreen() {
  const groups = useGroups();
  const auth = useAuth();
  const [showCreate, setShowCreate] = React.useState(false);
  const [showJoin, setShowJoin]     = React.useState(false);

  return (
    <Page
      crumbs={['Community']}
      actions={
        <>
          <button className="btn" onClick={() => setShowJoin(true)}>Join with code</button>
          <button className="btn dark" onClick={() => setShowCreate(true)}>＋ New group</button>
        </>
      }
    >
      <div className="cd-page">
        <div className="cd-page-head">
          <div className="cd-collage" aria-hidden="true">
            <span className="s1"></span><span className="s2"></span><span className="s3"></span>
          </div>
          <div className="cd-page-eyebrow">§ Community</div>
          <h1 className="cd-page-title">Groups</h1>
          <p className="cd-page-sub">Create study groups and invite people with a code.</p>
        </div>

        {groups.length === 0 ? (
          <div className="cd-empty">
            You aren't in any groups yet.{' '}
            <a onClick={() => setShowCreate(true)}>Create one</a>
            {' '}or{' '}
            <a onClick={() => setShowJoin(true)}>join with a code</a>.
          </div>
        ) : (
          <div className="cd-group-grid">
            {groups.map((g) => {
              const isOwner = g.owner_id === auth.user?.id;
              return (
                <button key={g.id} className="cd-group-card" onClick={() => navigate(`/community/group/${g.id}`)}>
                  <div className="meta">{isOwner ? 'Owner' : 'Member'}</div>
                  <div className="h">{g.name}</div>
                  {g.description && <div style={{ color: 'var(--cd-ink-soft)', fontSize: 13.5, lineHeight: 1.5 }}>{g.description}</div>}
                  <div className="meta" style={{ marginTop: 'auto', textTransform: 'none', letterSpacing: 0 }}>
                    Code: <span style={{ color: 'var(--cd-ink-soft)' }}>{g.join_code}</span>
                  </div>
                </button>
              );
            })}
          </div>
        )}

        <div className="cd-help-grid">
          <div className="cd-help-card">
            <div className="lbl">Create a group</div>
            <div className="h">Start a study circle</div>
            <div className="b">Spin up a private space for a class or project. Share guides, notes and decks with the people you invite.</div>
            <div className="action"><button className="btn dark" onClick={() => setShowCreate(true)}>＋ New group</button></div>
          </div>
          <div className="cd-help-card">
            <div className="lbl">Join a group</div>
            <div className="h">Already have a code?</div>
            <div className="b">Paste an invite code to drop into an existing group. Codes are case-insensitive and never expire.</div>
            <div className="action"><button className="btn" onClick={() => setShowJoin(true)}>Enter code</button></div>
          </div>
        </div>
      </div>
      {showCreate && <CreateGroupDialog onClose={() => setShowCreate(false)} />}
      {showJoin   && <JoinGroupDialog   onClose={() => setShowJoin(false)} />}
    </Page>
  );
}

function CreateGroupDialog({ onClose }) {
  const [name, setName] = React.useState('');
  const [desc, setDesc] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr]   = React.useState(null);
  const submit = async (e) => {
    e.preventDefault();
    setErr(null); setBusy(true);
    try {
      const g = await window.createGroup({ name, description: desc });
      onClose();
      navigate(`/community/group/${g.id}`);
    } catch (e2) {
      setErr(e2.message || String(e2));
      setBusy(false);
    }
  };
  return (
    <div className="auth-modal-backdrop" onClick={onClose}>
      <div className="auth-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 440 }}>
        <button className="auth-modal-close" type="button" onClick={onClose} aria-label="Close">×</button>
        <div className="auth-modal-eyebrow">§ Community</div>
        <h2 className="auth-modal-title">New group</h2>
        <form onSubmit={submit} className="auth-form">
          <label className="auth-field">
            <span>Name</span>
            <input value={name} onChange={(e) => setName(e.target.value)} autoFocus
                   placeholder="AP Bio Study Group" maxLength={100} />
          </label>
          <label className="auth-field">
            <span>Description (optional)</span>
            <input value={desc} onChange={(e) => setDesc(e.target.value)}
                   placeholder="What's this group for?" maxLength={500} />
          </label>
          {err && <div className="auth-alert error">{err}</div>}
          <button type="submit" className="auth-submit" disabled={busy || !name.trim()}>
            {busy ? 'Creating…' : 'Create group →'}
          </button>
        </form>
      </div>
    </div>
  );
}

function JoinGroupDialog({ onClose, initialCode = '' }) {
  const [code, setCode] = React.useState(initialCode);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr]   = React.useState(null);
  const submit = async (e) => {
    e.preventDefault();
    setErr(null); setBusy(true);
    try {
      const id = await window.joinGroup(code.trim());
      onClose();
      navigate(`/community/group/${id}`);
    } catch (e2) {
      setErr(e2.message || String(e2));
      setBusy(false);
    }
  };
  return (
    <div className="auth-modal-backdrop" onClick={onClose}>
      <div className="auth-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 420 }}>
        <button className="auth-modal-close" type="button" onClick={onClose} aria-label="Close">×</button>
        <div className="auth-modal-eyebrow">§ Community</div>
        <h2 className="auth-modal-title">Join a group</h2>
        <p className="auth-modal-sub">Paste the 8-character code from the group owner.</p>
        <form onSubmit={submit} className="auth-form">
          <label className="auth-field">
            <span>Join code</span>
            <input value={code} onChange={(e) => setCode(e.target.value.toUpperCase())}
                   autoFocus placeholder="ABCD2345" maxLength={32}
                   style={{ fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }} />
          </label>
          {err && <div className="auth-alert error">{err}</div>}
          <button type="submit" className="auth-submit" disabled={busy || !code.trim()}>
            {busy ? 'Joining…' : 'Join group →'}
          </button>
        </form>
      </div>
    </div>
  );
}

function GroupDetailScreen({ groupId }) {
  const auth = useAuth();
  const groupsCache = useGroups();
  const members = useGroupMembers(groupId);
  const [group, setGroup] = React.useState(() => groupsCache.find((g) => g.id === groupId) || null);
  const [loadErr, setLoadErr] = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    if (!group) {
      window.findGroup(groupId)
        .then((g) => {
          if (cancelled) return;
          if (!g) setLoadErr('Group not found, or you do not have access.');
          else setGroup(g);
        })
        .catch((e) => {
          if (cancelled) return;
          console.error('findGroup failed', e);
          setLoadErr(e.message || 'Failed to load group.');
        });
    } else {
      // Keep local in sync if the cache entry changes (e.g., cache loaded after mount).
      const fresh = groupsCache.find((g) => g.id === groupId);
      if (fresh && fresh !== group) setGroup(fresh);
    }
    return () => { cancelled = true; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [groupId, groupsCache]);

  const isOwner = group && group.owner_id === auth.user?.id;
  const joinUrl = group ? `${window.location.origin}/#/community/join/${group.join_code}` : '';
  const [copied, setCopied] = React.useState(null);
  const copy = async (text, label) => {
    try { await navigator.clipboard.writeText(text); setCopied(label); setTimeout(() => setCopied(null), 1500); }
    catch { setCopied(null); }
  };

  if (loadErr) {
    return (
      <Page crumbs={[{ label: 'Community', to: '/community' }, 'Group']}>
        <div className="cd-page" style={{ overflow: 'auto' }}>
          <div style={{ padding: 24, color: 'var(--cd-ink-soft)' }}>{loadErr}</div>
          <button className="btn" onClick={() => navigate('/community')}>← Back to community</button>
        </div>
      </Page>
    );
  }
  if (!group) {
    return (
      <Page crumbs={[{ label: 'Community', to: '/community' }, '…']}>
        <div className="cd-page" style={{ overflow: 'auto' }}>
          <span className="pulse" style={{ color: 'var(--cd-muted)' }}>Loading group…</span>
        </div>
      </Page>
    );
  }

  const onLeave = async () => {
    if (!confirm('Leave this group?')) return;
    try { await window.leaveGroup(group.id); navigate('/community'); }
    catch (e) { alert(e.message || String(e)); }
  };
  const onDelete = async () => {
    if (!confirm('Delete this group permanently? Members will lose access.')) return;
    try { await window.deleteGroup(group.id); navigate('/community'); }
    catch (e) { alert(e.message || String(e)); }
  };

  return (
    <Page crumbs={[{ label: 'Community', to: '/community' }, group.name]}>
      <div className="cd-page" style={{ overflow: 'auto' }}>
        <div className="cd-page-head">
          <div className="cd-collage" aria-hidden="true">
            <span className="s1"></span><span className="s2"></span><span className="s3"></span>
          </div>
          <div className="cd-page-eyebrow">§ Group</div>
          <h1 className="cd-page-title">{group.name}</h1>
          {group.description && (
            <p className="cd-page-sub">{group.description}</p>
          )}
        </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 14, margin: '20px 0',
          }}>
            <div style={{ padding: 18, border: '1px solid var(--rule)', borderRadius: 'var(--r-md)' }}>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', letterSpacing: '0.08em', marginBottom: 8 }}>JOIN CODE</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <code style={{
                  flex: 1, fontFamily: 'var(--mono)', fontSize: 22, letterSpacing: '0.18em',
                  color: 'var(--ink-strong)', padding: '8px 10px',
                  background: 'var(--page-soft)', borderRadius: 'var(--r-sm)',
                }}>
                  {group.join_code}
                </code>
                <button className="btn sm" onClick={() => copy(group.join_code, 'code')}>
                  {copied === 'code' ? 'Copied' : 'Copy'}
                </button>
              </div>
              <div style={{ marginTop: 12, fontSize: 12.5, color: 'var(--ink-soft)' }}>Or share a link:</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 6 }}>
                <input readOnly value={joinUrl}
                       style={{
                         flex: 1, fontFamily: 'var(--mono)', fontSize: 11.5,
                         padding: '6px 8px', border: '1px solid var(--rule)',
                         borderRadius: 'var(--r-sm)', background: 'var(--page-soft)',
                         color: 'var(--ink-soft)', overflow: 'hidden', textOverflow: 'ellipsis',
                       }}
                       onFocus={(e) => e.target.select()} />
                <button className="btn sm" onClick={() => copy(joinUrl, 'link')}>
                  {copied === 'link' ? 'Copied' : 'Copy'}
                </button>
              </div>
            </div>

            <div style={{ padding: 18, border: '1px solid var(--rule)', borderRadius: 'var(--r-md)' }}>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', letterSpacing: '0.08em', marginBottom: 8 }}>
                MEMBERS · {members.length}
              </div>
              {members.length === 0 ? (
                <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>Just you, for now.</div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {members.map((m) => (
                    <div key={m.user_id} style={{
                      display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5,
                    }}>
                      <span style={{
                        width: 22, height: 22, borderRadius: '50%',
                        background: 'var(--page-soft)', display: 'inline-flex',
                        alignItems: 'center', justifyContent: 'center',
                        fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--ink-mute)',
                      }}>
                        {m.user_id === auth.user?.id ? 'me' : '·'}
                      </span>
                      <span style={{ flex: 1, color: 'var(--ink-soft)' }}>
                        {m.user_id === auth.user?.id ? 'You' : `User ${m.user_id.slice(0, 8)}`}
                      </span>
                      {m.role === 'owner' && (
                        <span style={{
                          fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-mute)',
                          letterSpacing: '0.08em',
                        }}>OWNER</span>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div style={{ marginTop: 24, display: 'flex', gap: 8 }}>
            {isOwner ? (
              <button className="btn sm" style={{ color: 'var(--brick)' }} onClick={onDelete}>
                Delete group
              </button>
            ) : (
              <button className="btn" onClick={onLeave}>Leave group</button>
            )}
          </div>
      </div>
    </Page>
  );
}

function JoinGroupRouteScreen({ code }) {
  const auth = useAuth();
  const [state, setState] = React.useState({ status: 'pending', err: null });
  React.useEffect(() => {
    if (!auth.ready) return;
    if (!auth.user) {
      // Stash the code so a future user-flow could resume after login. For
      // now, just nudge to the login page; the URL still has the code.
      setState({ status: 'needs-auth', err: null });
      return;
    }
    let cancelled = false;
    window.joinGroup(code).then((id) => {
      if (cancelled) return;
      navigate(`/community/group/${id}`);
    }).catch((e) => {
      if (cancelled) return;
      setState({ status: 'error', err: e.message || String(e) });
    });
    return () => { cancelled = true; };
  }, [auth.ready, auth.user, code]);

  return (
    <Page crumbs={[{ label: 'Community', to: '/community' }, 'Join']}>
      <div className="cd-page" style={{ overflow: 'auto', textAlign: 'center', paddingTop: 80 }}>
        {state.status === 'pending' && (
          <span className="pulse" style={{ color: 'var(--cd-muted)' }}>Joining group with code <strong>{code}</strong>…</span>
        )}
        {state.status === 'needs-auth' && (
          <>
            <div style={{ fontSize: 15, marginBottom: 12 }}>
              Sign in to join the group with code <strong>{code}</strong>.
            </div>
            <button className="btn dark" onClick={() => navigate('/')}>Go to login</button>
          </>
        )}
        {state.status === 'error' && (
          <>
            <div style={{ fontSize: 15, color: 'var(--brick)', marginBottom: 12 }}>{state.err}</div>
            <button className="btn" onClick={() => navigate('/community')}>← Back to Community</button>
          </>
        )}
      </div>
    </Page>
  );
}

// ─── Exports ───────────────────────────────────────────────────────────────

Object.assign(window, {
  CommunityScreen,
  CreateGroupDialog,
  JoinGroupDialog,
  GroupDetailScreen,
  JoinGroupRouteScreen,
});

})();