"use client";

// The team-level "group apps" drawer — reuses the slide-out shell, but instead
// of one agent's computer it lists the apps shared by the whole team
// (cluster / wiki / VoIP / Slack …).

import { BookOpen, Boxes, FolderClosed, MessageSquare, Phone } from "lucide-react";

import type { DemoApp, DemoTeam } from "@/lib/dashboard-demo";

const mono = "'JetBrains Mono', ui-monospace, monospace";

function icon(kind: DemoApp["kind"]) {
  switch (kind) {
    case "cluster": return <Boxes size={20} />;
    case "wiki": return <BookOpen size={20} />;
    case "voip": return <Phone size={20} />;
    case "slack": return <MessageSquare size={20} />;
    default: return <FolderClosed size={20} />;
  }
}

export function TeamAppsDrawer({ team, onClose }: { team: DemoTeam; onClose: () => void }) {
  return (
    <div style={{ width: 330, flex: "none", borderLeft: "1px solid rgba(255,255,255,.06)", background: "#0b0b0e", display: "flex", flexDirection: "column", minHeight: 0, animation: "cm-fade .25s ease" }}>
      <div style={{ padding: "16px 16px 12px", borderBottom: "1px solid rgba(255,255,255,.06)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: "#f3f3f5" }}>{team.name} · Shared apps</div>
            <div style={{ fontFamily: mono, fontSize: 10, color: "#5ec8d8" }}>● enabled for {team.agents.length} members</div>
          </div>
          <div onClick={onClose} style={{ width: 26, height: 26, borderRadius: 7, border: "1px solid rgba(255,255,255,.1)", display: "flex", alignItems: "center", justifyContent: "center", color: "#6a6a72", fontSize: 13, cursor: "pointer" }}>⤢</div>
        </div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", padding: 16 }}>
        <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".12em", color: "#5a5a62", marginBottom: 12 }}>GROUP APPLICATIONS</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {team.groupApps.map((a) => (
            <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 11px", borderRadius: 11, background: "#101014", border: "1px solid rgba(255,255,255,.06)" }}>
              <span style={{ width: 36, height: 36, borderRadius: 10, background: "#141417", border: "1px solid rgba(255,255,255,.08)", display: "flex", alignItems: "center", justifyContent: "center", color: "#cfcfd5" }}>{icon(a.kind)}</span>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: "#e6e6ea" }}>{a.name}</span>
              <span style={{ fontFamily: mono, fontSize: 9, color: "#5fd08a" }}>enabled</span>
            </div>
          ))}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 7, padding: "10px 11px", borderRadius: 11, border: "1.5px dashed rgba(255,255,255,.16)", color: "#ff6f61", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>
            <span style={{ fontSize: 15, lineHeight: 1 }}>+</span> Enable an app for the team
          </div>
        </div>
      </div>
    </div>
  );
}