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

export default function Verifications({ verifications, pagination, filters }) {
    const { flash } = usePage().props;
    const processedMessages = useRef(new Set());
    
    const [verificationData, setVerificationData] = useState([]);

    // Handle flash messages from trait (simple format) - prevent duplicates
    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]);

    // Define columns for verification data
    const columns = [
        { key: 'sn', header: 'SN' },
        { key: 'property_title', header: 'Property' },
        { key: 'property_address', header: 'Address' },
        { key: 'verifier_name', header: 'Verified By' },
        { key: 'verification_date', header: 'Verification Date' },
        { key: 'documents_verified', header: 'Documents' },
        { key: 'notes', header: 'Notes' }
    ];

    useEffect(() => {
        setVerificationData(verifications || []);
    }, [verifications]);

    // Transform data for display
    const transformedData = verificationData.map(verification => ({
        ...verification,
        property_title: verification.property_title?.length > 30 
            ? `${verification.property_title.substring(0, 30)}...` 
            : verification.property_title || 'N/A',
        property_address: verification.property_address?.length > 40 
            ? `${verification.property_address.substring(0, 40)}...` 
            : verification.property_address || 'N/A',
        documents_verified: Array.isArray(verification.documents_verified) && verification.documents_verified.length > 0
            ? verification.documents_verified.join(', ')
            : 'N/A',
        notes: verification.notes?.length > 50 
            ? `${verification.notes.substring(0, 50)}...` 
            : verification.notes || 'N/A',
    }));

    const handlePageChange = (page) => {
        router.get('/admin/properties/verifications', { 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">Property Verifications</h4>
                            <p className="text-muted">View all property verification records</p>
                        </div>
                        <a 
                            href="/admin/properties/verifications/statistics" 
                            className="btn btn-info"
                        >
                            <i className="ti-bar-chart mr-2"></i>
                            View Statistics
                        </a>
                    </div>
                    <StyledTable
                        data={transformedData}
                        columns={columns}
                        title=""
                        noDataText="No verifications found"
                        disablePagination={true}
                        serverPagination={pagination}
                        onPageChange={handlePageChange}
                        itemType="verifications"
                        showEdit={false}
                    />
                </div>
            </div>
        </>
    );
}

