"use client";
import { useEffect } from "react";
import { useAuth } from "@/hooks/use-auth";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowLeft, Users, Globe, UserPlus, Mail, Clock } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { useRouter } from "next/navigation";
import Head from "next/head";
import Link from "next/link";
import { USER_TYPE } from "@/lib/constants";

const SocialDashboard = () => {
  const { user } = useAuth();
  const navigate = useRouter();

  // Redirect if not an attendant or admin
  useEffect(() => {
    if (
      user &&
      user.userType !== USER_TYPE.ATTENDANT &&
      user.userType !== USER_TYPE.ADMIN
    ) {
      navigate.push("/");
    }
  }, [user, navigate]);

  // Mock data for demo purposes
  const attendants = [
    {
      id: 1,
      name: "Oluwaseun Adeyemi",
      role: "Historical Research Specialist",
      image: undefined,
      online: true,
    },
    {
      id: 2,
      name: "Folake Bankole",
      role: "Cultural Heritage Curator",
      image: undefined,
      online: false,
    },
    {
      id: 3,
      name: "Chinedu Okonkwo",
      role: "Educational Programs Director",
      image: undefined,
      online: true,
    },
    {
      id: 4,
      name: "Admin User",
      role: "Museum Administrator",
      image: undefined,
      online: true,
    },
  ];

  const groups = [
    {
      id: 1,
      name: "Educational Outreach",
      members: 5,
      description:
        "Coordinating educational programs for schools and universities",
    },
    {
      id: 2,
      name: "Artifact Documentation",
      members: 3,
      description: "Cataloging and preserving historical artifacts",
    },
    {
      id: 3,
      name: "Museum Guides",
      members: 8,
      description: "Sharing best practices for guided tours",
    },
  ];

  const messages = [
    {
      id: 1,
      from: "Folake Bankole",
      subject: "New West African Artifacts",
      time: "2 hours ago",
      read: false,
    },
    {
      id: 2,
      from: "Museum Director",
      subject: "Monthly Staff Meeting",
      time: "Yesterday",
      read: true,
    },
    {
      id: 3,
      from: "Educational Department",
      subject: "School Visit Preparation",
      time: "3 days ago",
      read: true,
    },
  ];

  const events = [
    {
      id: 1,
      title: "Artifact Preservation Workshop",
      date: "July 15, 2023",
      time: "10:00 AM - 2:00 PM",
      location: "Conservation Room",
    },
    {
      id: 2,
      title: "Staff Training: Digital Cataloging",
      date: "July 22, 2023",
      time: "9:00 AM - 12:00 PM",
      location: "Conference Room",
    },
    {
      id: 3,
      title: "Museum Guide Meeting",
      date: "July 30, 2023",
      time: "3:00 PM - 4:30 PM",
      location: "Main Hall",
    },
  ];

  return (
    <>
      <Head>
        <title>Social Networking | Badagry Museum</title>
        <meta name="robots" content="noindex, nofollow" />
      </Head>

      <section className="">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-8">
            <Link href="/dashboard">
              <Button
                variant="ghost"
                className="text-primary hover:text-primary-dark"
              >
                <ArrowLeft className="mr-2 h-4 w-4" /> Back to Dashboard
              </Button>
            </Link>
          </div>

          <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <div>
              <h1 className="text-3xl font-bold text-primary font-heading">
                Social Networking
              </h1>
              <p className="text-gray-600">
                Connect with other attendants, join groups, and share knowledge
              </p>
            </div>
          </div>

          <Tabs defaultValue="people">
            <TabsList className="mb-6 bg-white">
              <TabsTrigger value="people">People</TabsTrigger>
              <TabsTrigger value="groups">Groups</TabsTrigger>
              <TabsTrigger value="messages">Messages</TabsTrigger>
              <TabsTrigger value="events">Events</TabsTrigger>
            </TabsList>

            <TabsContent value="people">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Users className="h-5 w-5 mr-2 text-primary" />
                    Museum Attendants
                  </CardTitle>
                  <CardDescription>
                    Connect and collaborate with other museum staff
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {attendants.map((attendant) => (
                      <Card
                        key={attendant.id}
                        className="hover:shadow-md transition-shadow"
                      >
                        <CardContent className="p-6">
                          <div className="flex items-center space-x-4">
                            <div className="relative">
                              <Avatar className="h-14 w-14">
                                <AvatarImage
                                  src={attendant.image}
                                  alt={attendant.name}
                                />
                                <AvatarFallback className="bg-primary-light text-white text-lg">
                                  {attendant.name.charAt(0)}
                                </AvatarFallback>
                              </Avatar>
                              {attendant.online && (
                                <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-white"></div>
                              )}
                            </div>
                            <div className="flex-1">
                              <h3 className="font-medium">{attendant.name}</h3>
                              <p className="text-sm text-muted-foreground">
                                {attendant.role}
                              </p>
                              <div className="mt-2 flex space-x-2">
                                <Button
                                  variant="outline"
                                  size="sm"
                                  className="text-primary border-primary hover:bg-primary/10 text-xs px-2"
                                >
                                  <Mail className="h-3 w-3 mr-1" /> Message
                                </Button>
                                <Button
                                  variant="outline"
                                  size="sm"
                                  className="text-primary border-primary hover:bg-primary/10 text-xs px-2"
                                >
                                  <UserPlus className="h-3 w-3 mr-1" /> Connect
                                </Button>
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="groups">
              <Card>
                <CardHeader>
                  <div className="flex justify-between items-center">
                    <div className="flex items-center">
                      <Globe className="h-5 w-5 mr-2 text-primary" />
                      <CardTitle>Professional Groups</CardTitle>
                    </div>
                    <Button className="bg-primary hover:bg-primary-dark">
                      <UserPlus className="h-4 w-4 mr-2" /> Create Group
                    </Button>
                  </div>
                  <CardDescription>
                    Join professional groups to collaborate and share knowledge
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {groups.map((group) => (
                      <Card
                        key={group.id}
                        className="hover:shadow-md transition-shadow"
                      >
                        <CardContent className="p-6">
                          <h3 className="font-medium text-lg mb-2">
                            {group.name}
                          </h3>
                          <p className="text-sm text-muted-foreground mb-2">
                            {group.description}
                          </p>
                          <div className="flex items-center text-sm text-muted-foreground mb-4">
                            <Users className="h-4 w-4 mr-1" />
                            <span>{group.members} members</span>
                          </div>
                          <Button className="w-full bg-primary hover:bg-primary-dark">
                            Join Group
                          </Button>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="messages">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Mail className="h-5 w-5 mr-2 text-primary" />
                    Messages
                  </CardTitle>
                  <CardDescription>
                    Your private messages and notifications
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="divide-y">
                    {messages.map((message) => (
                      <div
                        key={message.id}
                        className={`py-4 hover:bg-muted/20 px-2 -mx-2 rounded cursor-pointer flex items-center justify-between ${
                          !message.read ? "font-medium" : ""
                        }`}
                      >
                        <div>
                          <h3
                            className={`${!message.read ? "text-primary" : ""}`}
                          >
                            {message.from}
                          </h3>
                          <p className="text-sm text-muted-foreground">
                            {message.subject}
                          </p>
                        </div>
                        <div className="text-right">
                          <p className="text-xs text-muted-foreground">
                            {message.time}
                          </p>
                          {!message.read && (
                            <div className="h-2 w-2 rounded-full bg-primary ml-auto mt-1"></div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                  <div className="mt-4 text-center">
                    <Button
                      variant="outline"
                      className="text-primary border-primary hover:bg-primary/10"
                    >
                      View All Messages
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="events">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Clock className="h-5 w-5 mr-2 text-primary" />
                    Upcoming Events
                  </CardTitle>
                  <CardDescription>
                    Workshops, meetings, and professional development
                    opportunities
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {events.map((event) => (
                      <Card
                        key={event.id}
                        className="hover:shadow-md transition-shadow"
                      >
                        <CardContent className="p-6">
                          <h3 className="font-medium text-lg mb-2">
                            {event.title}
                          </h3>
                          <div className="space-y-2 text-sm">
                            <div className="flex items-center text-muted-foreground">
                              <Clock className="h-4 w-4 mr-2" />
                              <span>
                                {event.date}, {event.time}
                              </span>
                            </div>
                            <div className="flex items-center text-muted-foreground">
                              <Globe className="h-4 w-4 mr-2" />
                              <span>{event.location}</span>
                            </div>
                          </div>
                          <div className="mt-4 flex space-x-2">
                            <Button className="bg-primary hover:bg-primary-dark">
                              Attend
                            </Button>
                            <Button variant="outline">More Info</Button>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>

          <div className="mt-8 bg-white p-6 rounded-lg shadow">
            <p className="text-center text-muted-foreground">
              This is a placeholder for the social networking feature. In a full
              implementation, this would connect to an API for real-time
              messaging, group management, and event coordination.
            </p>
          </div>
        </div>
      </section>
    </>
  );
};

export default SocialDashboard;
