import React, { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import RoleManagement from '@/components/roles/RoleManagement';
import { Shield, Building2, Utensils, Store } from 'lucide-react';

const RolesPermissions = () => {
  const [activeTab, setActiveTab] = useState('admin');

  return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center gap-3 mb-6">
          <Shield className="w-8 h-8 text-primary" />
          <div>
            <h1 className="text-3xl font-bold">Roles & Permissions</h1>
            <p className="text-muted-foreground">Manage access control for all entity types</p>
          </div>
        </div>

        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-4 lg:w-auto">
            <TabsTrigger value="admin" className="flex items-center gap-2">
              <Shield className="w-4 h-4" />
              Admin
            </TabsTrigger>
            <TabsTrigger value="hotel" className="flex items-center gap-2">
              <Building2 className="w-4 h-4" />
              Hotel
            </TabsTrigger>
            <TabsTrigger value="restaurant" className="flex items-center gap-2">
              <Utensils className="w-4 h-4" />
              Restaurant
            </TabsTrigger>
            <TabsTrigger value="commerce" className="flex items-center gap-2">
              <Store className="w-4 h-4" />
              Commerce
            </TabsTrigger>
          </TabsList>

          <TabsContent value="admin">
            <RoleManagement entityType="admin" />
          </TabsContent>

          <TabsContent value="hotel">
            <RoleManagement entityType="hotel" />
          </TabsContent>

          <TabsContent value="restaurant">
            <RoleManagement entityType="restaurant" />
          </TabsContent>

          <TabsContent value="commerce">
            <RoleManagement entityType="commerce" />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
};

export default RolesPermissions;