import { AppShell } from "@/components/app-shell";
import { StatusBadge } from "@/components/status-badge";
import { SYSTEM_PERMISSIONS } from "@/lib/access";
import { rooms } from "@/lib/sample-data";

export default function AdminPage() {
  return (
    <AppShell active="Admin">
      <header className="topbar">
        <div className="title-block">
          <h1>Admin</h1>
          <p>Manage roles, rooms, permissions, and users.</p>
        </div>
        <StatusBadge tone="good">Admin</StatusBadge>
      </header>
      <section className="room-layout">
        <section className="panel">
          <div className="panel-header">
            <h2>Rooms</h2>
            <button className="button primary">Create room</button>
          </div>
          <div className="panel-body">
            <table className="table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Owner</th>
                  <th>Access</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {rooms.map((room) => (
                  <tr key={room.name}>
                    <td>{room.name}</td>
                    <td>{room.owner}</td>
                    <td>{room.visibility}</td>
                    <td>{room.status}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
        <section className="panel">
          <div className="panel-header">
            <h2>Permissions</h2>
            <StatusBadge>Roles</StatusBadge>
          </div>
          <div className="panel-body">
            {SYSTEM_PERMISSIONS.map((permission) => (
              <div className="row" key={permission}>
                <div className="row-title">
                  <strong>{permission}</strong>
                  <span>Assignable to roles</span>
                </div>
                <StatusBadge>Enabled</StatusBadge>
              </div>
            ))}
          </div>
        </section>
      </section>
    </AppShell>
  );
}