import {
  Shield,
  Users,
  BriefcaseBusiness,
  Settings2,
  ListFilter
} from "lucide-react";
import { AppLayout } from "@/components/layout/AppLayout";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { InternalTeamTab } from "@/features/users/components/InternalTeamTab";
import { PartnerAdminTab } from "@/features/users/components/PartnerAdminTab";
import { UserBaseTab } from "@/features/users/components/UserBaseTab";
import { RoleMatrix } from "@/features/users/components/RoleMatrix";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

export default function Users() {
  return (
    <AppLayout title="Command Center" description="Unified team, partner, and user management.">
      <div className="space-y-6 container mx-auto p-2 md:p-4">

        <Tabs defaultValue="internal" className="w-full space-y-6">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">

            {/* Main Navigation Tabs */}
            <TabsList className="grid grid-cols-3 w-full md:w-[600px] h-11 bg-secondary/50 border border-border/50">
              <TabsTrigger value="internal" className="data-[state=active]:bg-background data-[state=active]:shadow-sm">
                <Shield className="h-4 w-4 mr-2" />
                Internal Team
              </TabsTrigger>
              <TabsTrigger value="partners" className="data-[state=active]:bg-background data-[state=active]:shadow-sm">
                <BriefcaseBusiness className="h-4 w-4 mr-2" />
                Partners
              </TabsTrigger>
              <TabsTrigger value="users" className="data-[state=active]:bg-background data-[state=active]:shadow-sm">
                <Users className="h-4 w-4 mr-2" />
                User Base
              </TabsTrigger>
            </TabsList>

            {/* Quick Actions (Role Manager) */}
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="outline" className="gap-2 border-dashed border-primary/40 hover:border-primary text-primary hover:bg-primary/5">
                  <Settings2 className="h-4 w-4" />
                  Manage Roles & Permissions
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="min-w-[400px] md:min-w-[800px] sm:w-[80vw] overflow-y-auto">
                <SheetHeader className="mb-6">
                  <SheetTitle>Role Permissions Matrix</SheetTitle>
                  <SheetDescription>Verify and modify capabilities for each internal system role.</SheetDescription>
                </SheetHeader>
                <RoleMatrix />
              </SheetContent>
            </Sheet>
          </div>

          <div className="min-h-[600px] rounded-xl border border-border/40 bg-card/30 p-1">
            <div className="h-full bg-background/50 rounded-lg p-4 md:p-6 shadow-sm">
              <TabsContent value="internal" className="m-0 focus-visible:outline-none animate-in fade-in-50 duration-300">
                <InternalTeamTab />
              </TabsContent>

              <TabsContent value="partners" className="m-0 focus-visible:outline-none animate-in fade-in-50 duration-300">
                <PartnerAdminTab />
              </TabsContent>

              <TabsContent value="users" className="m-0 focus-visible:outline-none animate-in fade-in-50 duration-300">
                <UserBaseTab />
              </TabsContent>
            </div>
          </div>
        </Tabs>
      </div>
    </AppLayout>
  );
}