import StyledTable from "@/Components/Admin/ui/StyledTable";
import { useEffect, useState, useRef } from "react";
import { Link, router, usePage } from '@inertiajs/react';
import { toast, Toaster } from "react-hot-toast";

export default function PendingReports({ reports, pagination }) {
    const { flash } = usePage().props;
    const processedMessages = useRef(new Set());
    
    const [reportData, setReportData] = useState([]);

    useEffect(() => {
        if (flash?.success) {
            const message = typeof flash.success === 'object' ? flash.success.message : flash.success;
            if (message && !processedMessages.current.has(`success-${message}`)) {
                toast.success(message);
                processedMessages.current.add(`success-${message}`);
            }
        }
        if (flash?.error) {
            const message = typeof flash.error === 'object' ? flash.error.message : flash.error;
            if (message && !processedMessages.current.has(`error-${message}`)) {
                toast.error(message);
                processedMessages.current.add(`error-${message}`);
            }
        }
    }, [flash]);

    useEffect(() => {
        setReportData(reports || []);
    }, [reports]);

    const columns = [
        { key: 'sn', header: 'SN' },
        { key: 'reporter_name', header: 'Reporter' },
        { key: 'reported_item_type', header: 'Item Type' },
        { key: 'reason', header: 'Reason' },
        { key: 'description', header: 'Description' },
        { key: 'status', header: 'Status' },
        { key: 'created_at', header: 'Date' }
    ];

    const transformedData = reportData.map(report => ({
        ...report,
        description: report.description?.length > 50 
            ? `${report.description.substring(0, 50)}...` 
            : report.description || 'N/A',
        status: (
            <span className={`badge badge-${report.status_badge || 'warning'}`}>
                {report.status?.charAt(0).toUpperCase() + report.status?.slice(1) || 'Pending'}
            </span>
        ),
    }));

    const handlePageChange = (page) => {
        router.get('/admin/reports/pending', { page }, { preserveState: true, preserveScroll: true });
    };

    return (
        <>
            <Toaster />
            <div className="row">
                <div className="col-lg-12 mt-4">
                    <div className="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h4 className="header-title">Pending Reports</h4>
                            <p className="text-muted">Reports awaiting review</p>
                        </div>
                        <div>
                            <Link href="/admin/reports" className="btn btn-secondary mr-2">
                                <i className="ti-list mr-2"></i>
                                All Reports
                            </Link>
                            <Link href="/admin/reports/statistics" className="btn btn-info">
                                <i className="ti-bar-chart mr-2"></i>
                                Statistics
                            </Link>
                        </div>
                    </div>
                    {reportData.length === 0 ? (
                        <div className="alert alert-success">
                            <i className="ti-check mr-2"></i>
                            No pending reports at the moment.
                        </div>
                    ) : (
                        <StyledTable
                            data={transformedData}
                            columns={columns}
                            title=""
                            noDataText="No pending reports found"
                            disablePagination={true}
                            serverPagination={pagination}
                            onPageChange={handlePageChange}
                            itemType="reports"
                            showEdit={false}
                        />
                    )}
                </div>
            </div>
        </>
    );
}

