/* ============================================================
   Access control — CLIENT-SIDE PROTOTYPE ONLY.
   Users/passwords live in this browser's localStorage and are
   NOT encrypted or server-verified. Anyone with the file can
   bypass this. For real security, move auth to a backend.
   ============================================================ */
const USERS_KEY = 'casabilia-users-v1';
const SESSION_KEY = 'casabilia-session-v1';
const ACTIVITY_KEY = 'casabilia-activity-v1';
const SESSION_TIMEOUT_MIN = 20;

const ROLES = {
  admin: { label: 'Admin', desc: 'Full access + manage users', color: '#a9842f' },
  agent: { label: 'Agent', desc: 'Full deal analysis, no admin', color: '#2f7d6b' },
  investor: { label: 'Partner / Investor', desc: 'Read-only, shared deals', color: '#3f6f8c' },
  va: { label: 'VA / Assistant', desc: 'Data entry, no financials', color: '#9a5a86' },
};
const TAB_ACCESS = { va: ['summary', 'comps', 'neighborhood'] }; // others: all

function loadUsers() {
  try { const u = JSON.parse(localStorage.getItem(USERS_KEY)); if (u && u.length) return u; } catch (e) {}
  const seed = [{ id: 1, name: 'Administrator', username: 'admin', pass: 'admin', role: 'admin', dealIds: 'all', active: true }];
  try { localStorage.setItem(USERS_KEY, JSON.stringify(seed)); } catch (e) {}
  return seed;
}
function saveUsers(u) { try { localStorage.setItem(USERS_KEY, JSON.stringify(u)); } catch (e) {} }
function loadSession() { try { return JSON.parse(localStorage.getItem(SESSION_KEY)); } catch (e) { return null; } }
function setSession(s) { try { localStorage.setItem(SESSION_KEY, JSON.stringify(s)); } catch (e) {} }
function clearSession() { try { localStorage.removeItem(SESSION_KEY); } catch (e) {} }
function loadActivity() { try { return JSON.parse(localStorage.getItem(ACTIVITY_KEY)) || []; } catch (e) { return []; } }
function logActivity(user, action) {
  const log = loadActivity();
  log.unshift({ ts: Date.now(), user: user || '—', action });
  try { localStorage.setItem(ACTIVITY_KEY, JSON.stringify(log.slice(0, 200))); } catch (e) {}
}
function relTime(ts) {
  const d = (Date.now() - ts) / 1000;
  if (d < 60) return 'just now';
  if (d < 3600) return Math.floor(d / 60) + 'm ago';
  if (d < 86400) return Math.floor(d / 3600) + 'h ago';
  return new Date(ts).toLocaleDateString();
}

/* ---- Login gate ---- */
function AuthGate({ onLogin }) {
  const [u, setU] = React.useState('');
  const [p, setP] = React.useState('');
  const [err, setErr] = React.useState('');
  const [remember, setRemember] = React.useState(true);
  const submit = () => {
    const users = loadUsers();
    const found = users.find((x) => x.username.toLowerCase() === u.trim().toLowerCase() && x.pass === p);
    if (!found) { setErr('Invalid username or password.'); return; }
    if (!found.active) { setErr('This account is disabled.'); return; }
    setSession({ userId: found.id, loginAt: Date.now(), lastActivity: Date.now(), remember, expiresAt: remember ? Date.now() + 90 * 86400000 : 0 });
    logActivity(found.username, 'Logged in' + (remember ? ' (90-day)' : ''));
    onLogin(found);
  };
  return (
    <div className="auth-screen">
      <div className="auth-card">
        <div className="auth-brand">
          <div className="brand-mark" style={{ width: 52, height: 52 }}>
            <svg viewBox="0 0 64 64" fill="none"><path d="M15 55 V25 L35 11 L35 22 L49 22 V55 Z" stroke="#15140f" strokeWidth="4.5" strokeLinejoin="round" strokeLinecap="round" /><path d="M42 31 H27 V47 H39" stroke="#b3902f" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </div>
          <div><div className="auth-title">Casabilia Investment</div><div className="auth-sub">Sign in to continue</div></div>
        </div>
        <label className="auth-label">Username</label>
        <input className="auth-input" value={u} autoFocus onChange={(e) => setU(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && submit()} placeholder="admin" />
        <label className="auth-label">Password</label>
        <input className="auth-input" type="password" value={p} onChange={(e) => setP(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && submit()} placeholder="••••••" />
        {err ? <div className="auth-err">{err}</div> : null}
        <label className="auth-remember"><input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} /> Keep me signed in for 90 days</label>
        <button className="btn primary auth-btn" onClick={submit}>Sign in</button>
        <div className="auth-note">Demo login <b>admin / admin</b>. Prototype only — accounts are stored unencrypted in this browser and are <b>not secure</b>. Use a backend for production.</div>
      </div>
    </div>
  );
}

/* ---- Admin dashboard ---- */
function AdminView({ currentUser, savedDeals, onClose }) {
  const [users, setUsers] = React.useState(loadUsers);
  const [tab, setTab] = React.useState('users');
  const [draft, setDraft] = React.useState({ name: '', username: '', pass: '', role: 'agent' });
  const activity = loadActivity();
  const persist = (u) => { setUsers(u); saveUsers(u); };

  const addUser = () => {
    if (!draft.username.trim() || !draft.pass.trim()) return;
    const u = [...users, { id: Date.now(), name: draft.name || draft.username, username: draft.username.trim(), pass: draft.pass, role: draft.role, dealIds: draft.role === 'admin' || draft.role === 'agent' ? 'all' : [], active: true }];
    persist(u); logActivity(currentUser.username, 'Created user "' + draft.username + '" (' + draft.role + ')');
    setDraft({ name: '', username: '', pass: '', role: 'agent' });
  };
  const update = (id, patch) => persist(users.map((x) => x.id === id ? { ...x, ...patch } : x));
  const remove = (id) => { if (id === currentUser.id) return; if (confirm('Delete this user?')) { persist(users.filter((x) => x.id !== id)); logActivity(currentUser.username, 'Deleted a user'); } };
  const toggleDeal = (user, dealId) => {
    if (user.dealIds === 'all') return;
    const has = (user.dealIds || []).includes(dealId);
    update(user.id, { dealIds: has ? user.dealIds.filter((d) => d !== dealId) : [...(user.dealIds || []), dealId] });
  };

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal admin-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h2>Admin Dashboard</h2>
          <button className="btn" onClick={onClose}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12" /></svg></button>
        </div>
        <div className="admin-tabs">
          <button className={tab === 'users' ? 'on' : ''} onClick={() => setTab('users')}>Users &amp; Roles</button>
          <button className={tab === 'deals' ? 'on' : ''} onClick={() => setTab('deals')}>All Saved Deals</button>
          <button className={tab === 'activity' ? 'on' : ''} onClick={() => setTab('activity')}>Activity Log</button>
        </div>
        <div className="modal-body" style={{ display: 'block' }}>
          {tab === 'users' ? (
            <React.Fragment>
              <div className="admin-add">
                <input className="set-input" placeholder="Full name" value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
                <input className="set-input" placeholder="Username" value={draft.username} onChange={(e) => setDraft({ ...draft, username: e.target.value })} />
                <input className="set-input" type="password" placeholder="Password" value={draft.pass} onChange={(e) => setDraft({ ...draft, pass: e.target.value })} />
                <select className="set-input" value={draft.role} onChange={(e) => setDraft({ ...draft, role: e.target.value })}>{Object.entries(ROLES).map(([k, r]) => <option key={k} value={k}>{r.label}</option>)}</select>
                <button className="btn primary" onClick={addUser}>Add user</button>
              </div>
              <div className="admin-users">
                {users.map((usr) => (
                  <div className="admin-user" key={usr.id}>
                    <div className="au-top">
                      <div>
                        <div className="au-name">{usr.name} <span className="au-handle">@{usr.username}</span></div>
                        <div className="au-meta">
                          <select className="role-select" value={usr.role} onChange={(e) => update(usr.id, { role: e.target.value, dealIds: (e.target.value === 'admin' || e.target.value === 'agent') ? 'all' : (Array.isArray(usr.dealIds) ? usr.dealIds : []) })} disabled={usr.id === currentUser.id}>
                            {Object.entries(ROLES).map(([k, r]) => <option key={k} value={k}>{r.label}</option>)}
                          </select>
                          <span className="role-desc">{ROLES[usr.role].desc}</span>
                        </div>
                      </div>
                      <div className="au-actions">
                        <button className={'au-toggle' + (usr.active ? ' on' : '')} onClick={() => update(usr.id, { active: !usr.active })}>{usr.active ? 'Active' : 'Disabled'}</button>
                        {usr.id !== currentUser.id ? <button className="row-del" onClick={() => remove(usr.id)}>✕</button> : <span className="au-you">you</span>}
                      </div>
                    </div>
                    {(usr.role === 'investor' || usr.role === 'va') && savedDeals.length ? (
                      <div className="au-deals">
                        <span className="au-deals-l">Shared deals:</span>
                        {savedDeals.map((d) => (
                          <button key={d.id} className={'deal-chip' + ((usr.dealIds || []).includes(d.id) ? ' on' : '')} onClick={() => toggleDeal(usr, d.id)}>{d.name}</button>
                        ))}
                        {!savedDeals.length ? <span className="role-desc">No saved deals yet</span> : null}
                      </div>
                    ) : usr.dealIds === 'all' ? <div className="au-deals"><span className="role-desc">Access to all deals</span></div> : null}
                  </div>
                ))}
              </div>
            </React.Fragment>
          ) : tab === 'deals' ? (
            <div className="all-deals">
              {savedDeals.length ? savedDeals.map((s) => {
                const c = computeDeal(s.deal);
                return (
                  <div className="act-row deal-row" key={s.id}>
                    <span className="act-user">{s.owner || '—'}</span>
                    <span className="act-action"><b>{s.name}</b> · {s.deal.property.city}, {s.deal.property.state} · ARV {fmtMoney(s.deal.terms.sellingPrice)}</span>
                    <span className={'deal-profit ' + (c.netProfit >= 0 ? 'pos' : 'neg')}>{fmtMoney(c.netProfit)}</span>
                    <span className="act-time">{relTime(s.savedAt)}</span>
                  </div>
                );
              }) : <div className="role-desc" style={{ padding: 20 }}>No saved deals across any account yet.</div>}
            </div>
          ) : (
            <div className="activity-log">
              {activity.length ? activity.map((a, i) => (
                <div className="act-row" key={i}><span className="act-user">{a.user}</span><span className="act-action">{a.action}</span><span className="act-time">{relTime(a.ts)}</span></div>
              )) : <div className="role-desc" style={{ padding: 20 }}>No activity recorded yet.</div>}
            </div>
          )}
        </div>
        <div className="modal-foot"><div style={{ fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.4 }}>Prototype access control — stored in this browser, not encrypted. Not a substitute for server-side authentication.</div></div>
      </div>
    </div>
  );
}

Object.assign(window, { ROLES, TAB_ACCESS, SESSION_TIMEOUT_MIN, loadUsers, saveUsers, loadSession, setSession, clearSession, loadActivity, logActivity, relTime, AuthGate, AdminView });