/* Notices, Sector Maps, Support, Profile */
(function () {
  const { useState } = React;
  const Icon = window.Icon, PageHead = window.PageHead, SectorMap = window.SectorMap, Avatar = window.Avatar;
  const D = window.YEIDA;

  /* ---------------- NOTICES ---------------- */
  const NCATS = ['All', 'Policy Update', 'Construction Guidelines', 'Sector Update', 'Authority Circular', 'Announcement'];
  function Notices() {
    const [cat, setCat] = useState('All');
    const [sel, setSel] = useState(D.notices[0]);
    const list = D.notices.filter(n => cat === 'All' || n.cat === cat);
    return (
      <div>
        <PageHead title="Notices" subtitle="Important notices, circulars and policy updates from YEIDA" />
        <div className="row gap-2" style={{ marginBottom: 18, flexWrap: 'wrap' }}>
          {NCATS.map(c => <button key={c} className={'chip' + (cat === c ? ' active' : '')} onClick={() => setCat(c)}>{c}</button>)}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 18 }}>
          <div className="col gap-3 anim-fade-up">
            {list.map(n => (
              <button key={n.id} onClick={() => setSel(n)} className="card card-hover" style={{ textAlign: 'left', padding: '16px 18px', cursor: 'pointer', border: sel.id === n.id ? '1.5px solid var(--blue-400)' : '1px solid var(--line)', background: sel.id === n.id ? 'var(--blue-50)' : '#fff' }}>
                <div className="row spread" style={{ marginBottom: 7 }}>
                  <span className={'badge badge-' + (n.cat === 'Policy Update' ? 'navy' : n.cat === 'Construction Guidelines' ? 'amber' : n.cat === 'Authority Circular' ? 'blue' : 'gray')} style={{ fontSize: 11 }}>{n.cat}</span>
                  {n.pinned && <Icon name="flag" size={15} style={{ color: 'var(--red-500)' }} />}
                </div>
                <div style={{ fontWeight: 700, fontSize: 14.5, lineHeight: 1.35 }}>{n.title}</div>
                <div className="faint num" style={{ fontSize: 12, marginTop: 6 }}>{n.date}{n.attachments.length > 0 && ' · ' + n.attachments.length + ' attachment' + (n.attachments.length > 1 ? 's' : '')}</div>
              </button>
            ))}
          </div>
          <div className="card card-pad anim-fade-up" style={{ alignSelf: 'start' }} key={sel.id}>
            <div className="row spread" style={{ marginBottom: 12 }}>
              <span className={'badge badge-' + (sel.cat === 'Policy Update' ? 'navy' : sel.cat === 'Construction Guidelines' ? 'amber' : sel.cat === 'Authority Circular' ? 'blue' : 'gray')}>{sel.cat}</span>
              <div className="row gap-2"><button className="icon-btn"><Icon name="bookmark" size={18} /></button><button className="icon-btn"><Icon name="download" size={18} /></button></div>
            </div>
            <h2 style={{ fontSize: 24, lineHeight: 1.2 }}>{sel.title}</h2>
            <div className="row gap-3 faint" style={{ fontSize: 13, marginTop: 10 }}><span className="row gap-2"><Icon name="calendar" size={14} />{sel.date}</span><span className="row gap-2"><Icon name="building" size={14} />YEIDA Authority</span></div>
            <div style={{ height: 1, background: 'var(--line)', margin: '18px 0' }} />
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)' }}>{sel.body}</p>
            {sel.attachments.length > 0 && (
              <div style={{ marginTop: 24 }}>
                <div style={{ fontWeight: 700, fontSize: 13.5, marginBottom: 10 }}>Attachments</div>
                <div className="col gap-2">
                  {sel.attachments.map(a => (
                    <div key={a} className="row spread" style={{ padding: '12px 14px', borderRadius: 11, border: '1px solid var(--line)', background: 'var(--bg)' }}>
                      <span className="row gap-3" style={{ fontSize: 13.5, fontWeight: 600 }}><span style={{ width: 34, height: 34, borderRadius: 8, display: 'grid', placeItems: 'center', background: 'var(--red-50)', color: 'var(--red-600)' }}><Icon name="file" size={17} /></span>{a}</span>
                      <button className="btn btn-outline btn-sm"><Icon name="download" size={15} />Download</button>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- SECTOR MAPS ---------------- */
  function SectorMaps({ go }) {
    const [active, setActive] = useState(D.sectors[0]);
    return (
      <div>
        <PageHead title="Sector Maps" subtitle="Explore plotted layouts, master plans and infrastructure across YEIDA sectors" />
        <div className="row gap-2" style={{ marginBottom: 18, flexWrap: 'wrap', overflowX: 'auto' }}>
          {D.sectors.map(s => (
            <button key={s.id} onClick={() => setActive(s)} className={'chip' + (active.id === s.id ? ' active' : '')} style={{ flex: 'none' }}>
              {s.mine && <Icon name="mapPin" size={14} style={{ color: active.id === s.id ? 'var(--emerald-500)' : 'var(--emerald-600)' }} />}{s.name}
            </button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 18 }}>
          <div className="anim-fade-up"><SectorMap sectorName={active.name} myPlot={active.mine ? 'B-47' : ''} height={520} /></div>
          <div className="col gap-4 anim-fade-up">
            <div className="card card-pad">
              <div className="row spread"><h3 style={{ fontSize: 18 }}>{active.name}</h3>{active.mine && <span className="badge badge-green">Your sector</span>}</div>
              <div className="col" style={{ marginTop: 10 }}>
                {[['Type', active.type], ['Total Plots', active.plots.toLocaleString('en-IN')], ['Status', active.status], ['Location', 'Yamuna Expressway']].map(([l, v]) => (
                  <div key={l} className="row spread" style={{ padding: '11px 0', borderBottom: '1px solid var(--line-2)' }}><span className="muted" style={{ fontSize: 13.5 }}>{l}</span><span style={{ fontWeight: 700, fontSize: 13.5 }}>{v}</span></div>
                ))}
              </div>
            </div>
            <div className="card card-pad">
              <h4 style={{ fontSize: 14.5, marginBottom: 12 }}>Map Layers</h4>
              <div className="col gap-3">
                {[['Road Network', 'map'], ['Infrastructure', 'building'], ['Master Plan Overlay', 'grid'], ['Satellite View', 'layers']].map(([l, ic]) => (
                  <div key={l} className="row gap-3" style={{ fontSize: 13.5, color: 'var(--ink-2)' }}><span style={{ width: 30, height: 30, borderRadius: 8, display: 'grid', placeItems: 'center', background: 'var(--blue-50)', color: 'var(--blue-600)' }}><Icon name={ic} size={16} /></span>{l}</div>
                ))}
              </div>
            </div>
            <div className="card card-pad" style={{ background: 'var(--navy-800)', color: '#fff' }}>
              <Icon name="documents" size={22} style={{ color: 'var(--emerald-500)' }} />
              <div style={{ fontWeight: 700, fontSize: 14.5, marginTop: 10 }}>Master Plan PDF</div>
              <p style={{ fontSize: 12.5, color: 'rgba(200,216,240,.8)', marginTop: 4 }}>Download the official {active.name} master plan.</p>
              <button className="btn btn-emerald btn-sm btn-block" style={{ marginTop: 12 }} onClick={() => go('documents')}><Icon name="download" size={15} />Download</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- SUPPORT ---------------- */
  function Support() {
    return (
      <div>
        <PageHead title="Support Center" subtitle="Raise tickets, chat with us, or browse the help center">
          <button className="btn btn-primary"><Icon name="plus" size={18} />New Ticket</button>
        </PageHead>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, marginBottom: 18 }}>
          {[['Live Chat', 'Avg. response 2 min', 'chat', 'emerald'], ['Call Request', 'Request a callback', 'phone', 'blue'], ['Email Support', 'support@yeida.gov.in', 'mail', 'navy']].map(([t, s, ic, c]) => {
            const cc = { emerald: ['var(--emerald-50)', 'var(--emerald-700)'], blue: ['var(--blue-50)', 'var(--blue-600)'], navy: ['#e9eefb', 'var(--navy-700)'] }[c];
            return (
              <div key={t} className="card card-pad card-hover" style={{ cursor: 'pointer' }}>
                <span style={{ width: 46, height: 46, borderRadius: 12, display: 'grid', placeItems: 'center', background: cc[0], color: cc[1] }}><Icon name={ic} size={23} /></span>
                <div style={{ fontWeight: 700, fontSize: 16, marginTop: 14 }}>{t}</div>
                <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>{s}</div>
              </div>
            );
          })}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18 }}>
          <div className="card anim-fade-up" style={{ overflow: 'hidden' }}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line)' }}><h3 style={{ fontSize: 17 }}>My Tickets</h3></div>
            <table className="tbl">
              <thead><tr><th>Ticket</th><th>Subject</th><th>Priority</th><th>Status</th><th>Updated</th></tr></thead>
              <tbody>
                {D.tickets.map(t => (
                  <tr key={t.id}>
                    <td className="num" style={{ fontWeight: 600, color: 'var(--ink)' }}>{t.id}</td>
                    <td>{t.subject}</td>
                    <td><span className={'badge badge-' + (t.priority === 'High' ? 'red' : 'gray')}>{t.priority}</span></td>
                    <td><span className={'badge badge-' + (t.status === 'Resolved' ? 'green' : t.status === 'Open' ? 'amber' : 'blue')}>{t.status}</span></td>
                    <td className="faint">{t.updated}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="card card-pad anim-fade-up">
            <h3 style={{ fontSize: 17, marginBottom: 14 }}>Frequently Asked</h3>
            <div className="col gap-2">
              {['How do I generate an e-Challan?', 'What is the construction approval timeline?', 'How is transfer fee calculated?', 'How do I update my KYC?', 'Where can I find my lease deed?'].map(q => (
                <button key={q} className="row spread" style={{ width: '100%', padding: '13px 14px', borderRadius: 11, border: '1px solid var(--line)', background: '#fff', cursor: 'pointer', textAlign: 'left' }}>
                  <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-2)' }}>{q}</span><Icon name="chevR" size={16} style={{ color: 'var(--faint)' }} />
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- PROFILE ---------------- */
  function Profile({ go }) {
    const [tab, setTab] = useState('personal');
    const tabs = [['personal', 'Personal Info', 'user'], ['kyc', 'KYC Verification', 'shield'], ['security', 'Security', 'lock'], ['notifications', 'Notifications', 'bell'], ['devices', 'Devices', 'device']];
    return (
      <div>
        <PageHead title="Profile" subtitle="Manage your account, security and preferences" />
        <div className="card anim-fade-up" style={{ overflow: 'hidden', marginBottom: 18 }}>
          <div style={{ height: 100, background: 'radial-gradient(120% 200% at 90% 0%,#16407e,#0b2548)' }} />
          <div style={{ padding: '0 28px 24px', marginTop: -40 }}>
            <div className="row spread" style={{ alignItems: 'flex-end', flexWrap: 'wrap', gap: 14 }}>
              <div className="row gap-4" style={{ alignItems: 'flex-end' }}>
                <Avatar initials={D.user.initials} size={84} style={{ border: '4px solid #fff', fontSize: 32, boxShadow: 'var(--sh-md)' }} />
                <div style={{ paddingBottom: 6 }}><h2 style={{ fontSize: 22 }}>{D.user.name}</h2><div className="muted" style={{ fontSize: 13.5 }}>Allottee · {D.user.allotment}</div></div>
              </div>
              <div className="row gap-2" style={{ paddingBottom: 6 }}>
                <span className="badge badge-green"><Icon name="shield" size={13} />KYC Verified</span>
                <span className="badge badge-navy">Member since {D.user.memberSince}</span>
              </div>
            </div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '230px 1fr', gap: 18 }}>
          <div className="card" style={{ padding: 10, alignSelf: 'start' }}>
            {tabs.map(([k, l, ic]) => (
              <button key={k} onClick={() => setTab(k)} className="row gap-3" style={{ width: '100%', padding: '11px 13px', borderRadius: 10, border: 'none', background: tab === k ? 'var(--blue-50)' : 'transparent', color: tab === k ? 'var(--blue-600)' : 'var(--ink-2)', fontWeight: tab === k ? 700 : 500, fontSize: 14, cursor: 'pointer', textAlign: 'left' }}>
                <Icon name={ic} size={18} />{l}
              </button>
            ))}
          </div>
          <div className="card card-pad anim-fade-up" key={tab}>
            {tab === 'personal' && <PersonalTab />}
            {tab === 'kyc' && <KycTab />}
            {tab === 'security' && <SecurityTab />}
            {tab === 'notifications' && <NotifTab />}
            {tab === 'devices' && <DevicesTab />}
          </div>
        </div>
      </div>
    );
  }

  function PersonalTab() {
    const f = [['Full Name', D.user.name, 'user'], ['Mobile Number', D.user.mobile, 'phone'], ['Email Address', D.user.email, 'mail'], ['Allotment Number', D.user.allotment, 'building'], ['Sector', D.user.sector, 'map'], ['Plot Number', D.user.plot, 'plot']];
    return (
      <div>
        <div className="row spread" style={{ marginBottom: 18 }}><h3 style={{ fontSize: 18 }}>Personal Information</h3><button className="btn btn-outline btn-sm"><Icon name="edit" size={15} />Edit</button></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {f.map(([l, v, ic]) => (
            <div key={l} className="field"><label>{l}</label><div className="input-icon"><Icon name={ic} /><input className="input" defaultValue={v} readOnly /></div></div>
          ))}
        </div>
      </div>
    );
  }
  function KycTab() {
    return (
      <div>
        <h3 style={{ fontSize: 18, marginBottom: 16 }}>KYC Verification</h3>
        <div style={{ display: 'flex', gap: 14, padding: '18px 20px', borderRadius: 13, background: 'var(--emerald-50)', marginBottom: 18 }}>
          <Icon name="shield" size={24} style={{ color: 'var(--emerald-600)' }} />
          <div><div style={{ fontWeight: 700, fontSize: 15, color: 'var(--emerald-700)' }}>Your KYC is fully verified</div><div className="muted" style={{ fontSize: 13, marginTop: 2 }}>Verified on 12 Mar 2019 · Aadhaar & PAN linked</div></div>
        </div>
        {[['Aadhaar', 'xxxx xxxx 4821', true], ['PAN', 'ABCDE****F', true], ['Address Proof', 'Verified', true]].map(([l, v, ok]) => (
          <div key={l} className="row spread" style={{ padding: '14px 0', borderBottom: '1px solid var(--line-2)' }}>
            <div><div style={{ fontWeight: 600, fontSize: 14 }}>{l}</div><div className="faint num" style={{ fontSize: 12.5 }}>{v}</div></div>
            <span className="badge badge-green"><Icon name="check" size={13} />Verified</span>
          </div>
        ))}
      </div>
    );
  }
  function SecurityTab() {
    return (
      <div>
        <h3 style={{ fontSize: 18, marginBottom: 16 }}>Security Settings</h3>
        {[['Password', 'Last changed 3 months ago', 'Change'], ['Two-Factor Authentication', 'OTP via mobile enabled', 'Manage'], ['Login Alerts', 'Email on new device login', 'Configure']].map(([l, s, b]) => (
          <div key={l} className="row spread" style={{ padding: '16px 0', borderBottom: '1px solid var(--line-2)' }}>
            <div className="row gap-3"><span style={{ width: 40, height: 40, borderRadius: 10, display: 'grid', placeItems: 'center', background: 'var(--blue-50)', color: 'var(--blue-600)' }}><Icon name="lock" size={19} /></span><div><div style={{ fontWeight: 600, fontSize: 14.5 }}>{l}</div><div className="faint" style={{ fontSize: 12.5 }}>{s}</div></div></div>
            <button className="btn btn-outline btn-sm">{b}</button>
          </div>
        ))}
      </div>
    );
  }
  function NotifTab() {
    const items = [['Payment reminders', true], ['Construction approval updates', true], ['New notices & circulars', true], ['Transfer status', false], ['Promotional updates', false]];
    return (
      <div>
        <h3 style={{ fontSize: 18, marginBottom: 16 }}>Notification Preferences</h3>
        {items.map(([l, on], i) => <Toggle key={i} label={l} on={on} />)}
      </div>
    );
  }
  function Toggle({ label, on }) {
    const [v, setV] = useState(on);
    return (
      <div className="row spread" style={{ padding: '14px 0', borderBottom: '1px solid var(--line-2)' }}>
        <span style={{ fontWeight: 600, fontSize: 14 }}>{label}</span>
        <button onClick={() => setV(!v)} style={{ width: 46, height: 26, borderRadius: 99, border: 'none', cursor: 'pointer', background: v ? 'var(--emerald-500)' : '#cdd7e4', position: 'relative', transition: 'background .2s' }}>
          <span style={{ position: 'absolute', top: 3, left: v ? 23 : 3, width: 20, height: 20, borderRadius: 99, background: '#fff', transition: 'left .2s', boxShadow: 'var(--sh-xs)' }} />
        </button>
      </div>
    );
  }
  function DevicesTab() {
    const dev = [['MacBook Pro · Chrome', 'Greater Noida · Active now', true], ['iPhone 14 · YEIDA App', 'Greater Noida · 2h ago', false], ['Windows PC · Edge', 'Delhi · 5 days ago', false]];
    return (
      <div>
        <h3 style={{ fontSize: 18, marginBottom: 16 }}>Connected Devices</h3>
        {dev.map(([l, s, cur], i) => (
          <div key={i} className="row spread" style={{ padding: '16px 0', borderBottom: '1px solid var(--line-2)' }}>
            <div className="row gap-3"><span style={{ width: 40, height: 40, borderRadius: 10, display: 'grid', placeItems: 'center', background: 'var(--bg-2)', color: 'var(--muted)' }}><Icon name="device" size={19} /></span><div><div style={{ fontWeight: 600, fontSize: 14.5 }}>{l}</div><div className="faint" style={{ fontSize: 12.5 }}>{s}</div></div></div>
            {cur ? <span className="badge badge-green"><span className="dot" />This device</span> : <button className="btn btn-ghost btn-sm" style={{ color: 'var(--red-600)' }}>Sign out</button>}
          </div>
        ))}
      </div>
    );
  }

  Object.assign(window, { Notices, SectorMaps, Support, Profile });
})();