const { StatusPill, Badge, Avatar, Button } = window.CLIQDesignSystem_d61053;

/**
 * Facility Overview — KPI strip + resident roster. Reflects the business
 * plan's room rows (Room 101 Active, Room 102 Alert Triaged) and the
 * data-isolation rule: staff see operational status, never private logs.
 */
window.Dashboard = function Dashboard() {
  const kpis = [
    { icon: 'users', label: 'Residents protected', val: '128', sub: 'of 132 units licensed', tone: 'violet' },
    { icon: 'shield-x', label: 'Threats blocked · 7d', val: '47', sub: '+12 vs last week', tone: 'teal' },
    { icon: 'checkup-list', label: 'Pending approvals', val: '3', sub: 'avg resolve 4m', tone: 'warn' },
    { icon: 'activity-heartbeat', label: 'Network health', val: '99.9%', sub: 'all gateways online', tone: 'teal' },
  ];
  const toneMap = {
    violet: ['var(--violet-100)', 'var(--violet-600)'],
    teal: ['var(--teal-100)', 'var(--teal-700)'],
    warn: ['var(--warn-100)', 'var(--warn-700)'],
  };
  const rooms = [
    { room: '101', name: 'Margaret Ellis', wing: 'Independent', status: 'safe', activity: 'Signed in to CVS · 1m ago', blocked: 0 },
    { room: '102', name: 'Harold Boyd', wing: 'Assisted', status: 'pending', activity: 'Spoofed bank login triaged · 6m ago', blocked: 1 },
    { room: '108', name: 'Dorothy Park', wing: 'Independent', status: 'safe', activity: 'MyChart refill · 22m ago', blocked: 0 },
    { room: '114', name: 'Walter Reyes', wing: 'Memory Care', status: 'blocked', activity: 'Smishing link blocked · 40m ago', blocked: 2 },
    { room: '120', name: 'Eleanor Shaw', wing: 'Assisted', status: 'safe', activity: 'Video call with family · 1h ago', blocked: 0 },
    { room: '123', name: 'Frank Mason', wing: 'Independent', status: 'offline', activity: 'Device off · last seen 3h ago', blocked: 0 },
  ];

  return (
    <div style={{ padding: '26px 32px', overflowY: 'auto', flex: 1 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
        <div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, color: 'var(--navy-800)', margin: 0 }}>Overview</h1>
          <p style={{ fontSize: 15, color: 'var(--text-muted)', margin: '4px 0 0' }}>Maplewood Senior Living · Tuesday, Jun 25</p>
        </div>
        <Button variant="secondary" icon="download">Export report</Button>
      </div>

      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {kpis.map(k => {
          const [bg, fg] = toneMap[k.tone];
          return (
            <div key={k.label} style={{ background: '#fff', borderRadius: 'var(--radius-lg)', padding: 18, boxShadow: 'var(--shadow-sm)' }}>
              <span style={{ width: 42, height: 42, borderRadius: 12, background: bg, color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                <i className={`ti ti-${k.icon}`} style={{ fontSize: 23 }} /></span>
              <div style={{ fontSize: 30, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--navy-800)', lineHeight: 1 }}>{k.val}</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--navy-800)', marginTop: 6 }}>{k.label}</div>
              <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>{k.sub}</div>
            </div>
          );
        })}
      </div>

      {/* roster */}
      <div style={{ background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px', borderBottom: '1px solid var(--border-subtle)' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--navy-800)', margin: 0 }}>Resident roster</h2>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--text-muted)' }}>
            <i className="ti ti-lock" style={{ fontSize: 15 }} /> Operational status only — private logs sealed
          </span>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-sans)' }}>
          <thead>
            <tr style={{ textAlign: 'left', fontSize: 12, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--text-muted)' }}>
              <th style={{ padding: '12px 20px', fontWeight: 700 }}>Unit</th>
              <th style={{ padding: '12px 20px', fontWeight: 700 }}>Resident</th>
              <th style={{ padding: '12px 20px', fontWeight: 700 }}>Status</th>
              <th style={{ padding: '12px 20px', fontWeight: 700 }}>Recent activity</th>
              <th style={{ padding: '12px 20px', fontWeight: 700 }}>Blocked·7d</th>
            </tr>
          </thead>
          <tbody>
            {rooms.map((r, i) => (
              <tr key={r.room} style={{ borderTop: '1px solid var(--border-subtle)', background: r.status === 'pending' ? 'var(--warn-050)' : r.status === 'blocked' ? 'var(--alert-050)' : '#fff' }}>
                <td style={{ padding: '14px 20px', fontWeight: 700, color: 'var(--navy-800)', fontFamily: 'var(--font-mono)' }}>{r.room}</td>
                <td style={{ padding: '14px 20px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar name={r.name} size={34} />
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--navy-800)' }}>{r.name}</div>
                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{r.wing}</div>
                    </div>
                  </div>
                </td>
                <td style={{ padding: '14px 20px' }}><StatusPill status={r.status} /></td>
                <td style={{ padding: '14px 20px', fontSize: 14, color: 'var(--text-body)' }}>{r.activity}</td>
                <td style={{ padding: '14px 20px' }}>
                  {r.blocked > 0
                    ? <Badge tone="danger">{r.blocked}</Badge>
                    : <span style={{ color: 'var(--text-muted)', fontSize: 14 }}>—</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}