"use client";

import { useState, useEffect } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AnnouncementForm } from "./announcement-form";
import { AnnouncementsList } from "./announcements-list";
import { AnnouncementsDropdown } from "./announcements-dropdown";

interface AnnouncementsPageProps {
  userRole: string | string[];
}

export function AnnouncementsPage({ userRole = [] }: AnnouncementsPageProps) {
  const roles = Array.isArray(userRole) ? userRole : [userRole];
  
  // Check if user has admin, entrepreneurship, or communication role
  const hasAdminAccess = roles.some(role => 
    ["admin", "entrepreneurship", "communication"].includes(role)
  );

  if (!hasAdminAccess) {
    // For regular users, just show the dropdown
    return (
      <div className="flex flex-col">
        <h1 className="text-2xl font-bold mb-6">Announcements</h1>
        <AnnouncementsDropdown />
      </div>
    );
  }

  // For users with admin access, show the full UI with tabs
  return (
    <div className="flex flex-col">
      <h1 className="text-2xl font-bold mb-6">Announcements Management</h1>
      
      <Tabs defaultValue="list">
        <div className="flex justify-between items-center mb-8">
          <TabsList className="bg-gray-200 border-0">
            <TabsTrigger 
              value="list"
              className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-700"
            >
              All Announcements
            </TabsTrigger>
            <TabsTrigger 
              value="create"
              className="data-[state=active]:bg-blue-600 data-[state=active]:text-white text-gray-700"
            >
              Create Announcement
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="list">
          <AnnouncementsList userRole={roles} />
        </TabsContent>
        
        <TabsContent value="create">
          <AnnouncementForm userRole={roles} />
        </TabsContent>
      </Tabs>
    </div>
  );
}