// Admin screens — Equipment, Users, Standard Responses, Test Configuration, Test Templates
const { useState: useSA, useMemo: useMA } = React;

function AdminPage({ data, currentUser, section = 'equipment', onSection }) {
  const sections = [
  { id: 'equipment', label: 'Equipment', icon: 'equipment' },
  { id: 'users', label: 'Users & Roles', icon: 'users' },
  { id: 'standard-responses', label: 'Standard Responses', icon: 'snippet' },
  { id: 'test-config', label: 'Test Configuration', icon: 'sliders' },
  { id: 'test-templates', label: 'Test Templates', icon: 'layers' }];

  return (
    <div>
      <div className="page-header">
        <div>
          <h1>Admin</h1>
          <div className="sub">Manage lab equipment, users, standard responses, test configuration and templates.</div>
        </div>
      </div>
      <div className="tabs">
        {sections.map((s) =>
        <button key={s.id} className={`tab ${section === s.id ? 'active' : ''}`} onClick={() => onSection(s.id)}>
            <Icon name={s.icon} size={12} style={{ marginRight: 6, verticalAlign: '-2px' }} />{s.label}
          </button>
        )}
      </div>
      {section === 'equipment' && <EquipmentAdmin data={data} />}
      {section === 'users' && <UsersAdmin data={data} />}
      {section === 'standard-responses' && <StandardResponsesAdmin data={data} />}
      {section === 'test-config' && <TestConfigAdmin data={data} />}
      {section === 'test-templates' && <TestTemplatesAdmin data={data} />}
    </div>);

}

function EquipmentAdmin({ data }) {
  const [q, setQ] = useSA('');
  const [showNew, setShowNew] = useSA(false);
  const list = data.EQUIPMENT.filter((e) => {
    if (!q.trim()) return true;
    const s = q.toLowerCase();
    return e.name.toLowerCase().includes(s) || e.tag.toLowerCase().includes(s) || e.serial.toLowerCase().includes(s) || e.manufacturer.toLowerCase().includes(s);
  });
  const overdue = data.EQUIPMENT.filter((e) => new Date(e.calibrationDue) < new Date('2026-04-29'));
  return (
    <div>
      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="stat"><div className="label">Total Equipment</div><div className="value">{data.EQUIPMENT.length}</div><div className="delta">In service & out of service</div></div>
        <div className="stat" style={{ borderLeft: '3px solid var(--green)' }}><div className="label">In Service</div><div className="value">{data.EQUIPMENT.filter((e) => e.status === 'In Service').length}</div><div className="delta">Available for testing</div></div>
        <div className="stat" style={{ borderLeft: '3px solid var(--red)' }}><div className="label">Calibration Overdue</div><div className="value">{overdue.length}</div><div className="delta">Block test entries</div></div>
      </div>
      <div className="list-toolbar">
        <input className="search" placeholder="Search by name, asset tag, serial…" value={q} onChange={(e) => setQ(e.target.value)} />
        <div className="right">
          <button className="btn ghost sm"><Icon name="download" size={12} /> Export CSV</button>
          <button className="btn primary" onClick={() => setShowNew(true)}><Icon name="plus" size={12} /> Add equipment</button>
        </div>
      </div>
      <div className="card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
        <table className="tbl">
          <thead><tr>
            <th>Equipment</th><th>Asset tag</th><th>Manufacturer / Model</th><th>Serial</th>
            <th>Location</th><th>Calibration due</th><th>Status</th><th></th>
          </tr></thead>
          <tbody>
            {list.map((e) => {
              const due = new Date(e.calibrationDue);
              const isOverdue = due < new Date('2026-04-29');
              const isSoon = !isOverdue && due < new Date('2026-05-29');
              return (
                <tr key={e.id} className="row-clickable">
                  <td><div className="lead">{e.name}</div><div style={{ fontSize: 10.5, color: 'var(--body-text)', marginTop: 2 }}>{e.category}</div></td>
                  <td><span className="tag">{e.tag}</span></td>
                  <td>{e.manufacturer}<div style={{ fontSize: 10.5, color: 'var(--body-text)' }}>{e.model}</div></td>
                  <td className="muted" style={{ fontVariantNumeric: 'tabular-nums' }}>{e.serial}</td>
                  <td>{e.location}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: isOverdue ? 'var(--red)' : isSoon ? 'var(--amber)' : 'var(--body-text-strong)' }}>
                      <Icon name={isOverdue ? 'alert' : 'calendar'} size={12} /> {e.calibrationDue}
                    </div>
                  </td>
                  <td><span className={`pill ${e.status === 'In Service' ? 'approved' : 'rejected'}`}><span className="dot" />{e.status}</span></td>
                  <td><button className="btn ghost sm"><Icon name="more" size={12} /></button></td>
                </tr>);

            })}
          </tbody>
        </table>
      </div>
      {showNew &&
      <div className="modal-backdrop" onClick={() => setShowNew(false)}>
          <div className="modal" onClick={(ev) => ev.stopPropagation()}>
            <div className="modal-header"><h3>Add equipment</h3>
              <button className="btn ghost sm" onClick={() => setShowNew(false)}><Icon name="x" size={14} /></button>
            </div>
            <div className="modal-body">
              <div className="field-grid">
                <div className="field"><label>Name<span className="req">*</span></label><input type="text" placeholder="e.g. Leica M205 A Stereo Microscope" /></div>
                <div className="field"><label>Asset tag<span className="req">*</span></label><input type="text" placeholder="FT-MIC-015" /></div>
                <div className="field"><label>Manufacturer</label><input type="text" /></div>
                <div className="field"><label>Model</label><input type="text" /></div>
                <div className="field"><label>Serial number</label><input type="text" /></div>
                <div className="field"><label>Category</label>
                  <select><option>Microscopy</option><option>Spectroscopy</option><option>Radiography</option><option>Acoustic</option><option>Sample Prep</option><option>Electrical</option><option>Dimensional</option></select>
                </div>
                <div className="field"><label>Location</label><input type="text" /></div>
                <div className="field"><label>Calibration due</label><input type="date" /></div>
              </div>
            </div>
            <div className="modal-footer">
              <button className="btn" onClick={() => setShowNew(false)}>Cancel</button>
              <button className="btn primary" onClick={() => setShowNew(false)}><Icon name="check" size={12} /> Create</button>
            </div>
          </div>
        </div>
      }
    </div>);

}

function UsersAdmin({ data }) {
  const [q, setQ] = useSA('');
  const list = data.USERS.filter((u) => {
    if (!q.trim()) return true;
    const s = q.toLowerCase();
    return u.name.toLowerCase().includes(s) || u.email.toLowerCase().includes(s) || u.role.toLowerCase().includes(s);
  });
  return (
    <div>
      <div className="list-toolbar">
        <input className="search" placeholder="Search users…" value={q} onChange={(e) => setQ(e.target.value)} />
        <div className="filters">
          <button className="chip active">All</button>
          <button className="chip">Test Engineer</button>
          <button className="chip">Approver</button>
          <button className="chip">Admin</button>
        </div>
        <div className="right">
          <button className="btn primary"><Icon name="plus" size={12} /> Invite user</button>
        </div>
      </div>
      <div className="card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
        <table className="tbl">
          <thead><tr>
            <th>User</th><th>Email</th><th>Role</th><th>Last sign-in</th><th>Status</th><th></th>
          </tr></thead>
          <tbody>
            {list.map((u) =>
            <tr key={u.id}>
                <td><div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><Avatar user={u} size={28} /><div className="lead">{u.name}</div></div></td>
                <td className="muted">{u.email}</td>
                <td><span className="tag">{u.role}</span></td>
                <td className="muted" style={{ fontVariantNumeric: 'tabular-nums' }}>{u.lastLogin}</td>
                <td><span className={`pill ${u.active ? 'approved' : 'rejected'}`}><span className="dot" />{u.active ? 'Active' : 'Disabled'}</span></td>
                <td><button className="btn ghost sm"><Icon name="more" size={12} /></button></td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="card" style={{ marginTop: 18 }}>
        <div className="card-header"><h3>Permission matrix</h3></div>
        <div className="card-body tight">
          <table className="tbl">
            <thead><tr><th>Action</th><th style={{ textAlign: 'center' }}>Test Engineer</th><th style={{ textAlign: 'center' }}>Approver</th><th style={{ textAlign: 'center' }}>Admin</th></tr></thead>
            <tbody>
              {[
              ['Create job', true, false, true],
              ['Edit own job before submission', true, false, true],
              ['Enter test results', true, false, true],
              ['Submit for approval', true, false, true],
              ['Approve / reject', false, true, true],
              ['Issue report to customer', false, true, true],
              ['Edit equipment register', false, false, true],
              ['Edit users & permissions', false, false, true],
              ['Edit standard responses', false, false, true]].
              map((r, i) =>
              <tr key={i}>
                  <td className="lead">{r[0]}</td>
                  {[1, 2, 3].map((idx) =>
                <td key={idx} style={{ textAlign: 'center' }}>
                      {r[idx] ? <Icon name="check" size={14} color="var(--green)" /> : <Icon name="x" size={12} color="var(--line-strong)" />}
                    </td>
                )}
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>);

}

function StandardResponsesAdmin({ data }) {
  const [q, setQ] = useSA('');
  const [cat, setCat] = useSA('all');
  const cats = ['all', ...new Set(data.STANDARD_RESPONSES.map((s) => s.category))];
  const list = data.STANDARD_RESPONSES.filter((sr) => {
    if (cat !== 'all' && sr.category !== cat) return false;
    if (!q.trim()) return true;
    const s = q.toLowerCase();
    return sr.title.toLowerCase().includes(s) || sr.body.toLowerCase().includes(s);
  });
  return (
    <div>
      <div className="list-toolbar">
        <input className="search" placeholder="Search standard responses…" value={q} onChange={(e) => setQ(e.target.value)} />
        <div className="filters">
          {cats.map((c) => <button key={c} className={`chip ${cat === c ? 'active' : ''}`} onClick={() => setCat(c)}>{c === 'all' ? 'All categories' : c}</button>)}
        </div>
        <div className="right">
          <button className="btn primary"><Icon name="plus" size={12} /> New response</button>
        </div>
      </div>
      <div className="card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
        <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {list.map((sr) =>
          <div key={sr.id} style={{ border: '1px solid var(--line)', borderRadius: 4, padding: 14, display: 'flex', gap: 14 }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <span className="tag">{sr.category}</span>
                  <div style={{ fontSize: 13, color: 'var(--dark-blue)', fontWeight: 700 }}>{sr.title}</div>
                </div>
                <div style={{ fontSize: 12, color: 'var(--body-text)', marginTop: 6, lineHeight: 1.5 }}>{sr.body}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <button className="btn ghost sm"><Icon name="edit" size={11} /> Edit</button>
                <button className="btn ghost sm"><Icon name="trash" size={11} color="var(--red)" /> Delete</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

window.AdminPage = AdminPage;

// =============================================================================
// TEST CONFIGURATION — manage master Groups & Tests catalog (read/edit)
// =============================================================================
function TestConfigAdmin({ data }) {
  const [q, setQ] = useSA('');
  const [catFilter, setCatFilter] = useSA('all');
  const [expanded, setExpanded] = useSA(() => new Set(data.TEST_GROUPS.map((g) => g.id)));
  const toggle = (id) => { const s = new Set(expanded); s.has(id) ? s.delete(id) : s.add(id); setExpanded(s); };
  const expandAll = () => setExpanded(new Set(data.TEST_GROUPS.map((g) => g.id)));
  const collapseAll = () => setExpanded(new Set());
  const groups = data.TEST_GROUPS.filter((g) => {
    if (catFilter !== 'all' && g.category !== catFilter) return false;
    if (!q.trim()) return true;
    const s = q.toLowerCase();
    if (g.name.toLowerCase().includes(s) || g.number.includes(s)) return true;
    return g.tests.some((t) => t.title.toLowerCase().includes(s) || t.number.includes(s));
  });
  const totalTests = data.TEST_GROUPS.reduce((n, g) => n + g.tests.length, 0);
  const destructive = data.TEST_GROUPS.filter((g) => g.category === 'Destructive').length;
  return (
    <div>
      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="stat"><div className="label">Test Groups</div><div className="value">{data.TEST_GROUPS.length}</div><div className="delta">Numbered 1.0.0 – {data.TEST_GROUPS.length}.0.0</div></div>
        <div className="stat"><div className="label">Total Tests</div><div className="value">{totalTests}</div><div className="delta">Across all groups</div></div>
        <div className="stat" style={{ borderLeft: '3px solid var(--amber)' }}><div className="label">Destructive Groups</div><div className="value">{destructive}</div><div className="delta">Require sample sacrifice</div></div>
      </div>
      <div className="list-toolbar">
        <input className="search" placeholder="Search groups or tests by name or number…" value={q} onChange={(e) => setQ(e.target.value)} />
        <div className="filters">
          {['all', 'Non-destructive', 'Destructive'].map((c) =>
          <button key={c} className={`chip ${catFilter === c ? 'active' : ''}`} onClick={() => setCatFilter(c)}>{c === 'all' ? 'All categories' : c}</button>)}
        </div>
        <div className="right" style={{ display: 'flex', gap: 6 }}>
          <button className="btn ghost sm" onClick={expandAll}>Expand all</button>
          <button className="btn ghost sm" onClick={collapseAll}>Collapse all</button>
          <button className="btn primary"><Icon name="plus" size={12} /> New group</button>
        </div>
      </div>
      <div className="card" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
        <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {groups.map((g) => {
            const isOpen = expanded.has(g.id);
            return (
              <div key={g.id} style={{ border: '1px solid var(--line)', borderRadius: 4, background: 'white' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', cursor: 'pointer', borderBottom: isOpen ? '1px solid var(--line)' : 'none' }} onClick={() => toggle(g.id)}>
                  <Icon name={isOpen ? 'chevron-down' : 'chevron-right'} size={14} />
                  <span className="muted" style={{ fontVariantNumeric: 'tabular-nums', fontSize: 11.5, minWidth: 42 }}>{g.number}</span>
                  <div style={{ fontWeight: 700, color: 'var(--dark-blue)', fontSize: 13 }}>{g.name}</div>
                  <span className="tag" style={{ background: g.category === 'Destructive' ? 'rgba(214, 78, 78, 0.10)' : 'rgba(46, 161, 102, 0.10)', color: g.category === 'Destructive' ? 'var(--red)' : 'var(--green)' }}>{g.category}</span>
                  <span className="tag">{g.as6171Id}</span>
                  <span className="muted" style={{ marginLeft: 'auto', fontSize: 11 }}>{g.tests.length} test{g.tests.length === 1 ? '' : 's'}</span>
                  <button className="btn ghost sm" onClick={(e) => { e.stopPropagation(); }} title="Edit group"><Icon name="edit" size={11} /></button>
                </div>
                {isOpen &&
                <table className="tbl" style={{ borderTop: 0 }}>
                    <thead><tr><th style={{ width: 70 }}>#</th><th>Test</th><th style={{ width: 110, textAlign: 'right' }}>Actions</th></tr></thead>
                    <tbody>
                      {g.tests.map((t) =>
                      <tr key={t.id}>
                          <td className="muted" style={{ fontVariantNumeric: 'tabular-nums' }}>{t.number}</td>
                          <td className="lead">{t.title}</td>
                          <td style={{ textAlign: 'right' }}>
                            <button className="btn ghost sm"><Icon name="edit" size={11} /></button>
                            <button className="btn ghost sm" style={{ marginLeft: 4 }}><Icon name="trash" size={11} color="var(--red)" /></button>
                          </td>
                        </tr>)}
                      <tr><td colSpan={3} style={{ padding: '6px 14px', background: 'var(--canvas)' }}><button className="btn ghost sm"><Icon name="plus" size={11} /> Add test to this group</button></td></tr>
                    </tbody>
                  </table>}
              </div>);
          })}
          {groups.length === 0 && <div className="muted" style={{ padding: 24, textAlign: 'center', fontSize: 12 }}>No groups match — try clearing search or filters.</div>}
        </div>
      </div>
    </div>);
}

// =============================================================================
// TEST TEMPLATES — manage pre-canned plans used by the New Job wizard
// =============================================================================
function TestTemplatesAdmin({ data }) {
  const [q, setQ] = useSA('');
  const [selected, setSelected] = useSA(data.TEST_PLAN_TEMPLATES[0]?.id || null);
  const list = data.TEST_PLAN_TEMPLATES.filter((t) => !q.trim() || t.name.toLowerCase().includes(q.toLowerCase()));
  const tpl = data.TEST_PLAN_TEMPLATES.find((t) => t.id === selected);
  const includedGroups = tpl ? data.TEST_GROUPS.filter((g) => tpl.groupIds.includes(g.id)) : [];
  const totalIncluded = includedGroups.reduce((n, g) => n + (tpl.testIds === 'all' ? g.tests.length : g.tests.filter((t) => tpl.testIds.includes(t.id)).length), 0);
  const totalAvailable = data.TEST_GROUPS.reduce((n, g) => n + g.tests.length, 0);
  return (
    <div>
      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="stat"><div className="label">Templates</div><div className="value">{data.TEST_PLAN_TEMPLATES.length}</div><div className="delta">Available in New Job wizard</div></div>
        <div className="stat"><div className="label">Master catalog</div><div className="value">{data.TEST_GROUPS.length} groups · {totalAvailable} tests</div><div className="delta">Configured under Test Configuration</div></div>
        <div className="stat" style={{ borderLeft: '3px solid var(--light-blue)' }}><div className="label">Selected template</div><div className="value" style={{ fontSize: 14 }}>{tpl ? `${includedGroups.length} groups · ${totalIncluded} tests` : '—'}</div><div className="delta">{tpl?.name || 'None selected'}</div></div>
      </div>
      <div className="list-toolbar">
        <input className="search" placeholder="Search templates…" value={q} onChange={(e) => setQ(e.target.value)} />
        <div className="right">
          <button className="btn ghost sm"><Icon name="download" size={12} /> Duplicate</button>
          <button className="btn primary"><Icon name="plus" size={12} /> New template</button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 12 }}>
        <div className="card" style={{ borderTopLeftRadius: 0, padding: 0 }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {list.map((t) => {
              const inc = data.TEST_GROUPS.filter((g) => t.groupIds.includes(g.id));
              const tests = inc.reduce((n, g) => n + (t.testIds === 'all' ? g.tests.length : g.tests.filter((x) => t.testIds.includes(x.id)).length), 0);
              return (
                <button key={t.id} onClick={() => setSelected(t.id)}
                  style={{ textAlign: 'left', padding: '12px 14px', border: 'none', background: selected === t.id ? 'rgba(0,173,239,0.08)' : 'transparent', borderLeft: selected === t.id ? '3px solid var(--light-blue)' : '3px solid transparent', borderBottom: '1px solid var(--line)', cursor: 'pointer' }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--dark-blue)' }}>{t.name}</div>
                  <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>{inc.length} groups · {tests} tests</div>
                </button>);
            })}
            {list.length === 0 && <div className="muted" style={{ padding: 20, textAlign: 'center', fontSize: 12 }}>No templates match.</div>}
          </div>
        </div>
        <div className="card" style={{ borderTopLeftRadius: 0 }}>
          {tpl ? (
            <>
              <div className="card-header" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <h3 style={{ margin: 0, flex: 1 }}>{tpl.name}</h3>
                <button className="btn ghost sm"><Icon name="edit" size={11} /> Rename</button>
                <button className="btn ghost sm"><Icon name="trash" size={11} color="var(--red)" /> Delete</button>
              </div>
              <div className="card-body">
                <div className="muted" style={{ fontSize: 11.5, marginBottom: 10 }}>Tick the groups and tests this template should pre-select in the New Job wizard.</div>
                <table className="tbl">
                  <thead><tr><th style={{ width: 36 }}></th><th style={{ width: 70 }}>#</th><th>Group / Test</th><th style={{ width: 130 }}>Category</th></tr></thead>
                  <tbody>
                    {data.TEST_GROUPS.map((g) => {
                      const groupIn = tpl.groupIds.includes(g.id);
                      const allTestsIn = tpl.testIds === 'all' || g.tests.every((t) => tpl.testIds.includes(t.id));
                      return (
                        <React.Fragment key={g.id}>
                          <tr style={{ background: groupIn ? 'rgba(0,173,239,0.04)' : 'transparent' }}>
                            <td><input type="checkbox" readOnly checked={groupIn} ref={(el) => { if (el) el.indeterminate = groupIn && !allTestsIn; }} /></td>
                            <td className="muted" style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 700 }}>{g.number}</td>
                            <td style={{ fontWeight: 700, color: 'var(--dark-blue)' }}>{g.name}</td>
                            <td><span className="tag" style={{ background: g.category === 'Destructive' ? 'rgba(214, 78, 78, 0.10)' : 'rgba(46, 161, 102, 0.10)', color: g.category === 'Destructive' ? 'var(--red)' : 'var(--green)' }}>{g.category}</span></td>
                          </tr>
                          {groupIn && g.tests.map((t) => {
                            const inT = tpl.testIds === 'all' || tpl.testIds.includes(t.id);
                            return (
                              <tr key={t.id}>
                                <td></td>
                                <td className="muted" style={{ fontVariantNumeric: 'tabular-nums', paddingLeft: 18 }}>{t.number}</td>
                                <td colSpan={2} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                  <input type="checkbox" readOnly checked={inT} />
                                  <span style={{ color: inT ? 'var(--dark-blue)' : 'var(--body-text)', fontSize: 12 }}>{t.title}</span>
                                </td>
                              </tr>);
                          })}
                        </React.Fragment>);
                    })}
                  </tbody>
                </table>
              </div>
            </>) : (
            <div className="card-body muted" style={{ padding: 32, textAlign: 'center', fontSize: 12 }}>Select a template to view its included groups and tests.</div>)}
        </div>
      </div>
    </div>);
}