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 api from '../../../api/axios';
import { toast } from 'react-toastify';

interface Props {
    open: boolean;
    onClose: () => void;
    onSave: (data: any) => void;
    data: any; // This should contain stock/material data with id
}

interface Assignment {
    id: string;
    student_id: string;
    student_name: string;
    student_roll_no?: string;
    class_name?: string;
    section?: string;
    assigned_date: string;
    quantity?: number;
    status?: string;
    created_by: string;
    created_at: string;
    created_by_name?: string;
}

const ViewStock = ({ open, onClose, onSave, data }: Props) => {
    const [assignments, setAssignments] = useState<Assignment[]>([]);
    const [loading, setLoading] = useState(false);
    const [pagination, setPagination] = useState({
        current_page: 1,
        last_page: 1,
        per_page: 10,
        total: 0
    });

    // Debug: Log the data to see what your API is returning
    console.log('Full data object:', data);
    console.log('Stock ID:', data?.id);

    // Fetch student assignments for this stock item
    const fetchAssignments = async () => {
        if (!data?.id) return;

        setLoading(true);
        try {
            const response = await api.get(`/inventory/${data.id}/assignments`, {
                params: {
                    page: pagination.current_page,
                    per_page: pagination.per_page
                }
            });

            if (response.data.status === 200) {
                setAssignments(response.data.data.items || response.data.data || []);
                setPagination({
                    current_page: response.data.data.current_page || 1,
                    last_page: response.data.data.last_page || 1,
                    per_page: response.data.data.per_page || 10,
                    total: response.data.data.total || 0
                });
            }
        } catch (error) {
            console.error("Error fetching assignments:", error);
            toast.error("Failed to fetch student assignments");
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (open && data?.id) {
            fetchAssignments();
        }
    }, [open, data?.id, pagination.current_page]);

    // Helper function to safely display values
    const safeDisplay = (value: any): string => {
        if (!value) return 'N/A';
        if (typeof value === 'string') return value;
        if (typeof value === 'number') return value.toString();
        if (typeof value === 'object') {
            if (value.name) return value.name;
            if (value.label) return value.label;
            return JSON.stringify(value);
        }
        return String(value);
    };

    // Transform assignments data for timeline
    const timelineData = assignments.map((assignment: Assignment) => ({
        date: new Date(assignment.assigned_date || assignment.created_at).toLocaleDateString('en-US', {
            day: 'numeric',
            month: 'short',
            year: 'numeric'
        }),
        time: new Date(assignment.assigned_date || assignment.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">
                        {assignment.student_name}
                        {assignment.student_roll_no && (
                            <span className="text-xs text-gray-500 ml-2">(Roll No: {assignment.student_roll_no})</span>
                        )}
                    </label>
                    <label className="text-gray-500 text-xs">
                        {assignment.class_name && `${assignment.class_name} `}
                        {assignment.section && `- ${assignment.section}`}
                    </label>
                    <label className="text-gray-400 text-xs">
                        Assigned by: {assignment.created_by_name || assignment.created_by || 'N/A'}
                    </label>
                </div>
                <div className="flex items-center gap-2 bg-orange-50 px-3 py-2 rounded">
                    <label className="mb-0 text-sm text-gray-500">Quantity</label>
                    <label className="mb-0 text-sm font-semibold text-black-900">
                        {assignment.quantity || 1}
                    </label>
                </div>
            </div>
        )
    }));

    // Table Skeleton
    const TableSkeleton = () => (
        <tr className="animate-pulse border-b">
            <td className="px-4 py-3"><div className="h-4 w-32 bg-gray-200 rounded"></div></td>
            <td className="px-4 py-3"><div className="h-4 w-24 bg-gray-200 rounded"></div></td>
            <td className="px-4 py-3"><div className="h-4 w-20 bg-gray-200 rounded"></div></td>
            <td className="px-4 py-3"><div className="h-4 w-28 bg-gray-200 rounded"></div></td>
            <td className="px-4 py-3"><div className="h-4 w-24 bg-gray-200 rounded"></div></td>
        </tr>
    );

    if (!data) return null;

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Student Assignment Log"
            maxWidth="max-w-xl"
        >
            <div className="grid grid-cols-12 gap-4">
                {/* Stock/Material Info */}
                <div className="col-span-12 bg-gray-50 p-4 rounded-lg">
                    <div className="grid grid-cols-12 gap-4">
                        <div className="col-span-12">
                            <label className="text-semibold text-lg text-primary mb-0">
                                {safeDisplay(data.name) || safeDisplay(data.name) || 'Material Item'}
                            </label>
                        </div>
                        <div className="col-span-3">
                            <label className="text-xs text-gray-500">Category</label>
                            <p className="font-semibold text-sm">{safeDisplay(data.category)}</p>
                        </div>
                        <div className="col-span-3">
                            <label className="text-xs text-gray-500">Total Stock</label>
                            <p className="font-semibold text-sm">
                                {safeDisplay(data.stock_count) || safeDisplay(data.quantity)} {safeDisplay(data.unit)}
                            </p>
                        </div>
                        <div className="col-span-3">
                            <label className="text-xs text-gray-500">Unit</label>
                            <p className="font-semibold text-sm text-black-600">
                                {safeDisplay(data.unit)}
                            </p>
                        </div>
                        <div className="col-span-3">
                            <label className="text-xs text-gray-500">Status</label>
                            <p>
                                <span className="px-2 py-1 rounded text-xs bg-green-50 text-green-600">
                                    {'Active'}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>



                {/* Optional: Timeline View */}
                {assignments.length > 0 && (
                    <>
                        <div className="col-span-12">
                            <h4 className="font-semibold text-md mb-2">Assignment Timeline</h4>
                        </div>
                        <div className="col-span-12 pb-5 max-h-[300px] overflow-y-auto">
                            <Timeline items={timelineData} />
                        </div>
                    </>
                )}
            </div>
        </Modal>
    );
};

export default ViewStock;