/* TMD Portal — Supabase session, sign-in, and the Inquiries page.
   Inquiries come from the public site (themarketingdesk.net) into public.tmd_inquiries.
   Only emails listed in public.tmd_staff can read or update them (enforced by row security). */
const { useState: uSi, useEffect: uEi, useMemo: uMi, useCallback: uCi } = React;

const SB = window.supabase.createClient(window.TMD_CONFIG.supabaseUrl, window.TMD_CONFIG.supabaseKey, {
  auth: { persistSession: true, autoRefreshToken: true, detectSessionInUrl: true }
});

const INQ_STATUS = [
  { v: 'new', l: 'New', sem: 'todo' },
  { v: 'scoped', l: 'Scoped', sem: 'doing' },
  { v: 'queued', l: 'Queued', sem: 'waiting' },
  { v: 'delivered', l: 'Delivered', sem: 'done' },
  { v: 'declined', l: 'Declined', sem: 'blocked' }
];
const inqStatus = v => INQ_STATUS.find(s => s.v === v) || INQ_STATUS[0];
const OPEN = ['new', 'scoped', 'queued'];

/* ---------- session: Supabase auth + staff row ---------- */
function useSession() {
  const [state, setState] = uSi({ loading: true, session: null, staff: null, staffList: [] });
  // Arriving from an invite or password-reset email: the URL hash says so, and Supabase fires PASSWORD_RECOVERY.
  const [needsPassword, setNeedsPassword] = uSi(() => /type=(invite|recovery|magiclink)/.test(location.hash));

  const loadStaff = uCi(async session => {
    if (!session) { setState({ loading: false, session: null, staff: null, staffList: [] }); return; }
    const email = (session.user.email || '').toLowerCase();
    const { data, error } = await SB.from('tmd_staff').select('email,name,role,person_id,active').order('name');
    const list = error ? [] : (data || []);
    const me = list.find(s => (s.email || '').toLowerCase() === email && s.active) || null;
    setState({ loading: false, session, staff: me, staffList: list });
  }, []);

  uEi(() => {
    let alive = true;
    SB.auth.getSession().then(({ data }) => { if (alive) loadStaff(data.session); });
    // Defer: querying inside the auth callback can deadlock supabase-js.
    const { data: sub } = SB.auth.onAuthStateChange((evt, session) => {
      if (evt === 'PASSWORD_RECOVERY') setNeedsPassword(true);
      if (evt === 'SIGNED_OUT') setNeedsPassword(false);
      setTimeout(() => { if (alive) loadStaff(session); }, 0);
    });
    return () => { alive = false; sub.subscription.unsubscribe(); };
  }, [loadStaff]);

  return Object.assign({}, state, {
    needsPassword: needsPassword && !!state.session,
    passwordSet: () => { setNeedsPassword(false); history.replaceState(null, '', location.pathname); loadStaff(state.session); },
    reload: () => loadStaff(state.session),
    signOut: () => SB.auth.signOut()
  });
}

/* ---------- sign in / create account ---------- */
function SignIn() {
  const [mode, setMode] = uSi('in');
  const [email, setEmail] = uSi('');
  const [pw, setPw] = uSi('');
  const [busy, setBusy] = uSi(false);
  const [err, setErr] = uSi('');
  const [note, setNote] = uSi('');

  const submit = async e => {
    if (e && e.preventDefault) e.preventDefault();
    if (busy) return;
    setErr(''); setNote('');
    if (!email.trim() || !pw) { setErr('Email and password are both needed.'); return; }
    setBusy(true);
    try {
      if (mode === 'in') {
        const { error } = await SB.auth.signInWithPassword({ email: email.trim(), password: pw });
        if (error) throw error;
      } else if (mode === 'up') {
        if (pw.length < 8) throw new Error('Use at least 8 characters.');
        const { data, error } = await SB.auth.signUp({ email: email.trim(), password: pw, options: { emailRedirectTo: location.origin + location.pathname } });
        if (error) throw error;
        if (data.session) return; // confirmations off: signed in already
        setNote('Account created. Check your inbox for the confirmation link, then sign in.');
        setMode('in');
      } else {
        const { error } = await SB.auth.resetPasswordForEmail(email.trim(), { redirectTo: location.origin + location.pathname });
        if (error) throw error;
        setNote('If that address is on the staff list, a reset link is on its way.');
        setMode('in');
      }
    } catch (ex) {
      setErr(ex.message || 'Sign-in failed.');
    } finally {
      setBusy(false);
    }
  };

  const title = mode === 'in' ? 'Sign in' : mode === 'up' ? 'Create account' : 'Reset password';
  return (
    <div className="signin">
      <form className="si-box" onSubmit={submit}>
        <div className="si-mark"><Mark size={30} /></div>
        <label className="tf"><span>Email</span><input type="email" autoComplete="email" value={email} onChange={e => setEmail(e.target.value)} autoFocus /></label>
        {mode !== 'reset' ? <label className="tf"><span>Password</span><input type="password" autoComplete={mode === 'up' ? 'new-password' : 'current-password'} value={pw} onChange={e => setPw(e.target.value)} /></label> : null}
        {err ? <p className="si-err">{err}</p> : null}
        {note ? <p className="si-note">{note}</p> : null}
        {/* The design-system button renders type="button", so submit explicitly. Enter in a field still submits the form. */}
        <Btn kind="primary" full disabled={busy} onClick={submit}>{busy ? 'Working' : title}</Btn>
        <button type="submit" hidden aria-hidden="true" tabIndex={-1}></button>
        <div className="si-links">
          {mode !== 'in' ? <button type="button" className="link" onClick={() => { setMode('in'); setErr(''); }}>Back to sign in</button> : null}
          {mode === 'in' ? <button type="button" className="link" onClick={() => { setMode('up'); setErr(''); }}>Create account</button> : null}
          {mode === 'in' ? <button type="button" className="link" onClick={() => { setMode('reset'); setErr(''); }}>Forgot password</button> : null}
        </div>
        <p className="fine">Only addresses on the Desk’s staff list can see anything once signed in. Ask Abidh to be added.</p>
      </form>
    </div>
  );
}

function NotStaff({ email, onOut }) {
  return (
    <div className="signin">
      <div className="si-box">
        <div className="si-mark"><Mark size={30} /></div>
        <Eyebrow>No access</Eyebrow>
        <h2 className="si-h">This account is not on the staff list.</h2>
        <p className="si-p">You are signed in as <b>{email}</b>. The Desk only opens for addresses Abidh has added. Nothing here is hidden by accident.</p>
        <Btn kind="secondary" onClick={onOut}>Sign out</Btn>
      </div>
    </div>
  );
}

/* ---------- helpers ---------- */
function fmtStamp(iso) {
  if (!iso) return '—';
  const d = new Date(iso);
  const hh = String(d.getHours()).padStart(2, '0'), mm = String(d.getMinutes()).padStart(2, '0');
  return d.getDate() + ' ' + MONTHS[d.getMonth()] + ' · ' + hh + ':' + mm;
}
function ago(iso) {
  const ms = Date.now() - new Date(iso).getTime();
  const h = Math.floor(ms / 3600000);
  if (h < 1) return 'just now';
  if (h < 24) return h + 'h ago';
  const d = Math.floor(h / 24);
  return d + 'd ago';
}
const waLink = phone => 'https://wa.me/' + String(phone || '').replace(/[^\d]/g, '');

function InqStatus({ v, size }) {
  const s = inqStatus(v);
  return <Status stage={s.l} sem={s.sem} size={size} />;
}

/* ---------- the page ---------- */
function Inquiries({ app, session }) {
  const [rows, setRows] = uSi(null);
  const [err, setErr] = uSi('');
  const [status, setStatus] = uSi('open');
  const [kind, setKind] = uSi('all');
  const [openId, setOpenId] = uSi(null);

  const load = uCi(async () => {
    const { data, error } = await SB.from('tmd_inquiries').select('*').order('created_at', { ascending: false }).limit(500);
    if (error) { setErr(error.message); return; }
    setErr(''); setRows(data || []);
  }, []);

  uEi(() => { load(); const t = setInterval(load, 60000); return () => clearInterval(t); }, [load]);

  const list = uMi(() => (rows || []).filter(r =>
    (status === 'all' ? true : status === 'open' ? OPEN.includes(r.status) : r.status === status) &&
    (kind === 'all' ? true : r.kind === kind)
  ), [rows, status, kind]);

  const counts = uMi(() => {
    const c = { new: 0, scoped: 0, queued: 0, delivered: 0, declined: 0 };
    (rows || []).forEach(r => { c[r.status] = (c[r.status] || 0) + 1; });
    return c;
  }, [rows]);

  const current = openId ? (rows || []).find(r => r.id === openId) : null;

  const save = async (id, patch) => {
    const { data, error } = await SB.from('tmd_inquiries').update(patch).eq('id', id).select().single();
    if (error) { app.toast('Not saved: ' + error.message); return false; }
    setRows(rs => rs.map(r => r.id === id ? data : r));
    return true;
  };

  return (
    <div className="page">
      <PageHead
        title="Inquiries"
        count={rows ? rows.length : null}
        sub="Client and website requests from themarketingdesk.net. New requests are answered within one working day."
        actions={<Btn kind="secondary" sm onClick={load}>Refresh</Btn>}
      />

      <div className="stats inq-stats">
        <Stat label="New" value={counts.new} tone={counts.new ? 'alert' : null} onClick={() => setStatus('new')} />
        <Stat label="Scoped" value={counts.scoped} onClick={() => setStatus('scoped')} />
        <Stat label="Queued" value={counts.queued} onClick={() => setStatus('queued')} />
        <Stat label="Delivered" value={counts.delivered} onClick={() => setStatus('delivered')} />
      </div>

      <div className="filters">
        <Filter label="Status" value={status} onChange={setStatus} options={[{ v: 'open', l: 'Open' }, { v: 'all', l: 'All' }].concat(INQ_STATUS.map(s => ({ v: s.v, l: s.l })))} />
        <Filter label="Type" value={kind} onChange={setKind} options={[{ v: 'all', l: 'All' }, { v: 'client', l: 'Client' }, { v: 'website', l: 'Website' }]} />
      </div>

      {err ? <div className="empty"><b>Could not load inquiries.</b><p>{err}</p></div> : null}
      {rows && !err && list.length === 0 ? <Empty title="Nothing here." hint={status === 'open' ? 'No open inquiries. New ones appear within a minute of being submitted on the site.' : 'No inquiries match these filters.'} /> : null}
      {!rows && !err ? <p className="muted">Loading</p> : null}

      {list.length ? (
        <table className="tbl inq-tbl">
          <thead><tr><th>Received</th><th>From</th><th>Type</th><th>Needs</th><th>Budget</th><th>Status</th><th>Owner</th></tr></thead>
          <tbody>
            {list.map(r => (
              <tr key={r.id} onClick={() => setOpenId(r.id)}>
                <td className="num" title={r.created_at}>{fmtStamp(r.created_at)}<em className="dc-rel">{ago(r.created_at)}</em></td>
                <td><b className="strong">{r.name}</b>{r.company ? <span className="muted"> · {r.company}</span> : null}</td>
                <td><Tag>{r.kind === 'website' ? 'Website' : 'Client'}</Tag></td>
                <td className="inq-needs">{r.kind === 'website' ? (r.site_type || '—') : (r.services || '—')}</td>
                <td className="num">{r.budget || '—'}</td>
                <td><InqStatus v={r.status} size="sm" /></td>
                <td>{r.owner || <span className="muted">—</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}

      <InquirySheet inq={current} staff={app.staffList} onClose={() => setOpenId(null)} onSave={save} />
    </div>
  );
}

function InquirySheet({ inq, staff, onClose, onSave }) {
  const [notes, setNotes] = uSi('');
  const [dirty, setDirty] = uSi(false);
  uEi(() => { setNotes(inq ? (inq.notes || '') : ''); setDirty(false); }, [inq && inq.id]);
  if (!inq) return null;

  const rowsForKind = inq.kind === 'website'
    ? [['Site type', inq.site_type], ['Existing website', inq.existing_url], ['Pages', inq.pages]]
    : [['Services', inq.services]];
  const facts = [['Company or brand', inq.company]].concat(rowsForKind, [['Budget', inq.budget], ['Timeline', inq.timeline], ['Submitted from', inq.page]]);

  const owners = (staff || []).filter(s => s.active).map(s => s.name);
  const saveNotes = async () => { if (await onSave(inq.id, { notes })) setDirty(false); };

  return (
    <Sheet open title={inq.kind === 'website' ? 'Website inquiry' : 'Client inquiry'} onClose={onClose}
      footer={<><Btn kind="secondary" onClick={onClose}>Close</Btn><Btn kind="ink" disabled={!dirty} onClick={saveNotes}>Save notes</Btn></>}>
      <div className="inq-head">
        <h3 className="inq-name">{inq.name}</h3>
        <p className="inq-meta num">Received {fmtStamp(inq.created_at)} · {ago(inq.created_at)}</p>
        <div className="row gap8 wrap inq-contact">
          <a href={'mailto:' + inq.email}>{inq.email}</a>
          {inq.phone ? <a href={waLink(inq.phone)} target="_blank" rel="noopener">WhatsApp {inq.phone}</a> : null}
        </div>
      </div>

      <div className="inq-ctl">
        <label className="tf"><span>Status</span>
          <select value={inq.status} onChange={e => onSave(inq.id, { status: e.target.value })}>
            {INQ_STATUS.map(s => <option key={s.v} value={s.v}>{s.l}</option>)}
          </select>
        </label>
        <label className="tf"><span>Owner</span>
          <select value={inq.owner || ''} onChange={e => onSave(inq.id, { owner: e.target.value || null })}>
            <option value="">Unassigned</option>
            {owners.map(n => <option key={n} value={n}>{n}</option>)}
          </select>
        </label>
      </div>

      <div className="eyebrow">Brief</div>
      <p className="inq-brief">{inq.brief}</p>

      <div className="eyebrow">Details</div>
      <dl className="inq-facts">
        {facts.filter(([, v]) => v).map(([k, v]) => <div key={k}><dt>{k}</dt><dd className={/budget|pages|website/i.test(k) ? 'num' : ''}>{/^https?:/.test(v) ? <a href={v} target="_blank" rel="noopener">{v}</a> : v}</dd></div>)}
      </dl>

      <div className="eyebrow">Desk notes</div>
      <label className="tf"><span>Internal only. Scope, decisions, next step.</span>
        <textarea rows="4" value={notes} onChange={e => { setNotes(e.target.value); setDirty(true); }} placeholder="One line is enough." />
      </label>
      <p className="fine">Last change {fmtStamp(inq.updated_at)}.</p>
    </Sheet>
  );
}

Object.assign(window, { SB, useSession, SignIn, NotStaff, Inquiries, INQ_STATUS, OPEN });