import { useFormik } from "formik";
import * as Yup from "yup";
import { useState, useEffect } from "react";
import Modal from "../../../components/Modals";
import Timeline from "../../../components/Timeline";
import Tabs from "../../../components/Tabs";
import api from '../../../api/axios';
import { toast } from 'react-toastify';

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
    data: any;
    id: any;
}

interface MaintenanceLog {
    id: string;
    action: string;
    changed_by: string;
    changed_by_name?: string;
    created_at: string;
}

interface TicketLog {
    id: string;
    ticket_no: string;
    description: string;
    status: string;
    raised_by: string;
    assigned_to?: string;
    created_at: string;
}

const ViewAsset = ({ open, onClose, onSave, data, id }: Props) => {
    const [maintenanceLogs, setMaintenanceLogs] = useState<MaintenanceLog[]>([]);
    const [assetInfo, setAssetInfo] = useState<any>(null);
    const [ticketLogs, setTicketLogs] = useState<TicketLog[]>([]);
    const [loading, setLoading] = useState(false);
    const [activeTab, setActiveTab] = useState("Maintenance_log");

    const tabData = [
        { id: 'Maintenance_log', label: 'Maintenance Log' },
        { id: 'ticket_log', label: 'Ticket Log' },
    ];

    // Fetch maintenance logs
    const fetchMaintenanceLogs = async () => {
        if (!data?.id && !id) return;
        const assetId = data?.id || id;
        setLoading(true);
        try {
            const response = await api.get(`/assets/maintenance-history/${assetId}`);
            if (response.data.status === 200) {
                const historyData = response.data.data?.history || [];
                setMaintenanceLogs(historyData);
                if (response.data.data?.asset) {
                    setAssetInfo(response.data.data.asset);
                }
            }
        } catch (error) {
            console.error("Error fetching maintenance logs:", error);
            toast.error("Failed to fetch maintenance history");
        } finally {
            setLoading(false);
        }
    };

    // Fetch ticket logs
    const fetchTicketLogs = async () => {
        if (!data?.id && !id) return;
        const assetId = data?.id || id;
        setLoading(true);
        try {
            const response = await api.get(`/tickets/${assetId}/ticket-logs`);
            if (response.data.status === 200) {
                const ticketData = response.data.data;
                setTicketLogs(Array.isArray(ticketData) ? ticketData : ticketData?.items || []);
            }
        } catch (error) {
            console.error("Error fetching ticket logs:", error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (open && (data?.id || id)) {
            fetchMaintenanceLogs();
            fetchTicketLogs();
        }

        // Reset states when modal closes
        if (!open) {
            setMaintenanceLogs([]);
            setTicketLogs([]);
            setAssetInfo(null);
        }
    }, [open, data?.id, id]);

    // Use either the passed data or fetched assetInfo
    const displayData =  data || assetInfo;

    // Don't render if modal is closed or no data
    if (!open) return null;
    if (!displayData) return null;

    // Transform maintenance logs for timeline
    const maintenanceTimelineData = (maintenanceLogs || []).map((log: MaintenanceLog) => ({
        date: new Date(log.created_at).toLocaleDateString('en-US', {
            day: 'numeric',
            month: 'short'
        }),
        time: new Date(log.created_at).toLocaleTimeString('en-US', {
            hour: '2-digit',
            minute: '2-digit'
        }),
        title: (
            <div className="flex items-center justify-between w-full">
                <div className="flex flex-col">
                    <label className="mb-0 font-medium">{log.changed_by_name || log.changed_by || 'System'}</label>
                    <label className="text-gray-500 text-xs">{log.action || 'Updated asset'}</label>
                </div>
                <div className="flex items-center gap-2 bg-blue-50 px-2 py-1 rounded">
                    <label className="mb-0 text-sm text-blue-500">Maintenance</label>
                </div>
            </div>
        )
    }));

    // Transform ticket logs for timeline
    const ticketTimelineData = (ticketLogs || []).map((ticket: TicketLog) => ({
        date: new Date(ticket.created_at).toLocaleDateString('en-US', {
            day: 'numeric',
            month: 'short'
        }),
        time: new Date(ticket.created_at).toLocaleTimeString('en-US', {
            hour: '2-digit',
            minute: '2-digit'
        }),
        title: (
            <div className="flex items-center justify-between w-full">
                <div className="flex flex-col">
                    <label className="mb-0 font-medium">{ticket.ticket_no || 'Ticket'}</label>
                    <label className="text-gray-500 text-xs">{ticket.description || 'No description'}</label>
                    <div className="flex items-center gap-1 mt-1">
                        <label className="text-gray-500 text-xs">Raised By:</label>
                        <label className="text-black text-xs">{ticket.raised_by || 'Unknown'}</label>
                    </div>
                    {ticket.assigned_to && (
                        <div className="flex items-center gap-1">
                            <label className="text-gray-500 text-xs">Assigned To:</label>
                            <label className="text-black text-xs">{ticket.assigned_to}</label>
                        </div>
                    )}
                </div>
                <div className={`px-2 py-1 text-sm rounded ${
                    ticket.status === 'Resolved' ? 'bg-green-50 text-green-500' :
                    ticket.status === 'In Progress' ? 'bg-yellow-50 text-yellow-500' :
                    ticket.status === 'Assigned' ? 'bg-pink-50 text-pink-500' :
                    'bg-blue-50 text-blue-500'
                }`}>
                    {ticket.status || 'Open'}
                </div>
            </div>
        )
    }));

    // Get status color
    const getStatusColor = (status: number) => {
        switch (status) {
            case 0: return "bg-green-50 text-green-500";
            case 1: return "bg-yellow-50 text-yellow-500";
            case 3: return "bg-red-50 text-red-500";
            default: return "bg-gray-50 text-gray-500";
        }
    };

    const getStatusText = (status: number) => {
        switch (status) {
            case 0: return "Working";
            case 1: return "Under Maintenance";
            case 3: return "Scrapped";
            default: return "Unknown";
        }
    };

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="View Assets"
            maxWidth="max-w-2xl"
        >
            <div className="grid grid-cols-12 gap-4">
                <div className="col-span-12 mb-2">
                    <div className="grid grid-cols-12">
                        <div className="col-span-9">
                            <label className="font-semibold text-lg text-primary mb-0">
                                {displayData.asset_name}
                            </label>
                        </div>
                        <div className="col-span-3 flex items-end justify-end">
                            <span className={`${getStatusColor(displayData.status)} px-3 text-sm py-1 rounded-full`}>
                                {displayData.status_text || getStatusText(displayData.status)}
                            </span>
                        </div>
                    </div>
                </div>

                <div className="col-span-4">
                    <div className="flex flex-col">
                        <label className="text-gray-500 text-sm mb-0">Category</label>
                        <label className="font-semibold text-sm mb-0">{displayData.category || 'N/A'}</label>
                    </div>
                </div>

                <div className="col-span-4">
                    <div className="flex flex-col">
                        <label className="text-gray-500 text-sm mb-0">Room</label>
                        <label className="font-semibold text-sm mb-0">{displayData.room || 'N/A'}</label>
                    </div>
                </div>

                <div className="col-span-4">
                    <div className="flex flex-col">
                        <label className="text-gray-500 text-sm mb-0">Purchase Date</label>
                        <label className="font-semibold text-sm mb-0">{displayData.purchase_date || 'N/A'}</label>
                    </div>
                </div>

                <div className="col-span-4">
                    <div className="flex flex-col">
                        <label className="text-gray-500 text-sm mb-0">Assigned To</label>
                        <label className="font-semibold text-sm mb-0">{displayData.assigned_to || 'Not Assigned'}</label>
                    </div>
                </div>

                <div className="col-span-8">
                    <div className="flex flex-col">
                        <label className="text-gray-500 text-sm mb-0">Warranty</label>
                        <label className="font-semibold text-sm mb-0">{displayData.warranty || 'N/A'}</label>
                    </div>
                </div>

                {displayData.description && (
                    <div className="col-span-12">
                        <div className="flex flex-col">
                            <label className="text-gray-500 text-sm mb-0">Description</label>
                            <label className="font-semibold text-sm mb-0">{displayData.description}</label>
                        </div>
                    </div>
                )}

                <div className="col-span-12 border-b"></div>

                <div className='col-span-12 mb-4'>
                    <Tabs
                        tabs={tabData}
                        defaultTab="Maintenance_log"
                        onChange={(tabId) => {
                            setActiveTab(tabId);
                        }}
                    />
                </div>

                <div className='col-span-12'>
                    {activeTab === "Maintenance_log" && (
                        <div className='grid grid-cols-12 gap-5'>
                            <div className="col-span-12 pb-5 max-h-[400px] overflow-y-auto">
                                {loading ? (
                                    <div className="text-center py-4">
                                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
                                        <p className="mt-2 text-gray-500">Loading...</p>
                                    </div>
                                ) : maintenanceTimelineData.length === 0 ? (
                                    <div className="text-center py-8 text-gray-500">
                                        No maintenance logs found
                                    </div>
                                ) : (
                                    <Timeline items={maintenanceTimelineData} />
                                )}
                            </div>
                        </div>
                    )}

                    {activeTab === "ticket_log" && (
                        <div className='grid grid-cols-12 gap-5'>
                            <div className="col-span-12 pb-5 max-h-[400px] overflow-y-auto">
                                {loading ? (
                                    <div className="text-center py-4">
                                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
                                        <p className="mt-2 text-gray-500">Loading...</p>
                                    </div>
                                ) : ticketTimelineData.length === 0 ? (
                                    <div className="text-center py-8 text-gray-500">
                                        No ticket logs found
                                    </div>
                                ) : (
                                    <Timeline items={ticketTimelineData} />
                                )}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </Modal>
    );
};

export default ViewAsset;