'use client';
import React, { useState, useEffect } from 'react';
// import CommonImage from '../common/CommonImage';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  DropdownMenuItem,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';
import { Skeleton } from '@/components/ui/skeleton';
import { Badge } from '@/components/ui/badge';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import CommonImage from '@/components/common/CommonImage';
const Notifications: React.FC = () => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 1500); // simulate loading
    return () => clearTimeout(timer);
  }, []);
  const allRenderCard = () => {
    return (
      <>
        <Text className="notification-scroll-widget">
          {loading ? (
            [...Array(5)].map((_, idx) => (
              <Skeleton
                key={idx}
                className="h-[100px] w-full rounded-xl mb-4"
              />
            ))
          ) : (
            <>
              {/* Card 1 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  A Lead Follow-up Has Been Added
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  You have a follow-up scheduled on
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-alert type-icon">
                    Type : Alert
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
              {/* Card 2 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  Multiple Leads Have Been Assigned
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  Lorem Ipsum is simply dummy text of the printing 1500s
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-task type-icon">
                    Type : Task
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
              {/* Card 3 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  A Lead Has Been Assigned
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  Lorem Ipsum is simply dummy text of the printing 1500s
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-message type-icon">
                    Type : Message
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
              {/* Card 4 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  Multiple Leads Have Been Assigned
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  # Lorem Ipsum is simply dummy text of the printing 1500s
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-reminder type-icon">
                    Type : Reminder
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
              {/* Card 5 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  Multiple Leads Have Been Assigned
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  # Lorem Ipsum is simply dummy text of the printing 1500s
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-reminder type-icon">
                    Type : Reminder
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
            </>
          )}
        </Text>
        <Text className="flex justify-between p-2 notifications-button-widget">
          <Button className="view-more">View More</Button>
          <Button className="mark-read">Mark all as read</Button>
        </Text>
      </>
    );
  };
  const alertRenderCard = () => {
    return (
      <>
        <Text className="notification-scroll-widget">
          {loading ? (
            [...Array(5)].map((_, idx) => (
              <Skeleton
                key={idx}
                className="h-[100px] w-full rounded-xl mb-4"
              />
            ))
          ) : (
            <>
              {/* Card 1 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  Alert A Lead Follow-up Has Been Added
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  You have a follow-up scheduled on
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-alert type-icon">
                    Type : Alert
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
              {/* Card 2 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  Multiple Leads Have Been Assigned
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  Lorem Ipsum is simply dummy text of the printing 1500s
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-task type-icon">
                    Type : Task
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
              {/* Card 3 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  A Lead Has Been Assigned
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  Lorem Ipsum is simply dummy text of the printing 1500s
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-message type-icon">
                    Type : Message
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
              {/* Card 4 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  Multiple Leads Have Been Assigned
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  # Lorem Ipsum is simply dummy text of the printing 1500s
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-reminder type-icon">
                    Type : Reminder
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
              {/* Card 5 */}
              <Card className="rounded-none mb-4 notification-data-box cursor-pointer relative pt-1 pb-1 pr-1 pl-1">
                <CardHeader className="heading pl-1 pr-1 pt-0 pb-0">
                  Multiple Leads Have Been Assigned
                </CardHeader>
                <CardContent className="space-y-2 description-data pt-1 pb-0 pl-1">
                  # Lorem Ipsum is simply dummy text of the printing 1500s
                </CardContent>
                <CardFooter className="flex justify-between p-2 pb-0 pt-1 m-0">
                  <Text className="notification-type type-reminder type-icon">
                    Type : Reminder
                  </Text>
                  <Text className="date-time">13-5-2025 12:29</Text>
                </CardFooter>
              </Card>
            </>
          )}
        </Text>
        <Text className="flex justify-between p-2">
          <Button>View More</Button>
          <Button>Mark all as read</Button>
        </Text>
      </>
    );
  };
  return (
    <Text>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Text className="mt notifications-icon cursor-pointer relative">
            <CommonImage
              src="/header/notifications-icon.webp"
              classname="icon mr-3"
              alt="Notifications"
              width={20}
              height={18}
            />
            <Badge variant="outline" className="notification-badge">
              13
            </Badge>
          </Text>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="p-4 pt-2 pb-2 notifications-container w-[500px]">
          <Text className="flex justify-between items-center mb-2">
            <Text className="font-bold" size="xl">
              Notifications
            </Text>
            <DropdownMenuItem asChild>
              <Button
                className="cursor-pointer notifications-close-icon-btn"
                variant="ghost"
                size="sm"
              >
                <CommonImage
                  src="/main/cross-arrow.webp"
                  classname="Notifications-icon"
                  alt="Notifications"
                  width={12}
                  height={12}
                />
              </Button>
            </DropdownMenuItem>
          </Text>
          <Tabs defaultValue="all-notifications" className="w-full">
            <TabsList className="grid w-full grid-cols-5 bg-transparent tab-button-notification mb-4 pb-4">
              <TabsTrigger value="all-notifications">All</TabsTrigger>
              <TabsTrigger value="alert-notifications">Alert</TabsTrigger>
              <TabsTrigger value="task-notifications">Task</TabsTrigger>
              <TabsTrigger value="message-notifications">Message</TabsTrigger>
              <TabsTrigger value="reminder-notifications">Reminder</TabsTrigger>
            </TabsList>
            <TabsContent value="all-notifications">
              {allRenderCard()}
            </TabsContent>
            <TabsContent value="alert-notifications" className="mt-4">
              {alertRenderCard()}
            </TabsContent>
            <TabsContent value="task-notifications" className="mt-4">
              Task
            </TabsContent>
            <TabsContent value="message-notifications" className="mt-4">
              Message
            </TabsContent>
            <TabsContent value="reminder-notifications" className="mt-4">
              Reminder
            </TabsContent>
          </Tabs>
        </DropdownMenuContent>
      </DropdownMenu>
    </Text>
  );
};
export default Notifications;