// Resources, Waitlist, Notifications, No-show, Analytics, Settings, MultiDept wizard

const Resources = () => {
  const { ROOMS, EQUIPMENT, DOCTORS, DEPARTMENTS } = window.MOCK;
  const [tab, setTab] = useState('rooms');

  return (
    <div>
      <div className="filter-bar">
        <div className="seg">
          <button className={tab === 'rooms' ? 'active' : ''} onClick={() => setTab('rooms')}>Rooms ({ROOMS.length})</button>
          <button className={tab === 'equipment' ? 'active' : ''} onClick={() => setTab('equipment')}>Equipment ({EQUIPMENT.length})</button>
          <button className={tab === 'staff' ? 'active' : ''} onClick={() => setTab('staff')}>Staff ({DOCTORS.length})</button>
        </div>
        <div style={{ flex: 1 }} />
        <button className="btn sm"><Icon name="filter" size={12} /> Filters</button>
        <button className="btn sm"><Icon name="plus" size={12} /> Add resource</button>
      </div>

      <div style={{ padding: 20 }}>
        {tab === 'rooms' && (
          <div className="res-grid">
            {ROOMS.map(r => {
              const dept = DEPARTMENTS.find(x => x.id === r.dept);
              const util = 40 + ((r.id.charCodeAt(1) * 7) % 55);
              return (
                <div key={r.id} className="res-card">
                  <div className="row-space">
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{r.name}</div>
                      <div className="muted" style={{ fontSize: 12, marginTop: 2, textTransform: 'capitalize' }}>{r.type} · {dept.name}</div>
                    </div>
                    <Pill tone={util > 80 ? 'err' : util > 60 ? 'warn' : 'ok'}>{util}%</Pill>
                  </div>
                  <div className="res-util-bar"><div className="res-util-fill" style={{ width: `${util}%`, background: dept.color }} /></div>
                  <div className="row" style={{ marginTop: 12, fontSize: 12 }}>
                    <span className="muted">Next free</span>
                    <span className="mono">{['11:15','2:30','3:45','4:20'][r.id.charCodeAt(1) % 4]} PM</span>
                    <div style={{ flex: 1 }} />
                    <button className="btn sm ghost">Schedule</button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {tab === 'equipment' && (
          <div className="res-grid">
            {EQUIPMENT.map(e => {
              const dept = DEPARTMENTS.find(x => x.id === e.dept);
              return (
                <div key={e.id} className="res-card">
                  <div className="row-space">
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{e.name}</div>
                      <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{dept.name}</div>
                    </div>
                    <Pill tone={e.status === 'maintenance' ? 'err' : e.status === 'in-use' ? 'warn' : 'ok'}>{e.status}</Pill>
                  </div>
                  <div className="res-util-bar"><div className="res-util-fill" style={{ width: `${e.util * 100}%`, background: dept.color }} /></div>
                  <div className="row" style={{ marginTop: 12, fontSize: 12 }}>
                    <span className="muted">Utilization</span>
                    <span className="mono">{Math.round(e.util * 100)}%</span>
                    <div style={{ flex: 1 }} />
                    <button className="btn sm ghost">Details</button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {tab === 'staff' && (
          <div className="card">
            <table className="tbl">
              <thead>
                <tr><th></th><th>Name</th><th>Title</th><th>Department</th><th>Load</th><th>Status</th><th></th></tr>
              </thead>
              <tbody>
                {DOCTORS.map(d => {
                  const dept = DEPARTMENTS.find(x => x.id === d.dept);
                  return (
                    <tr key={d.id}>
                      <td><Avatar name={d.name} size={28} /></td>
                      <td><div className="prow-name">{d.name}</div></td>
                      <td className="muted">{d.title}</td>
                      <td><Pill><span style={{ width: 6, height: 6, borderRadius: 99, background: dept.color, display: 'inline-block' }} /> {dept.name}</Pill></td>
                      <td>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <div style={{ width: 72, height: 5, background: 'var(--bg-sub)', borderRadius: 99, overflow: 'hidden' }}>
                            <div style={{ width: `${d.load * 100}%`, height: '100%', background: d.load > 0.85 ? 'var(--err)' : d.load > 0.7 ? 'var(--warn)' : 'var(--ok)' }} />
                          </div>
                          <span className="mono" style={{ fontSize: 11 }}>{Math.round(d.load * 100)}%</span>
                        </div>
                      </td>
                      <td>{d.status === 'on-time' ? <Pill tone="ok">On time</Pill> : <Pill tone="warn">Late {d.status.split('-')[1]}m</Pill>}</td>
                      <td><Icon name="chevronRight" size={14} /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
};

const Waitlist = ({ onSimulateFill }) => {
  const { WAITLIST, PATIENTS } = window.MOCK;
  const [filled, setFilled] = useState({});
  return (
    <div>
      <div className="filter-bar">
        <span style={{ fontSize: 13, fontWeight: 500 }}>Waitlist · {WAITLIST.length} patients</span>
        <div style={{ flex: 1 }} />
        <button className="btn sm"><Icon name="filter" size={12} /> By priority</button>
        <button className="btn accent sm" onClick={() => {
          const first = WAITLIST.find(w => !filled[w.id]);
          if (first) {
            setFilled(prev => ({ ...prev, [first.id]: true }));
            onSimulateFill(first);
          }
        }}>
          <Icon name="wand" size={12} /> Auto-fill next slot
        </button>
      </div>
      <div style={{ padding: 20 }}>
        <div className="card">
          <table className="tbl">
            <thead><tr>
              <th>Patient</th><th>Service needed</th><th>Priority</th><th>Flex</th><th>Reason</th><th>Requested</th><th>Status</th><th></th>
            </tr></thead>
            <tbody>
              {WAITLIST.map(w => {
                const p = PATIENTS.find(x => x.id === w.patientId);
                return (
                  <tr key={w.id}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Avatar name={p.name} size={26} />
                        <div>
                          <div className="prow-name">{p.name}</div>
                          <div className="prow-sub">{p.mrn}</div>
                        </div>
                      </div>
                    </td>
                    <td>{w.need}</td>
                    <td><PriorityPill priority={w.priority} /></td>
                    <td className="muted" style={{ fontSize: 12 }}>{w.flex}</td>
                    <td className="muted" style={{ fontSize: 12 }}>{w.reason}</td>
                    <td className="muted mono" style={{ fontSize: 12 }}>{w.requested}</td>
                    <td>{filled[w.id] ? <Pill tone="ok"><Icon name="check" size={10} /> Filled</Pill> : <Pill>Waiting</Pill>}</td>
                    <td>
                      {!filled[w.id] && (
                        <button className="btn sm" onClick={() => { setFilled(prev => ({ ...prev, [w.id]: true })); onSimulateFill(w); }}>
                          Offer slot
                        </button>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

const Notifications = () => {
  const { NOTIFICATIONS } = window.MOCK;
  const [filter, setFilter] = useState('all');
  const filtered = filter === 'all' ? NOTIFICATIONS : NOTIFICATIONS.filter(n => n.kind === filter);

  return (
    <div>
      <div className="filter-bar">
        <div className="seg">
          {['all', 'disruption', 'conflict', 'waitlist', 'overbook', 'patient'].map(f => (
            <button key={f} className={filter === f ? 'active' : ''} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>
      </div>
      <div style={{ padding: 20, maxWidth: 820 }}>
        <div className="card">
          {filtered.map((n, i) => (
            <div key={n.id} style={{ padding: 16, borderBottom: i < filtered.length - 1 ? '1px solid var(--border)' : 0, display: 'flex', gap: 14 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 9, flexShrink: 0,
                background: n.severity === 'error' ? 'var(--err-soft)' : n.severity === 'warn' ? 'var(--warn-soft)' : 'var(--accent-soft)',
                color: n.severity === 'error' ? 'var(--err-text)' : n.severity === 'warn' ? 'var(--warn-text)' : 'var(--accent-text)',
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name={n.severity === 'error' ? 'alert' : n.severity === 'warn' ? 'warn' : 'bell'} size={16} />
              </div>
              <div style={{ flex: 1 }}>
                <div className="row-space">
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{n.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{n.ts}</div>
                </div>
                <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 4 }}>{n.body}</div>
                <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                  {n.actions.map(a => <button key={a} className={`btn sm ${a === n.actions[0] ? 'primary' : ''}`}>{a}</button>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Resources, Waitlist, Notifications });