import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import { useGetNotifciationsQuery } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import moment from 'moment';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Button, Card, Col, Container, Row, Spinner } from 'react-bootstrap';

export default function Notification() {
  const [visibleCount, setVisibleCount] = useState(10);
  const { data: session }: any = useSession();
  const token = session?.user?.token;

  const {
    data: GetNotification,
    isLoading,
  } = useGetNotifciationsQuery({
    token,
  });

  const notifications = GetNotification?.data?.notifications || [];

  const handleShowMore = () => {
    setVisibleCount((prev) => prev + 10);
  };

  return (
    <WebsiteLayout>
      <Container fluid className="py-4">
        {isLoading ? (
          <div className="d-flex justify-content-center align-items-center" style={{ minHeight: "60vh" }}>
            <Spinner animation="border" className="custom-spinner" />
          </div>
        ) : (
          <div>
           

            <Row className="justify-content-center">
              <Col lg="8" md="10">
               <h2 className="heading mb-4">Notifications</h2>
                {notifications.length > 0 ? (
                  <Card className="shadow-sm rounded-3 border-0">
                    <Card.Body>
                      {notifications.slice(0, visibleCount).map((data: any, index: number) => (
                        <div 
                          key={index} 
                          className={`d-flex align-items-start p-3 rounded-3 mb-2 ${!data?.isRead ? "bg-light" : "bg-white"}`} 
                          style={{ border: "1px solid #f1f1f1", cursor: "pointer" }}
                        >
                         
                          <div style={{ flex: 1 }}>
                            <h6 className={`mb-1 ${!data?.isRead ? "fw-bold text-dark" : "text-muted"}`}>
                              {data?.body}
                            </h6>
                            <small className="text-secondary">
                              {moment(data?.createdAt).fromNow()}
                            </small>
                          </div>
                          {!data?.isRead && <span className="badge bg-danger rounded-circle" style={{ width: "10px", height: "10px" }}></span>}
                        </div>
                      ))}
                    </Card.Body>
                  </Card>
                ) : (
                  <div className="text-center py-5">
                    <img src="/images/empty-state.svg" alt="No notifications" width="200" className="mb-3" />
                    <h5 className="fw-bold">You're all caught up!</h5>
                    <p className="text-muted">No new notifications right now.</p>
                  </div>
                )}

                {/* Show More Button */}
                {visibleCount < notifications.length && (
                  <div className="text-center mt-3">
                    <Button variant="primary" onClick={handleShowMore}>
                      Show More
                    </Button>
                  </div>
                )}
              </Col>
            </Row>
          </div>
        )}
      </Container>
    </WebsiteLayout>
  );
}