// Settings — redesigned as a two-pane layout: a left section nav keeps each group
// on its own focused panel instead of one overwhelming scroll. Matches the kit's
// card / drawer / badge vocabulary.

// ---- Toggle switch ----
function Switch({ on, onChange }) {
  return (
    <button className={`zswitch ${on ? 'on' : ''}`} role="switch" aria-checked={on} onClick={() => onChange(!on)}>
      <span className="knob" />
    </button>
  );
}

// ---- A labelled settings row with a control on the right ----
function SetRow({ title, desc, children, first }) {
  return (
    <div className={`set-row ${first ? 'first' : ''}`}>
      <div className="meta"><div className="rt">{title}</div>{desc && <div className="rd">{desc}</div>}</div>
      <div className="set-ctrl">{children}</div>
    </div>
  );
}

// ---- Panel header (icon + title + sub) ----
function PanelHead({ icon, tint, title, sub }) {
  return (
    <div className="set-panel-h">
      <IconChip icon={icon} tint={tint} size={40} radius={12} />
      <div><div className="t">{title}</div><div className="s">{sub}</div></div>
    </div>
  );
}

function SavedBtn({ label = 'Save changes', onSave }) {
  const [saved, setSaved] = useState(false);
  return (
    <button className="btn btn-primary" onClick={() => { onSave && onSave(); setSaved(true); setTimeout(() => setSaved(false), 1800); }}>
      <Icon name={saved ? 'check' : 'save'} size={16} />{saved ? 'Saved' : label}
    </button>
  );
}

const SET_SECTIONS = [
  { id:'plan',    label:'Plan & Usage',      icon:'sparkles', tint:'gold',   sub:'Subscription tier and limits' },
  { id:'profile', label:'Profile',           icon:'user',     tint:'purple', sub:'Your personal information' },
  { id:'email',   label:'Email Accounts',    icon:'mail',     tint:'blue',   sub:'Connected inboxes Zeranda syncs' },
  { id:'notif',   label:'Notifications',     icon:'bell',     tint:'gold',   sub:'Alerts and sync frequency' },
  { id:'cats',    label:'Bill Categories',   icon:'tag',      tint:'teal',   sub:'Manage custom categories' },
  { id:'privacy', label:'Privacy & Security',icon:'shield',   tint:'green',  sub:'Data retention and security' },
  { id:'data',    label:'Data & Account',    icon:'database', tint:'red',    sub:'Export or delete your data' },
];
const CAT_PALETTE = ['blue','gold','teal','green','red','pink','purple'];

// ======================= SECTION PANELS =======================
function PlanPanel({ D }) {
  const p = D.settings.plan;
  const pct = Math.round(((p.trialTotal - p.trialDaysLeft) / p.trialTotal) * 100);
  return (
    <div className="card card-pad rise">
      <PanelHead icon="sparkles" tint="gold" title="Plan & Usage" sub="Your subscription and limits" />
      <SetRow first title="Plan" desc="Your current subscription tier">
        <span className="badge b-purple">PLUS</span> {p.trial && <span className="badge b-green">TRIAL</span>}
      </SetRow>
      <SetRow title="Daily email limit" desc="Emails handled per day"><span className="badge b-gray">{p.scanLimit.toUpperCase()}</span></SetRow>
      <SetRow title="Connected email accounts" desc="Maximum allowed on your plan"><span className="badge b-gray">{D.settings.accounts.length} / {p.maxAccounts}</span></SetRow>

      <div className="trial-card">
        <div className="trial-top"><span className="tt">Free trial active</span><span className="td">{p.trialDaysLeft} days left</span></div>
        <div className="track" style={{ marginTop:10 }}><div className="fill green" style={{ width:`${pct}%` }} /></div>
        <div className="trial-note">Your <b>Plus</b> plan is active until <b>{p.trialEnds}</b>. After that you’ll move to the free tier automatically.</div>
      </div>
      <div className="set-foot"><Btn variant="primary" icon="arrow-up-circle">Upgrade plan</Btn></div>
    </div>
  );
}

function ProfilePanel({ D }) {
  const [home, setHome] = useState(D.fx.home);
  const [country, setCountry] = useState(D.settings.profile.country);
  const [copied, setCopied] = useState(false);
  const countries = ['United States','India','United Kingdom','Canada','Germany','Australia','Singapore'];
  const copyId = () => { navigator.clipboard && navigator.clipboard.writeText(D.settings.profile.userId); setCopied(true); setTimeout(() => setCopied(false), 1500); };
  return (
    <div className="card card-pad rise">
      <PanelHead icon="user" tint="purple" title="Profile" sub="Your personal information" />
      <div className="set-grid">
        <div><label className="fl">Email</label><div className="set-static">{D.user.email}</div></div>
        <div><label className="fl">User ID</label>
          <div className="set-static mono">{D.settings.profile.userId}<button className="iconbtn" onClick={copyId} title="Copy">{<Icon name={copied ? 'check' : 'copy'} size={15} />}</button></div>
        </div>
        <div><label className="fl">Country</label>
          <Dropdown value={country} options={countries.map(c => ({ value:c, label:c }))} onChange={setCountry} minWidth={'100%'} icon="map-pin" />
        </div>
        <div><label className="fl">Preferred currency</label>
          <Dropdown value={home} options={D.fx.currencies.map(c => ({ value:c.code, label:`${c.code} — ${c.name}` }))}
            onChange={c => { setHome(c); D.fx.home = c; }} minWidth={'100%'} icon="circle-dollar-sign" />
          <div className="set-hint">All bill & subscription amounts are converted to this currency for display.</div>
        </div>
      </div>
      <div className="set-foot"><SavedBtn /></div>
    </div>
  );
}

const PROVIDER = { google:{ icon:'mail', tint:'red', label:'Google' }, microsoft:{ icon:'mail', tint:'blue', label:'Microsoft' } };
function EmailPanel({ D }) {
  const perm = usePermissions();
  const [accounts, setAccounts] = useState(D.settings.accounts);
  const [open, setOpen] = useState({});          // accId -> show permission detail
  const [reconnect, setReconnect] = useState(null);
  const commit = next => { setAccounts(next); D.settings.accounts = next; };   // keep store in sync
  const add = provider => commit([...accounts, { id:'a' + Date.now(), provider,
    email: provider === 'google' ? 'new.account@gmail.com' : 'new.account@outlook.com', primary:false, status:'connected', lastSync:'just now', connectedOn:'Just now', granted:[...ALL_SCOPES] }]);
  const remove = id => commit(accounts.filter(x => x.id !== id));
  const makePrimary = id => commit(accounts.map(x => ({ ...x, primary: x.id === id })));
  const toggle = id => setOpen(o => ({ ...o, [id]: !o[id] }));

  return (
    <div className="card card-pad rise">
      <PanelHead icon="mail" tint="blue" title="Email Accounts" sub="Connected inboxes Zeranda syncs" />
      <div className="perm-assure-strip">
        <Icon name="shield-check" size={15} color="var(--green-600)" />
        <span>Zeranda only ever uses the access you approve here — and you can change it anytime.</span>
      </div>
      <div className={`acct-master ${perm.allPaused() ? 'paused' : ''}`}>
        <span className="acct-master-ic"><Icon name={perm.allPaused() ? 'pause' : 'shield-check'} size={16} color={perm.allPaused() ? 'var(--fg-3)' : 'var(--green-600)'} /></span>
        <div className="acct-master-meta">
          <div className="t">{perm.allPaused() ? 'All syncing paused' : perm.anyPaused() ? 'Some inboxes paused' : 'Auto-sync on for all inboxes'}</div>
          <div className="s">{perm.allPaused() ? 'Zeranda is paused for every inbox right now — resume anytime, no reconnect needed.' : 'Pausing stops syncing without disconnecting or changing approved access.'}</div>
        </div>
        <button className="btn btn-ghost acct-master-btn" onClick={() => perm.allPaused() ? perm.resumeAll() : perm.pauseAll()}>
          <Icon name={perm.allPaused() ? 'play' : 'pause'} size={14} />{perm.allPaused() ? 'Resume all' : 'Pause all'}
        </button>
      </div>
      <div className="acct-list">
        {accounts.map(ac => {
          const full = perm.isFull(ac);
          const missing = perm.missing(ac);
          const paused = perm.isPaused(ac);
          const detail = open[ac.id];
          return (
            <div className={`acct-card ${paused ? 'paused' : full ? '' : 'limited'}`} key={ac.id}>
              <div className="acct-row">
                <IconChip icon="mail" tint={PROVIDER[ac.provider].tint} size={38} radius={11} />
                <div className="acct-meta">
                  <div className="ae">{ac.email}</div>
                  <div className="as">{PROVIDER[ac.provider].label} · synced {ac.lastSync}{ac.connectedOn ? ` · connected ${ac.connectedOn}` : ''}</div>
                </div>
                <div className="acct-ctrls">
                  {ac.primary ? <span className="badge b-gold">PRIMARY</span> : <button className="link-btn" onClick={() => makePrimary(ac.id)}>Make primary</button>}
                  {paused
                    ? <span className="badge b-gray"><Icon name="pause" size={11} /> PAUSED</span>
                    : <span className="badge b-green"><Icon name="check" size={12} /> CONNECTED</span>}
                  <button className="iconbtn" title={paused ? 'Resume syncing' : 'Pause syncing'} onClick={() => paused ? perm.resume(ac.id) : perm.pause(ac.id)}><Icon name={paused ? 'play' : 'pause'} size={16} /></button>
                  <button className="iconbtn danger" title="Disconnect" onClick={() => remove(ac.id)} disabled={ac.primary && accounts.length === 1}><Icon name="trash-2" size={16} /></button>
                </div>
              </div>

              {paused ? (
                <AccessNotice variant="inline" tone="slate" icon="pause"
                  title="Syncing is paused for this inbox"
                  ctaLabel="Resume syncing" ctaIcon="play"
                  onCta={() => perm.resume(ac.id)}
                  secondaryLabel={detail ? 'Hide access' : 'Review access'}
                  onSecondary={() => toggle(ac.id)}>
                  Zeranda is paused for {ac.email} right now. Your approved access is unchanged — resume anytime, no reconnect needed.
                </AccessNotice>
              ) : full ? (
                <button className="acct-allon" onClick={() => toggle(ac.id)}>
                  <Icon name="shield-check" size={15} color="var(--green-600)" />
                  <span>All features on</span>
                  <span className="acct-allon-link">{detail ? 'Hide access' : 'Review access'}</span>
                </button>
              ) : (
                <AccessNotice variant="inline" icon="sparkles"
                  title={`Turn on ${missing.map(m => m.label.toLowerCase()).join(' & ')}`}
                  ctaLabel="Reconnect"
                  onCta={() => setReconnect({ account: ac, highlight: missing.map(m => m.key) })}
                  secondaryLabel={detail ? 'Hide access' : 'Review access'}
                  onSecondary={() => toggle(ac.id)}>
                  {missing.length === OPTIONAL_SCOPES.length
                    ? 'These were added to Zeranda after you connected. Reconnect to switch them on — nothing else about your account changes.'
                    : `Reconnect ${ac.email} to switch ${missing.length > 1 ? 'these on' : 'this on'}. Nothing else about your account changes.`}
                </AccessNotice>
              )}

              {detail && <PermissionList account={ac} />}
            </div>
          );
        })}
      </div>
      <div className="acct-add">
        <button className="add-tile" onClick={() => add('google')}><Icon name="plus" size={17} /> Add Google account</button>
        <button className="add-tile" onClick={() => add('microsoft')}><Icon name="plus" size={17} /> Add Microsoft account</button>
      </div>

      {reconnect && <ReconnectModal account={reconnect.account} highlight={reconnect.highlight}
        onClose={() => setReconnect(null)} onDone={() => setReconnect(null)} />}
    </div>
  );
}

function NotifPanel({ D }) {
  const [p, setP] = useState(D.settings.prefs);
  const set = (k, v) => setP(s => ({ ...s, [k]: v }));
  const rows = [
    ['push', 'Push notifications', 'Get notified about bills, packages and reminders'],
    ['billReminders', 'Bill reminders', 'Get notified before bills are due'],
    ['packageUpdates', 'Package updates', 'Track your package deliveries'],
    ['emailNotifs', 'Email notifications', 'Receive email updates about important events'],
    ['people', 'People & contacts', 'Show the People module in the sidebar'],
  ];
  return (
    <div className="card card-pad rise">
      <PanelHead icon="bell" tint="gold" title="Notifications" sub="Manage your notification and sync preferences" />
      {rows.map(([k, t, d], i) => <SetRow key={k} first={i === 0} title={t} desc={d}><Switch on={p[k]} onChange={v => set(k, v)} /></SetRow>)}
      <SetRow title="Sync frequency" desc="How often Zeranda checks in for new items">
        <Dropdown value={p.scanFreq} options={['Hourly','Daily','Weekly','Manual'].map(o => ({ value:o, label:o }))} onChange={v => set('scanFreq', v)} minWidth={150} icon="clock" />
      </SetRow>
      <div className="set-foot"><SavedBtn label="Save preferences" /></div>
    </div>
  );
}

function CatsPanel({ D }) {
  const [cats, setCats] = useState(D.billCategories);
  const [label, setLabel] = useState('');
  const [tint, setTint] = useState('blue');
  const add = () => { if (!label.trim()) return; setCats(c => [...c, { id:'c' + Date.now(), label:label.trim(), tint, icon:'tag' }]); setLabel(''); };
  const remove = id => setCats(c => c.filter(x => x.id !== id));
  return (
    <div className="card card-pad rise">
      <PanelHead icon="tag" tint="teal" title="Bill Categories" sub="Manage your custom bill categories" />
      <div className="cat-grid">
        {cats.map(c => (
          <div className="cat-row" key={c.id}>
            <span className="dd-dot" style={{ background: tintFg(c.tint) }} />
            <span className="cat-name">{c.label}</span>
            <button className="iconbtn danger" title="Delete" onClick={() => remove(c.id)}><Icon name="trash-2" size={15} /></button>
          </div>
        ))}
      </div>
      <div className="cat-add">
        <label className="fl">Add category</label>
        <div className="cat-palette">
          {CAT_PALETTE.map(t => (
            <button key={t} className={`sw-dot ${tint === t ? 'on' : ''}`} style={{ background: tintFg(t) }} onClick={() => setTint(t)} title={t} />
          ))}
        </div>
        <div className="cat-add-row">
          <div className="finput" style={{ flex:1 }}><span className="dd-dot" style={{ background: tintFg(tint) }} /><input placeholder="e.g. Gym, Pet care…" value={label} onChange={e => setLabel(e.target.value)} onKeyDown={e => e.key === 'Enter' && add()} /></div>
          <Btn variant="primary" icon="plus" onClick={add}>Add</Btn>
        </div>
      </div>
    </div>
  );
}

function PrivacyPanel({ D }) {
  const [ai, setAi] = useState(D.settings.privacy.aiProcessing);
  const [ret, setRet] = useState(D.settings.privacy.retention);
  return (
    <div className="card card-pad rise">
      <PanelHead icon="shield" tint="green" title="Privacy & Security" sub="Manage your data and security settings" />
      <SetRow first title="Data retention" desc="How long we keep your processed email data">
        <Dropdown value={ret} options={['30 days','90 days','180 days','1 year'].map(o => ({ value:o, label:o }))} onChange={setRet} minWidth={140} icon="calendar" />
      </SetRow>
      <SetRow title="AI processing" desc="Use AI to analyze your emails and extract items"><Switch on={ai} onChange={setAi} /></SetRow>
      <SetRow title="Two-factor authentication" desc="Add an extra layer of security at sign-in"><Btn variant="secondary" icon="shield-check">Set up</Btn></SetRow>
    </div>
  );
}

function DataPanel() {
  return (
    <div className="card card-pad rise">
      <PanelHead icon="database" tint="red" title="Data & Account" sub="Export or delete your data" />
      <SetRow first title="Export data" desc="Download all your data as a single archive"><span className="badge b-gray">COMING SOON</span></SetRow>
      <SetRow title="Reset account" desc="Remove all email data, connected accounts and processed info. Your login is preserved.">
        <Btn variant="secondary" icon="rotate-ccw">Reset</Btn>
      </SetRow>
      <div className="danger-zone">
        <SetRow first title="Delete account" desc="Permanently delete your account and all associated data. This cannot be undone.">
          <button className="btn btn-danger"><Icon name="trash-2" size={16} /> Delete</button>
        </SetRow>
      </div>
    </div>
  );
}

// ======================= SHELL =======================
// Tracks a CSS media query so Settings can swap to a phone drill-down layout.
function useMatchMedia(query) {
  const [match, setMatch] = useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
  useEffect(() => {
    const mq = window.matchMedia(query);
    const fn = e => setMatch(e.matches);
    mq.addEventListener('change', fn);
    setMatch(mq.matches);
    return () => mq.removeEventListener('change', fn);
  }, [query]);
  return match;
}

function Settings() {
  const D = window.ZD_DATA;
  const isPhone = useMatchMedia('(max-width: 860px)');
  const [sec, setSec] = useState('plan');
  const [drilled, setDrilled] = useState(false); // phone: are we inside a section?
  const panels = {
    plan: <PlanPanel D={D} />, profile: <ProfilePanel D={D} />, email: <EmailPanel D={D} />,
    notif: <NotifPanel D={D} />, cats: <CatsPanel D={D} />, privacy: <PrivacyPanel D={D} />, data: <DataPanel />,
  };

  // ---- Phone: drill-down (master list → section detail with back) ----
  if (isPhone) {
    if (!drilled) {
      return (
        <div className="screen-inner">
          <div className="set-mlist card rise">
            {SET_SECTIONS.map(s => (
              <button key={s.id} className="set-mrow" onClick={() => { setSec(s.id); setDrilled(true); }}>
                <IconChip icon={s.icon} tint={s.tint} size={38} radius={11} />
                <div className="set-mrow-meta"><div className="t">{s.label}</div><div className="s">{s.sub}</div></div>
                <Icon name="chevron-right" size={18} />
              </button>
            ))}
          </div>
        </div>
      );
    }
    return (
      <div className="screen-inner">
        <button className="set-back" onClick={() => setDrilled(false)}>
          <Icon name="chevron-left" size={18} /> All settings
        </button>
        <div className="set-body" key={sec}>{panels[sec]}</div>
      </div>
    );
  }

  // ---- Desktop: two-pane ----
  return (
    <div className="screen-inner">
      <div className="set-wrap">
        <nav className="set-nav">
          {SET_SECTIONS.map(s => (
            <button key={s.id} className={sec === s.id ? 'on' : ''} onClick={() => setSec(s.id)}>
              <Icon name={s.icon} size={18} /><span className="lbl">{s.label}</span>
              {sec === s.id && <Icon name="chevron-right" size={15} />}
            </button>
          ))}
        </nav>
        <div className="set-body" key={sec}>{panels[sec]}</div>
      </div>
    </div>
  );
}
window.Settings = Settings;