/* Document Center */
(function () {
  const { useState } = React;
  const Icon = window.Icon, PageHead = window.PageHead;
  const D = window.YEIDA;

  const CATS = ['All', 'Allotment', 'Possession', 'Lease Deed', 'Building Approvals', 'NOCs', 'Circulars', 'Master Plans', 'Government Orders'];

  function Documents({ toast }) {
    const [cat, setCat] = useState('All');
    const [q, setQ] = useState('');
    const [view, setView] = useState('grid');
    const [bookmarks, setBookmarks] = useState({});
    const [preview, setPreview] = useState(null);
    const tagColor = { blue: ['var(--blue-50)', 'var(--blue-600)'], green: ['var(--emerald-50)', 'var(--emerald-700)'], navy: ['#e9eefb', 'var(--navy-700)'], amber: ['var(--amber-50)', 'var(--amber-600)'] };

    const list = D.documents.filter(d => (cat === 'All' || d.type === cat) && d.name.toLowerCase().includes(q.toLowerCase()));

    return (
      <div>
        <PageHead title="Document Center" subtitle="All your property documents — verified, searchable, downloadable">
          <div className="row gap-2" style={{ background: 'var(--bg-2)', padding: 3, borderRadius: 10 }}>
            {[['grid', 'grid'], ['list', 'menu']].map(([k, ic]) => (
              <button key={k} onClick={() => setView(k)} className="icon-btn" style={{ width: 34, height: 34, background: view === k ? '#fff' : 'transparent', boxShadow: view === k ? 'var(--sh-xs)' : 'none', color: view === k ? 'var(--ink)' : 'var(--muted)' }}><Icon name={ic} size={18} /></button>
            ))}
          </div>
        </PageHead>

        {/* search + filters */}
        <div className="card card-pad anim-fade-up" style={{ marginBottom: 18, padding: 16 }}>
          <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
            <div className="input-icon" style={{ flex: 1, minWidth: 240 }}>
              <Icon name="search" />
              <input className="input" placeholder="Search documents…" value={q} onChange={e => setQ(e.target.value)} />
            </div>
            <button className="btn btn-outline"><Icon name="filter" size={17} />Filters</button>
          </div>
          <div className="row gap-2" style={{ marginTop: 14, flexWrap: 'wrap' }}>
            {CATS.map(c => <button key={c} className={'chip' + (cat === c ? ' active' : '')} onClick={() => setCat(c)}>{c}</button>)}
          </div>
        </div>

        {view === 'grid' ? (
          <div className="anim-fade-up" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
            {list.map((d, i) => {
              const tc = tagColor[d.tag];
              return (
                <div key={i} className="card card-pad card-hover" style={{ position: 'relative' }}>
                  <button onClick={() => setBookmarks(b => ({ ...b, [d.name]: !b[d.name] }))} style={{ position: 'absolute', top: 14, right: 14, background: 'none', border: 'none', cursor: 'pointer', color: bookmarks[d.name] ? 'var(--amber-500)' : 'var(--faint)' }}>
                    <Icon name="bookmark" size={18} style={{ fill: bookmarks[d.name] ? 'var(--amber-500)' : 'none' }} />
                  </button>
                  <span style={{ width: 48, height: 48, borderRadius: 12, display: 'grid', placeItems: 'center', background: tc[0], color: tc[1], marginBottom: 14 }}><Icon name="file" size={24} /></span>
                  <div style={{ fontWeight: 700, fontSize: 14.5, lineHeight: 1.3, minHeight: 38 }}>{d.name}</div>
                  <div className="faint" style={{ fontSize: 12, marginTop: 6 }}>{d.type}</div>
                  <div className="row spread" style={{ marginTop: 4, fontSize: 12 }}><span className="faint num">{d.date}</span><span className="faint">{d.size}</span></div>
                  <div className="row gap-2" style={{ marginTop: 14 }}>
                    <button className="btn btn-outline btn-sm" style={{ flex: 1 }} onClick={() => setPreview(d)}><Icon name="eye" size={15} />Preview</button>
                    <button className="btn btn-ghost btn-sm" style={{ border: '1px solid var(--line)' }} onClick={() => toast && toast('Downloading ' + d.name)}><Icon name="download" size={15} /></button>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="card anim-fade-up" style={{ overflow: 'hidden' }}>
            <table className="tbl">
              <thead><tr><th>Document</th><th>Category</th><th>Date</th><th>Size</th><th></th></tr></thead>
              <tbody>
                {list.map((d, i) => {
                  const tc = tagColor[d.tag];
                  return (
                    <tr key={i}>
                      <td><div className="row gap-3"><span style={{ width: 36, height: 36, borderRadius: 9, display: 'grid', placeItems: 'center', background: tc[0], color: tc[1] }}><Icon name="file" size={18} /></span><span style={{ fontWeight: 600, color: 'var(--ink)' }}>{d.name}</span></div></td>
                      <td>{d.type}</td><td className="num">{d.date}</td><td className="num faint">{d.size}</td>
                      <td style={{ textAlign: 'right' }}><div className="row gap-2" style={{ justifyContent: 'flex-end' }}><button className="icon-btn" onClick={() => setPreview(d)}><Icon name="eye" size={18} /></button><button className="icon-btn" onClick={() => toast && toast('Downloading…')}><Icon name="download" size={18} /></button></div></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {preview && <PreviewModal doc={preview} onClose={() => setPreview(null)} toast={toast} />}
      </div>
    );
  }

  function PreviewModal({ doc, onClose, toast }) {
    return (
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(8,26,57,.55)', backdropFilter: 'blur(3px)', display: 'grid', placeItems: 'center', zIndex: 1000, padding: 24 }}>
        <div onClick={e => e.stopPropagation()} className="anim-pop card" style={{ width: 720, maxWidth: '100%', maxHeight: '88vh', padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div className="row spread" style={{ padding: '16px 22px', borderBottom: '1px solid var(--line)' }}>
            <div className="row gap-3"><span style={{ width: 38, height: 38, borderRadius: 10, display: 'grid', placeItems: 'center', background: 'var(--blue-50)', color: 'var(--blue-600)' }}><Icon name="file" size={19} /></span><div><div style={{ fontWeight: 700, fontSize: 15 }}>{doc.name}</div><div className="faint" style={{ fontSize: 12 }}>{doc.type} · {doc.size}</div></div></div>
            <div className="row gap-2"><button className="btn btn-outline btn-sm" onClick={() => toast && toast('Downloaded')}><Icon name="download" size={15} />Download</button><button className="icon-btn" onClick={onClose}><Icon name="x" /></button></div>
          </div>
          <div style={{ flex: 1, overflow: 'auto', background: 'var(--bg-2)', padding: 30, display: 'grid', placeItems: 'center' }}>
            {/* faux document page */}
            <div style={{ width: 460, background: '#fff', boxShadow: 'var(--sh-lg)', borderRadius: 6, padding: '44px 46px', minHeight: 560 }}>
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}><window.Logo size={40} sub={false} /></div>
              <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--muted)', letterSpacing: '.06em', textTransform: 'uppercase', fontWeight: 700 }}>Yamuna Expressway Industrial Development Authority</div>
              <div style={{ height: 2, background: 'var(--navy-800)', margin: '14px 0 20px' }} />
              <div style={{ textAlign: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, marginBottom: 18 }}>{doc.name}</div>
              {[...Array(8)].map((_, i) => <div key={i} style={{ height: 9, background: i % 4 === 3 ? 'transparent' : '#eef2f7', borderRadius: 4, marginBottom: 11, width: i % 3 === 0 ? '70%' : '100%' }} />)}
              <div style={{ height: 80, background: 'var(--bg)', borderRadius: 8, margin: '18px 0', border: '1px solid var(--line)' }} />
              {[...Array(4)].map((_, i) => <div key={i} style={{ height: 9, background: '#eef2f7', borderRadius: 4, marginBottom: 11, width: i === 3 ? '50%' : '100%' }} />)}
              <div className="row spread" style={{ marginTop: 40 }}><div><div style={{ height: 30, width: 90, borderBottom: '1.5px solid var(--ink-2)' }} /><div style={{ fontSize: 10, color: 'var(--muted)', marginTop: 4 }}>Authorised Signatory</div></div><div style={{ width: 60, height: 60, borderRadius: 99, border: '2px dashed var(--blue-200,#bcd0f5)', display: 'grid', placeItems: 'center', color: 'var(--blue-400)', fontSize: 9, fontWeight: 700, textAlign: 'center' }}>OFFICIAL SEAL</div></div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.Documents = Documents;
})();