frontend/src/pages/admin-pages/AdminFeedPage.js

import { Container, Row, Col, Card, Button, Modal } from "react-bootstrap";
import AdminTemplate from "../../templates/AdminTemplate";
import axios from 'axios';
import { useNavigate } from "react-router-dom";
import DataStorage from "../../organisms/DataStorage";
import { useEffect, useState } from "react";

export default function AdminFeedPage() {

    const navigate = useNavigate();

    useEffect(() => {
        if (!DataStorage.get('isLoggedInAdmin')) {
            navigate('/admin-login');
        }
    }, [navigate]);

    const [feeds, setFeeds] = useState([]);
    const [loading, setLoading] = useState(true);

    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [selectedFeedId, setSelectedFeedId] = useState(null);

    // Mở modal và lưu trữ id của bài đăng cần xóa
    const handleShowDeleteModal = (feedId) => {
        setSelectedFeedId(feedId);
        setShowDeleteModal(true);
    };

    // Đóng modal
    const handleCloseDeleteModal = () => {
        setShowDeleteModal(false);
        setSelectedFeedId(null);
    };

    const confirmDelete = async () => {
        if (selectedFeedId) {
            axios.delete(process.env.REACT_APP_API_URL + `/feeds/${selectedFeedId}`)
                .then((response) => {
                    handleCloseDeleteModal(); // Đóng modal sau khi xóa
                    window.location.reload(); // Load lại trang
                })
                .catch((error) => console.error("Xóa bài đăng thất bại:", error))
        }
    };

    useEffect(() => {
        axios.get(process.env.REACT_APP_API_URL + '/feeds?limit=100')
            .then((response) => {
                setFeeds(response.data.data);
                setLoading(false);
            })
            .catch((error) => {
                console.log(error);
            })
    }, []);

    function truncateText(text, maxLength = 120) {
        if (text.length <= maxLength) {
            return text;
        }
        return text.slice(0, maxLength) + '...Xem thêm';
    }

    function formatDate(isoDateString) {
        const date = new Date(isoDateString);
        const options = {
            year: 'numeric',
            month: 'numeric',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        };
        return date.toLocaleDateString('vi-VN', options);
    }

    let feedContent;

    if (loading) {
        feedContent = (<p>Đang tải danh sách bài đăng...</p>);
    } else {
        feedContent = (
            <Container fluid className="d-flex text-center align-items-center justify-content-center">
                <Row style={{ maxWidth: "90vw" }} className="d-flex align-items-center justify-content-center text-center">

                    <Col xs="12" md='8' className="text-center">
                        <h2 className="text-center mb-4">Danh sách các bài đăng trên trang chủ</h2>
                    </Col>

                    <Col xs="12" md='4' className="text-center mb-4">
                        <Button className="m-3" as='a' href='/admin-news'>
                            Tạo bài đăng mới
                        </Button>
                    </Col>

                    {feeds.map((item, idx) => (
                        <Col xs="12" md="10" lg="8" key={idx} className="m-3 text-center">
                            <Card as='a' href={`/admin-news?id=${item.id}`} className="shadow-sm" style={{ display: 'flex', flexDirection: 'row', height: '200px' }}>
                                <Card.Img
                                    variant="left"
                                    src={item.image_url}
                                    style={{ width: '150px', objectFit: 'cover' }}
                                />
                                <Card.Body>
                                    <Row style={{ height: '100px' }}>
                                        <Col xs={12} md={12} className="d-flex align-items-center">
                                            <Card.Title>{item.title}</Card.Title>
                                        </Col>
                                        <Col xs={12} md={12} className="d-flex align-items-center my-3">
                                            <Card.Text>{truncateText(item.description)}</Card.Text>
                                        </Col>
                                        <Col xs={12} md={6} className="d-flex align-items-center">
                                            <Card.Text>Tác giả: {item.author_id ? item.author_id : 'Không rõ'}</Card.Text>
                                        </Col>
                                        <Col xs={12} md={6} className="d-flex align-items-center">
                                            <Card.Text>Thời gian tạo: {formatDate(item.create_at)}</Card.Text>
                                        </Col>
                                        <Col xs={12} className="d-flex justify-content-end">
                                            <Button
                                                variant="outline-danger"
                                                size="sm"
                                                onClick={(e) => {
                                                    e.preventDefault(); // Ngăn link href
                                                    handleShowDeleteModal(item.id);
                                                }}
                                            >
                                                Xóa
                                            </Button>
                                        </Col>
                                    </Row>
                                </Card.Body>
                            </Card>
                        </Col>
                    ))}
                </Row>
            </Container>
        );
    }

    return (
        <AdminTemplate content={
            (
                <Container className='d-flex text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>

                    {/* Modal xác nhận xóa */}
                    <Modal show={showDeleteModal} onHide={handleCloseDeleteModal}>
                        <Modal.Header closeButton>
                            <Modal.Title>Xác nhận xóa</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>Bạn có chắc chắn muốn xóa bài đăng này không?</Modal.Body>
                        <Modal.Footer>
                            <Button variant="secondary" onClick={handleCloseDeleteModal}>
                                Hủy
                            </Button>
                            <Button variant="danger" onClick={confirmDelete}>
                                Xóa
                            </Button>
                        </Modal.Footer>
                    </Modal>

                    {feedContent}
                </Container>
            )
        } />
    );
}