function SignInForm({notice}){
  const {Input,Button}=HM;
  const [email,setEmail]=React.useState('');
  const [state,setState]=React.useState({});
  const submit=async e=>{
    e.preventDefault();
    setState({busy:true});
    try{
      const r=await fetch('/api/account/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email})});
      const d=await r.json().catch(()=>({}));
      if(!r.ok)throw new Error(d.error||'We couldn’t send your link. Please try again.');
      setState({sent:true});
    }catch(err){setState({error:err.message})}
  };
  if(state.sent)return <div style={{display:'flex',flexDirection:'column',gap:16,alignItems:'flex-start'}}>
    <h2 style={{fontSize:40}}>Check your email.</h2>
    <p style={{color:'var(--text-2)',fontSize:18}}>{'If '+email+' has given to High Mountain, a sign-in link is on its way. It works once and expires in 15 minutes.'}</p>
    <p style={{color:'var(--text-2)',fontSize:15}}>Nothing there? Check your spam folder, and try the email address on your gift receipts.</p>
    <Button variant="secondary" onClick={()=>setState({})}>Try another email</Button>
  </div>;
  return <form onSubmit={submit} style={{display:'flex',flexDirection:'column',gap:20,alignItems:'flex-start'}}>
    <h2 style={{fontSize:40}}>Sign in with your email.</h2>
    <p style={{color:'var(--text-2)',fontSize:18}}>There’s no password to remember. Enter the email you give with and we’ll send you a sign-in link.</p>
    {(notice||state.error)&&<p role="alert" style={{margin:0,padding:'12px 16px',borderRadius:'var(--radius-card)',background:'var(--warning-bg)',color:'var(--text-1)',fontSize:15,width:'100%'}}>{state.error||notice}</p>}
    <div style={{width:'100%'}}><Input label="Email" type="email" value={email} onChange={e=>setEmail(e.target.value)} required/></div>
    <Button type="submit" size="lg" iconRight="arrow-right" disabled={state.busy}>{state.busy?'Sending…':'Email me a sign-in link'}</Button>
  </form>;
}
function AccountPage({go}){
  const {Button,Badge}=HM;
  const token=React.useMemo(()=>new URLSearchParams(location.search).get('login'),[]);
  const [view,setView]=React.useState({loading:true});
  const [portalErr,setPortalErr]=React.useState('');
  const load=async notice=>{
    const r=await fetch('/api/account');
    if(r.status===401||r.status===503){const d=await r.json().catch(()=>({}));setView({out:true,notice:notice||d.error});return}
    if(!r.ok){setView({error:true});return}
    setView({donor:await r.json()});
  };
  React.useEffect(()=>{
    (async()=>{
      let notice='';
      if(token){
        history.replaceState(null,'',location.pathname+'#/account');
        const r=await fetch('/api/account/verify',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({token})});
        if(!r.ok)notice=(await r.json().catch(()=>({}))).error||'That sign-in link didn’t work. Please request a new one.';
      }
      await load(notice);
    })().catch(()=>setView({error:true}));
  },[]);
  const signOut=async()=>{await fetch('/api/account/logout',{method:'POST'});setView({out:true})};
  const manage=async customer=>{
    setPortalErr('');
    const r=await fetch('/api/account/portal',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({customer})});
    const d=await r.json().catch(()=>({}));
    if(r.ok&&d.url)location.href=d.url;else setPortalErr(d.error||'We couldn’t open that page. Please try again or contact us.');
  };
  const money=n=>'$'+n.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2});
  const h3={fontSize:30,margin:0};
  const body=()=>{
    if(view.loading)return <p style={{color:'var(--text-2)',fontSize:18}}>Loading…</p>;
    if(view.error)return <p role="alert" style={{color:'var(--text-2)',fontSize:18}}>We couldn’t load your gifts. Please refresh the page, or contact us if this keeps happening.</p>;
    if(view.out)return <SignInForm notice={view.notice}/>;
    const d=view.donor;
    const settled=d.gifts.filter(g=>!g.processing);
    const years=[...new Set(settled.map(g=>g.year))];
    const yearTotal=y=>settled.filter(g=>g.year===y).reduce((n,g)=>n+g.amount,0);
    return <div style={{display:'flex',flexDirection:'column',gap:56}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:16,flexWrap:'wrap'}}>
        <div><h2 style={{fontSize:40}}>{d.name?'Welcome, '+d.name.split(' ')[0]+'.':'Welcome.'}</h2><p style={{color:'var(--text-2)',margin:'8px 0 0'}}>{'Signed in as '+d.email}</p></div>
        <Button variant="ghost" onClick={signOut}>Sign out</Button>
      </div>
      {years.length>0&&<div style={{display:'flex',flexDirection:'column',gap:16}}>
        <h3 style={h3}>Giving statements</h3>
        <div className="sm-acct-list">{years.map(y=><div key={y} className="sm-acct-row"><span><b>{y}</b><br/><span className="sm-acct-sub">{money(yearTotal(y))+' given'}</span></span><Button variant="secondary" iconLeft="download" onClick={()=>{location.href='/api/account/statement/'+y}}>Download PDF</Button></div>)}</div>
      </div>}
      {d.recurring.length>0&&<div style={{display:'flex',flexDirection:'column',gap:16}}>
        <h3 style={h3}>Recurring gifts</h3>
        {portalErr&&<p role="alert" style={{margin:0,color:'var(--danger)',fontSize:15}}>{portalErr}</p>}
        <div className="sm-acct-list">{d.recurring.map((s,i)=><div key={i} className="sm-acct-row"><span><b>{money(s.amount)+' / '+s.interval}</b><br/><span className="sm-acct-sub">{s.pastDue?'Last payment failed. Please update your payment method.':s.next?'Next gift '+s.next:''}</span></span><Button variant="secondary" onClick={()=>manage(s.customer)}>Change or cancel</Button></div>)}</div>
      </div>}
      <div style={{display:'flex',flexDirection:'column',gap:16}}>
        <h3 style={h3}>Gift history</h3>
        {d.gifts.length===0?<p style={{color:'var(--text-2)'}}>No gifts yet.</p>:<div className="sm-acct-list">{d.gifts.map(g=><div key={g.id} className="sm-acct-row"><span><b>{money(g.amount)}</b><br/><span className="sm-acct-sub">{g.date+' · '+g.type+' · '+g.ref}</span></span><span style={{display:'flex',gap:12,alignItems:'center',flexWrap:'wrap'}}>{g.processing&&<Badge>Processing</Badge>}{g.refunded&&<Badge>Part refunded</Badge>}{g.receiptUrl&&<a href={g.receiptUrl} target="_blank" rel="noopener noreferrer">Receipt</a>}</span></div>)}</div>}
      </div>
      <p style={{fontSize:14,color:'var(--text-3)',margin:0}}>Statements cover gifts made online. For gifts made by check or another way, please contact us.</p>
    </div>;
  };
  return <div>
    <PageIntro eyebrow="My giving" title={<>Your gifts <b>and statements.</b></>} lead="See every gift you’ve made online, download yearly giving statements and manage recurring gifts."/>
    <section className="sm-acct"><div style={{maxWidth:820,margin:'0 auto'}}>{body()}</div></section>
  </div>;
}
window.AccountPage=AccountPage;