import Link from "next/link";
import {
  Activity,
  Database,
  Gauge,
  LogOut,
  MonitorPlay,
  Plus,
  Settings,
  Shield,
  User,
  UsersRound,
  Wifi
} from "lucide-react";
import { logoutUser } from "@/lib/user-actions";
import { Avatar } from "./avatar";
import { StatusBadge } from "./status-badge";
import { StatusDot } from "./ui";

type ShellRoom = {
  id: string;
  name: string;
  slug: string;
  href: string;
  visibility: string;
  participantCount: number;
  queueCount: number;
  isPersonal?: boolean;
};

export function AppShell({
  children,
  active = "Overview",
  isAdmin = false,
  userName,
  userAvatarUrl,
  instanceName = "WatchLink",
  rooms = [],
  pendingRequests = 0,
  activeRoomCount = 0
}: {
  children: React.ReactNode;
  active?: string;
  isAdmin?: boolean;
  userName?: string;
  userAvatarUrl?: string | null;
  instanceName?: string;
  rooms?: ShellRoom[];
  pendingRequests?: number;
  activeRoomCount?: number;
}) {
  const nav = [
    { href: "/dashboard", label: "Overview", icon: Gauge },
    { href: "/rooms", label: "Rooms", icon: MonitorPlay },
    { href: "/people", label: "People", icon: UsersRound },
    { href: "/activity", label: "Activity", icon: Activity }
  ];
  const visibleNav = isAdmin ? [...nav, { href: "/admin", label: "Admin", icon: Shield }] : nav;

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <Link className="brand" href="/dashboard">
          <span className="brand-mark" aria-hidden="true" />
          <span>{instanceName}</span>
        </Link>
        <nav className="nav-list" aria-label="Primary">
          {visibleNav.map((item) => {
            const Icon = item.icon;
            return (
              <Link key={item.href} href={item.href} className={`nav-item ${active === item.label ? "active" : ""}`}>
                <Icon size={17} />
                {item.label}
              </Link>
            );
          })}
        </nav>

        <section className="sidebar-section">
          <div className="sidebar-section-title">
            <span>Your Rooms</span>
            <Link href="/rooms" aria-label="Create or manage rooms">
              <Plus size={15} />
            </Link>
          </div>
          <div className="room-nav-list">
            {rooms.length === 0 ? (
              <div className="sidebar-empty">No rooms yet</div>
            ) : (
              rooms.slice(0, 6).map((room) => (
                <Link className="room-nav-item" href={room.href} key={room.id}>
                  <span>
                    <strong>{room.name}</strong>
                    <small>{room.visibility.toLowerCase().replace("_", " ")}</small>
                  </span>
                  <span className="room-nav-meta">
                    {room.queueCount > 0 ? <StatusBadge tone="info">Queued</StatusBadge> : <StatusBadge>Empty</StatusBadge>}
                    <small>{room.participantCount}</small>
                  </span>
                </Link>
              ))
            )}
          </div>
        </section>

        {userName ? (
          <div className="sidebar-user">
            <Avatar name={userName} src={userAvatarUrl} />
            <div className="row-title">
              <strong>{userName}</strong>
              <span>{isAdmin ? "Administrator" : "Member"}</span>
            </div>
            <details className="account-menu">
              <summary className="icon-button compact" aria-label="Account menu">
                <Settings size={15} />
              </summary>
              <div className="account-menu-popover">
                <Link href="/account/profile"><User size={15} /> Profile</Link>
                <Link href="/account/settings"><Settings size={15} /> Settings</Link>
                <Link href="/account/sessions"><Shield size={15} /> Sessions</Link>
                <form action={logoutUser}>
                  <button type="submit"><LogOut size={15} /> Logout</button>
                </form>
              </div>
            </details>
          </div>
        ) : null}

        <div className="instance-status">
          <StatusDot tone="good" label="App rendered" />
          <StatusDot tone="good" label="DB queried" />
          <StatusDot tone={activeRoomCount > 0 ? "info" : "neutral"} label={`${activeRoomCount} rooms with queue`} />
          {pendingRequests > 0 ? <StatusDot tone="warn" label={`${pendingRequests} requests`} /> : null}
          <div className="instance-metrics">
            <span>
              <Wifi size={13} /> Socket endpoint
            </span>
            <span>
              <Database size={13} /> v0.1.0
            </span>
          </div>
        </div>
      </aside>
      <main className="main">{children}</main>
    </div>
  );
}
