// Chart Growth Hub — "My Documents", shown under Account.
//
// A member's own record of what they have signed: status per document, the
// version and date, a downloadable signed copy, and a way to sign anything
// outstanding. Read-only over an append-only table — there is no edit path
// here by design.
//
// Depends on portal/agreements.js and portal/agreement-gate.jsx.
// Exposes window.MyDocuments({client, session, member, status, onSigned}).
(function(){
const { useState, useEffect } = React;

const fmtWhen = d => {
  if(!d) return '—';
  try { return new Date(d).toLocaleString(undefined,
    {year:'numeric', month:'short', day:'numeric', hour:'2-digit', minute:'2-digit'}); }
  catch(e){ return String(d).slice(0,16).replace('T',' '); }
};

(function injectCSS(){
  if(document.getElementById('cg-mydocs-css')) return;
  const s = document.createElement('style');
  s.id = 'cg-mydocs-css';
  s.textContent = `
  .md-row{display:flex;gap:14px;align-items:flex-start;padding:15px 17px;border:1px solid var(--border);
    border-radius:var(--radius-sm);background:linear-gradient(165deg,var(--surface-2),var(--surface));
    flex-wrap:wrap}
  .md-row.pending{border-color:var(--border-gold);
    background:linear-gradient(165deg,rgba(212,175,55,.07),transparent 60%),var(--navy-950)}
  .md-ico{width:36px;height:36px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
    border:1px solid var(--border-gold);background:rgba(212,175,55,.08)}
  .md-ico svg{width:17px;height:17px;fill:none;stroke:var(--gold-2);stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .md-title{font-weight:600;font-size:.92rem}
  .md-sub{font-size:.74rem;color:var(--ink-faint);font-family:var(--font-mono);margin-top:3px}
  .md-pill{font-size:.66rem;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;
    padding:3px 9px;border-radius:999px;border:1px solid var(--border);white-space:nowrap}
  .md-pill.ok{color:var(--green);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.07)}
  .md-pill.no{color:var(--gold-2);border-color:var(--border-gold);background:rgba(212,175,55,.08)}
  .md-pill.old{color:#f0a35e;border-color:rgba(240,163,94,.4);background:rgba(240,163,94,.08)}
  .md-act{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
  .md-btn{cursor:pointer;padding:7px 12px;border-radius:8px;border:1px solid var(--border);
    background:var(--surface);color:var(--ink-dim);font-size:.75rem;font-weight:600;font-family:inherit;
    display:inline-flex;align-items:center;gap:6px}
  .md-btn:hover{border-color:var(--border-gold);color:var(--gold-2)}
  .md-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:560px){ .md-act{margin-left:0;width:100%} }`;
  document.head.appendChild(s);
})();

const ICON = <svg viewBox="0 0 24 24"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></svg>;
const DOWN = <svg viewBox="0 0 24 24"><path d="M12 4v11"/><path d="M8 11l4 4 4-4"/><path d="M4 19h16"/></svg>;

function MyDocuments({client, session, member, status, onSigned}){
  const A = window.CG_AGREEMENTS;
  const [rows,setRows]   = useState(null);   // latest acceptance per form
  const [signing,setSigning] = useState(null);
  const [err,setErr]     = useState('');

  async function load(){
    const { data, error } = await client.from('agreement_acceptances')
      .select('*').eq('student_id', session.user.id)
      .order('accepted_at', {ascending:false});
    if(error){ setErr(error.message); setRows([]); return; }
    // Keep only the most recent acceptance per document. Superseded versions
    // stay in the database as the record of what was agreed at the time, but
    // showing five rows of the same terms would just be noise here.
    const latest = {};
    (data||[]).forEach(r => { if(!latest[r.form_key]) latest[r.form_key] = r; });
    setRows(latest); setErr('');
  }
  useEffect(()=>{ load(); /* eslint-disable-next-line */ },[]);

  if(!A) return <div style={{color:'var(--ink-faint)',fontSize:'.85rem'}}>Documents are loading…</div>;
  if(rows === null) return <div style={{padding:'26px 0',textAlign:'center'}}><span className="cg-spin"></span></div>;

  function signed(key){ return rows[key] || null; }
  function state(key){
    const r = signed(key);
    if(!r) return 'none';
    return r.version === A.docs[key].version ? 'ok' : 'old';
  }

  const outstanding = A.order.filter(k => state(k) !== 'ok');

  return <div>
    <div style={{marginBottom:4,fontWeight:700,fontSize:'1.02rem'}}>My documents</div>
    <p style={{color:'var(--ink-dim)',fontSize:'.86rem',margin:'0 0 16px',maxWidth:620}}>
      The agreements you have signed with Chart Growth Hub. Download a copy for your
      records at any time. Signed copies cannot be edited or deleted — by you or by us.
    </p>

    {err && <div style={{color:'var(--red)',fontSize:'.82rem',fontFamily:'var(--font-mono)',marginBottom:12}}>{err}</div>}

    {outstanding.length > 0 && <div style={{padding:'12px 15px',borderRadius:'var(--radius-sm)',
      border:'1px solid var(--border-gold)',background:'rgba(212,175,55,.07)',marginBottom:14,
      fontSize:'.84rem',color:'var(--ink-dim)'}}>
      You have <strong style={{color:'var(--gold-2)'}}>{outstanding.length}</strong>{' '}
      {outstanding.length===1?'document':'documents'} still to sign.
    </div>}

    <div style={{display:'grid',gap:10}}>
      {A.order.map(key => {
        const doc = A.docs[key];
        const r = signed(key);
        const st = state(key);
        return <div key={key} className={'md-row'+(st==='ok'?'':' pending')}>
          <span className="md-ico">{ICON}</span>
          <div style={{minWidth:180,flex:1}}>
            <div className="md-title">{doc.title}</div>
            <div className="md-sub">
              {st==='ok'   && <>SIGNED {fmtWhen(r.accepted_at)} · v{r.version}</>}
              {st==='old'  && <>SIGNED v{r.version} · UPDATED TO v{doc.version}</>}
              {st==='none' && <>NOT YET SIGNED · v{doc.version}</>}
            </div>
          </div>
          <div className="md-act">
            <span className={'md-pill '+(st==='ok'?'ok':st==='old'?'old':'no')}>
              {st==='ok' ? 'Signed' : st==='old' ? 'Update needed' : 'Not signed'}
            </span>
            {r && <button className="md-btn" onClick={()=>window.cgSignedCopyPrint(r)}>
              {DOWN} Signed copy
            </button>}
            {st!=='ok' && <button className="md-btn" style={{borderColor:'var(--border-gold)',color:'var(--gold-2)'}}
              onClick={()=>setSigning(key)}>Sign now</button>}
          </div>
        </div>;
      })}
    </div>

    <p style={{fontSize:'.73rem',color:'var(--ink-faint)',marginTop:14,maxWidth:620}}>
      “Signed copy” opens a print view — choose <em>Save as PDF</em> in the print dialog to keep it.
      A copy of every signature is also filed with {A.company.email}.
    </p>

    {signing && window.AgreementGate && <window.AgreementGate
      client={client} session={session} member={member} formKey={signing} embedded={false}
      onCancel={()=>setSigning(null)}
      onDone={(k,v)=>{ setSigning(null); load(); if(onSigned) onSigned(k,v); }}/>}
  </div>;
}

window.MyDocuments = MyDocuments;
})();