// ─── Profile Modal ───────────────────────────────────────────
// Renders over the main homepage. Opens when:
//   • window.OPEN_PROFILE === true  (set by server when visiting /profile.html directly)
//   • 'not:modal' event with detail 'profile'  (triggered by Header profile link)
// Shows the signed-in user's email, their queued submissions, and a sign-out button.

function ProfileModal() {
  const user = window.CURRENT_USER;
  const [open, setOpen]               = React.useState(!!(window.OPEN_PROFILE));
  const [submissions, setSubmissions] = React.useState(null);
  const [subsLoading, setSubsLoading] = React.useState(false);
  const [subsError, setSubsError]     = React.useState(false);

  React.useEffect(() => {
    function onModal(e) { if (e.detail === 'profile') setOpen(true); }
    function onPop()   { if (!window.location.pathname.includes('profile')) setOpen(false); }
    window.addEventListener('not:modal', onModal);
    window.addEventListener('popstate',  onPop);
    return () => {
      window.removeEventListener('not:modal', onModal);
      window.removeEventListener('popstate',  onPop);
    };
  }, []);

  React.useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') handleClose(); }
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open]);

  // Fetch submissions once when the modal first opens
  React.useEffect(() => {
    if (!open || submissions !== null) return;
    setSubsLoading(true);
    const csrf = document.cookie.split('; ')
      .find(r => r.startsWith('XSRF-TOKEN='))?.split('=')[1];
    fetch('/api/submissions/user', {
      headers: Object.assign(
        { 'X-Requested-With': 'XMLHttpRequest', 'X-Application-Request': 'true', 'Accept': 'application/json' },
        csrf ? { 'XSRF-TOKEN': csrf } : {}
      )
    })
    .then(r => r.ok ? r.json() : Promise.reject())
    .then(d => { setSubmissions(d.submissions || []); setSubsLoading(false); })
    .catch(() => { setSubsError(true); setSubsLoading(false); });
  }, [open]);

  function handleClose() {
    setOpen(false);
    if (window.location.pathname.includes('profile')) {
      if (window.history.state && window.history.state.notModal) {
        history.back();
      } else {
        history.pushState({}, '', '/');
      }
    } else {
      history.pushState({}, '', window.location.pathname + window.location.search);
    }
  }

  function handleSignOut() {
    const csrf = document.cookie.split('; ')
      .find(r => r.startsWith('XSRF-TOKEN='))?.split('=')[1];
    fetch('/api/auth/logout', {
      method: 'POST',
      headers: Object.assign(
        { 'X-Requested-With': 'XMLHttpRequest', 'X-Application-Request': 'true', 'Accept': 'application/json' },
        csrf ? { 'XSRF-TOKEN': csrf } : {}
      )
    })
    .then(() => { window.location.href = '/'; })
    .catch(() => { window.location.href = '/'; });
  }

  if (!open) return null;

  // If user is somehow not set (direct URL visit while logged out) show a prompt
  if (!user) {
    return (
      <div className="abt-overlay" onClick={handleClose}>
        <div className="abt-panel lgn-panel" onClick={e => e.stopPropagation()}>
          <div className="abt-head">
            <span className="abt-label">Profile</span>
            <button className="abt-close" onClick={handleClose}>✕ close</button>
          </div>
          <div className="lgn-body">
            <p className="lgn-lead">Sign in to view your profile.</p>
            <a href="/api/auth/google" className="lgn-google-btn">
              <img src="https://www.google.com/favicon.ico" width="18" height="18" alt="" />
              Continue with Google
            </a>
          </div>
        </div>
      </div>
    );
  }

  const statusClass = s => 'prf-sub-status prf-sub-status--' + (s || 'pending').toLowerCase();

  return (
    <div className="abt-overlay" onClick={handleClose}>
      <div className="abt-panel prf-panel" onClick={e => e.stopPropagation()}>

        <div className="abt-head">
          <span className="abt-label">Profile</span>
          <button className="abt-close" onClick={handleClose}>✕ close</button>
        </div>

        <div className="abt-body prf-body">

          {/* Identity */}
          <div className="prf-user">
            <div className="prf-email mono">{user.email}</div>
          </div>

          {/* Submissions */}
          <h2 className="abt-section-head">My Submissions</h2>

          {subsLoading && (
            <p className="prf-hint mono">loading submissions…</p>
          )}
          {subsError && (
            <p className="prf-hint prf-hint--error mono">Could not load submissions.</p>
          )}
          {!subsLoading && !subsError && submissions !== null && submissions.length === 0 && (
            <p className="prf-hint mono">No submissions yet.</p>
          )}
          {!subsLoading && !subsError && submissions && submissions.map(s => (
            <div key={s._id} className="prf-submission">
              <div className="prf-sub-header">
                <span className="prf-sub-type mono">{s.type === 'photo' ? 'Photo' : 'Person'}</span>
                <span className={statusClass(s.status)}>{(s.status || 'pending').toLowerCase()}</span>
              </div>
              {s.people    && <div className="prf-sub-people mono">{s.people}</div>}
              {s.description && <div className="prf-sub-desc">{s.description}</div>}
              <div className="prf-sub-date mono">
                {new Date(s.submittedAt).toLocaleDateString('en-CA')}
              </div>
            </div>
          ))}

          {/* Sign out */}
          <div className="prf-footer">
            <button className="prf-signout mono" onClick={handleSignOut}>sign out</button>
          </div>

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

Object.assign(window, { ProfileModal });