/* global React, PORTAL */
const { useState, useEffect } = React;

function Company() {
  const [co, setCo]     = useState(null);
  const [form, setForm] = useState(null);
  const [busy, setBusy] = useState(false);
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    PORTAL.get('/company').then(d=>{ setCo(d); setForm(d); }).catch(()=>{});
  }, []);

  const f = k => e => setForm(p=>({...p,[k]:e.target.value}));

  async function save(e) {
    e.preventDefault(); setBusy(true); setSaved(false);
    await PORTAL.put('/company', form).catch(()=>{});
    setSaved(true); setBusy(false);
  }

  if (!form) return <div style={{color:'var(--fg-subtle)',padding:24}}>Loading…</div>;

  return (
    <div>
      <h1 className="page-title">Company settings</h1>
      <div className="page-subtitle">Billing address and invoice preferences</div>

      <div className="card" style={{maxWidth:560}}>
        <div className="card-head"><span className="card-title">{co.name}</span></div>
        <form onSubmit={save}>
          <div className="card-body">
            {saved && <div className="alert" style={{background:'rgba(82,183,136,0.1)',border:'1px solid var(--ok)',color:'var(--ok)',marginBottom:12}}>Saved successfully</div>}
            <div className="form-grid">
              <div className="field field--full">
                <label className="field-label">Street</label>
                <input className="field-input" value={form.address_street||''} onChange={f('address_street')} />
              </div>
              <div className="field">
                <label className="field-label">City</label>
                <input className="field-input" value={form.address_city||''} onChange={f('address_city')} />
              </div>
              <div className="field">
                <label className="field-label">Postcode</label>
                <input className="field-input" value={form.address_postcode||''} onChange={f('address_postcode')} />
              </div>
              <div className="field">
                <label className="field-label">Country</label>
                <input className="field-input" value={form.address_country||'NL'} onChange={f('address_country')} />
              </div>
              <div className="field field--full">
                <label className="field-label">Invoice delivery preference</label>
                <select className="field-select" value={form.invoice_delivery||'link'} onChange={f('invoice_delivery')}>
                  <option value="link">Portal link (receive email with link to portal)</option>
                  <option value="pdf">PDF attachment (invoice attached to email)</option>
                  <option value="both">Both (link + PDF attachment)</option>
                </select>
              </div>
            </div>
          </div>
          <div style={{padding:'12px 20px',borderTop:'1px solid var(--border)',display:'flex',justifyContent:'flex-end'}}>
            <button type="submit" className="btn btn--primary" disabled={busy}>{busy?'Saving…':'Save changes'}</button>
          </div>
        </form>
      </div>
    </div>
  );
}
window.Company = Company;