import { useFormik } from "formik";
import * as Yup from "yup";
import { useMemo, useState, useEffect } from "react";
import Modal from "../../components/Modals";
import IconBuilding from "../../components/Icon/IconBuilding";
import IconCalendar from "../../components/Icon/IconCalendar";
import IconClock from "../../components/Icon/IconClock";
import IconMapPin from "../../components/Icon/IconMapPin";
import IconPackage from "../../components/Icon/IconPackage";
import Avatar from "../../components/Avatar";
import Datepicker from "../../components/Datepicker";
import IconSearch from "../../components/Icon/IconSearch";
import user from "../../assets/images/auth/user.png";
import api from '../../api/axios';
import { toast } from 'react-toastify';
import config from '../../config';

interface StudentType {
    id: number;
    name: string;
    email: string;
    phone: string;
    avatar: string;
    date: Date | null;
    checked: boolean;
}

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

const StudentInterview = ({ open, onClose, onSave, viewdata }: Props) => {
    const [search, setSearch] = useState("");
    const [students, setStudents] = useState<StudentType[]>([]);
    const [loading, setLoading] = useState(false);
    const [saving, setSaving] = useState(false);
    const [dateErrors, setDateErrors] = useState<{ [key: number]: string }>({});

    // Fetch students when modal opens
    useEffect(() => {
        if (open && viewdata?.id) {
            fetchStudents();
        }
    }, [open, viewdata]);

    const fetchStudents = async () => {
        setLoading(true);
        try {
            const response = await api.get('/placement/students');
            if (response.data.status) {
                // Check if students are already shortlisted
                const shortlistedIds = viewdata?.shortlisted_students?.map((s: any) => s.id) || [];
                const studentsWithCheck = response.data.data.map((student: any) => ({
                    ...student,
                    checked: shortlistedIds.includes(student.id),
                    date: null
                }));
                setStudents(studentsWithCheck);
                setDateErrors({});
            }
        } catch (error) {
            console.error('Failed to fetch students:', error);
            toast.error('Failed to load students');
        } finally {
            setLoading(false);
        }
    };

    // Filtered candidates
    const filteredData = useMemo(() => {
        return students.filter((item) =>
            item.name.toLowerCase().includes(search.toLowerCase()) ||
            item.email.toLowerCase().includes(search.toLowerCase())
        );
    }, [students, search]);

    // Validate selected students have dates
    const validateSelectedStudents = (): boolean => {
        const selectedStudents = students.filter(s => s.checked);
        const errors: { [key: number]: string } = {};
        let hasError = false;

        selectedStudents.forEach(student => {
            if (!student.date) {
                errors[student.id] = 'Date of joining is required';
                hasError = true;
            }
        });

        setDateErrors(errors);

        if (hasError) {
            toast.error('Please select date of joining for all selected students');
            return false;
        }

        return true;
    };

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: {
            company_name: viewdata?.company_name || "",
            job_role: viewdata?.job_role || "",
            date: viewdata?.date || "",
            time: viewdata?.time || "",
            package: viewdata?.package || "",
            address: viewdata?.address || "",
            description: viewdata?.description || "",
        },
        onSubmit: async (values) => {
            const selectedStudents = students.filter(s => s.checked);

            if (selectedStudents.length === 0) {
                toast.warning('Please select at least one student');
                return;
            }

            // Validate dates before submission
            if (!validateSelectedStudents()) {
                return;
            }

            setSaving(true);
            try {
                const response = await api.post('/placement/shortlist-students', {
                    interview_id: viewdata.id,
                    students: selectedStudents.map(s => ({
                        id: s.id,
                        selected_date: s.date ? s.date.toISOString().split('T')[0] : null
                    }))
                });

                if (response.data.status) {
                    toast.success('Students shortlisted successfully');
                    onSave(response.data);
                    onClose();
                }
            } catch (error: any) {
                console.error('Failed to shortlist students:', error);
                toast.error(error.response?.data?.message || 'Failed to shortlist students');
            } finally {
                setSaving(false);
            }
        },
    });

    const handleSelectAll = (checked: boolean) => {
        setStudents(prev =>
            prev.map(item =>
                filteredData.some(f => f.id === item.id)
                    ? { ...item, checked }
                    : item
            )
        );

        // Clear errors for unselected students when unchecking all
        if (!checked) {
            const updatedErrors = { ...dateErrors };
            filteredData.forEach(student => {
                delete updatedErrors[student.id];
            });
            setDateErrors(updatedErrors);
        }
    };

    const handleCheckboxChange = (studentId: number, checked: boolean) => {
        setStudents(prev =>
            prev.map(item =>
                item.id === studentId
                    ? { ...item, checked }
                    : item
            )
        );

        // Clear error for this student if unchecked
        if (!checked) {
            setDateErrors(prev => {
                const newErrors = { ...prev };
                delete newErrors[studentId];
                return newErrors;
            });
        }
    };

    const handleDateChange = (studentId: number, date: Date | null) => {
        setStudents(prev =>
            prev.map(item =>
                item.id === studentId
                    ? { ...item, date }
                    : item
            )
        );

        // Clear error for this student when date is selected
        if (date) {
            setDateErrors(prev => {
                const newErrors = { ...prev };
                delete newErrors[studentId];
                return newErrors;
            });
        }
    };

    const storageBaseUrl = config.storageUrl;

    const getImageUrl = (imagePath: string | null): string => {
        if (!imagePath) return user;
        if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
            return imagePath;
        }
        return `${storageBaseUrl}/${imagePath}`;
    };

    if (!open) return null;

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Shortlist Students"
            maxWidth="max-w-3xl"
            footer={
                <div className="flex items-center justify-end gap-3">
                    <button
                        type="button"
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        disabled={saving}
                    >
                        Cancel
                    </button>
                    <button
                        type="button"
                        onClick={() => formik.handleSubmit()}
                        className="btn btn-primary"
                        disabled={saving}
                    >
                        {saving ? 'Shortlisting...' : 'Shortlist Students'}
                    </button>
                </div>
            }
        >
            <form onSubmit={formik.handleSubmit} className="space-y-4">
                {/* TOP CARD */}
                <div className="rounded bg-gray-100 p-3 text-sm">
                    <div className="rounded-xl border bg-white p-4 shadow-sm">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                                <div className="rounded-lg bg-pink-50 p-2 text-pink-500">
                                    <IconBuilding />
                                </div>
                                <div>
                                    <h2 className="text-base font-semibold">
                                        {formik.values.company_name}
                                    </h2>
                                    <p className="text-sm text-pink-500">
                                        {formik.values.job_role}
                                    </p>
                                </div>
                            </div>
                            <span className={`rounded px-3 py-1 text-xs font-medium ${viewdata?.status_color || 'bg-blue-50 text-blue-500'}`}>
                                {viewdata?.status_text || 'Upcoming'}
                            </span>
                        </div>

                        <div className="mt-4 grid grid-cols-1 gap-4 text-sm text-gray-600 md:grid-cols-3">
                            <div className="flex items-center gap-2">
                                <IconCalendar className="w-4 h-4" />
                                <span>{formik.values.date}</span>
                            </div>
                            <div className="flex items-center gap-2">
                                <IconClock className="w-4 h-4" />
                                <span>{formik.values.time}</span>
                            </div>
                            <div className="flex items-center gap-2">
                                <IconPackage className="w-4 h-4" />
                                <span>{formik.values.package}</span>
                            </div>
                        </div>

                        <div className="mt-3 flex items-center gap-2 text-sm text-gray-600">
                            <IconMapPin className="w-4 h-4 flex-shrink-0" />
                            <span className="truncate">{formik.values.address}</span>
                        </div>

                        <div className="mt-4 rounded border bg-gray-50 p-3 text-sm">
                            {formik.values.description || "No description provided"}
                        </div>
                    </div>
                </div>

                {/* SEARCH */}
                <div className="flex items-center justify-between gap-3 mt-6 pt-6 border-t">
                    <h3 className="text-md font-semibold">Select Students</h3>
                    <div className="relative w-64">
                        <input
                            type="text"
                            placeholder="Search candidate..."
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                            className="w-full rounded-lg border px-3 py-2 pl-9 text-sm outline-none focus:border-primary"
                        />
                        <IconSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                    </div>
                </div>

                {loading ? (
                    <div className="text-center py-8">
                        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                        <p className="mt-2 text-gray-500">Loading students...</p>
                    </div>
                ) : (
                    <>
                        {/* HEADER */}
                        <div className="grid grid-cols-12 items-center rounded-lg border bg-gray-50 px-3 py-2 text-sm font-medium text-gray-600">
                            <div className="col-span-1 flex justify-center">
                                <input
                                    type="checkbox"
                                    checked={
                                        filteredData.length > 0 &&
                                        filteredData.every((item) => item.checked)
                                    }
                                    onChange={(e) => handleSelectAll(e.target.checked)}
                                    className="h-4 w-4 cursor-pointer accent-primary rounded"
                                />
                            </div>
                            <div className="col-span-7">Student Details</div>
                            <div className="col-span-4 text-center">Date of Joining <span className="text-red-500">*</span></div>
                        </div>

                        {/* LIST */}
                        <div className="max-h-96 space-y-2 overflow-y-auto">
                            {filteredData.length > 0 ? (
                                filteredData.map((student) => (
                                    <div
                                        key={student.id}
                                        className={`rounded-lg border p-2 transition-colors ${
                                            dateErrors[student.id] ? 'border-red-300 bg-red-50' : 'hover:bg-gray-50'
                                        }`}
                                    >
                                        <div className="grid grid-cols-12 items-center">
                                            <div className="col-span-1 flex justify-center">
                                                <input
                                                    type="checkbox"
                                                    checked={student.checked}
                                                    onChange={(e) => handleCheckboxChange(student.id, e.target.checked)}
                                                    className="h-4 w-4 cursor-pointer accent-primary rounded"
                                                />
                                            </div>

                                            <div className="col-span-7 flex items-center gap-3">
                                                <Avatar src={getImageUrl(student.avatar)} size="md" />
                                                <div>
                                                    <div className="text-sm font-semibold">
                                                        {student.name}
                                                    </div>
                                                    <div className="text-xs text-gray-500">
                                                        {student.email} | {student.phone}
                                                    </div>
                                                </div>
                                            </div>

                                            <div className="col-span-4">
                                                <div className="flex flex-col items-center">
                                                    <Datepicker
                                                        value={student.date ?? undefined}
                                                        onChange={(date: Date | Date[] | null) => {
                                                            const selectedDate = Array.isArray(date)
                                                                ? date[0]
                                                                : date;
                                                            handleDateChange(student.id, selectedDate ?? null);
                                                        }}
                                                        placeholder="Select date"
                                                        disabled={!student.checked}
                                                    />
                                                    {dateErrors[student.id] && student.checked && (
                                                        <p className="text-red-500 text-xs mt-1">
                                                            {dateErrors[student.id]}
                                                        </p>
                                                    )}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            ) : (
                                <div className="py-8 text-center text-sm text-gray-500">
                                    No candidates found
                                </div>
                            )}
                        </div>

                        {/* Summary Section */}
                        {students.filter(s => s.checked).length > 0 && (
                            <div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
                                <div className="flex justify-between items-center">
                                    <span className="text-sm font-medium text-blue-700">
                                        Selected Students: {students.filter(s => s.checked).length}
                                    </span>
                                    <span className="text-sm text-blue-600">
                                        Missing Dates: {Object.keys(dateErrors).length}
                                    </span>
                                </div>
                                {Object.keys(dateErrors).length > 0 && (
                                    <p className="text-xs text-red-600 mt-1">
                                        ⚠️ Please select date of joining for all selected students before submitting
                                    </p>
                                )}
                            </div>
                        )}
                    </>
                )}
            </form>
        </Modal>
    );
};

export default StudentInterview;