import React, { useState, useEffect, useRef } from 'react';
import { Formik, FieldArray, Form, FormikErrors, FormikTouched } from 'formik';
import * as Yup from 'yup';
import Modal from '../../components/Modals';
import IconX from '../../components/Icon/IconX';
import Button from '../../components/Buttons';
import IconPlus from '../../components/Icon/IconPlus';
import FileDropzone from '../../components/FileDropzone';
import api from '../../api/axios';
import { toast } from 'react-toastify';

// Types - Removed SubTopic interface
interface Topic {
    id?: number; // Add id for existing records
    topic_title: string;
}

interface ModuleItem {
    id?: number; // Add id for existing records
    module_title: string;
    duration: string;
    description: string;
    file: File | string | null;
    topics: Topic[];
}

interface CurriculumFormValues {
    modules: ModuleItem[];
}

// Empty data creators - Simplified
const emptyTopic = (): Topic => ({ topic_title: '' });
const emptyModule = (): ModuleItem => ({
    module_title: '',
    duration: '',
    description: '',
    file: null,
    topics: [emptyTopic()],
});

// Validation schema - Removed subtopic validation
const validationSchema = Yup.object({
    modules: Yup.array().of(
        Yup.object({
            module_title: Yup.string().required('Module Title is required'),
            duration: Yup.string().required('Duration is required'),
            description: Yup.string(),
            file: Yup.mixed().nullable(),
            topics: Yup.array().of(
                Yup.object({
                    topic_title: Yup.string().required('Topic Title is required'),
                })
            ),
        })
    ),
});

const Curriculum = ({ open, onClose, courseData }: any) => {
    const [loading, setLoading] = useState(false);
    const formikRef = useRef<any>(null);

    // Fetch existing curriculum when modal opens
    useEffect(() => {
        const fetchCurriculum = async () => {
            if (open && courseData?.id) {
                setLoading(true);
                try {
                    const response = await api.get(`/curriculum/get/${courseData.id}`);
                    if (response.data.status === true && response.data.data.length > 0) {
                        const modules = response.data.data.map((module: any) => ({
                            id: module.id, // Preserve existing ID
                            module_title: module.module_title,
                            duration: module.duration,
                            description: module.description || '',
                            file: module.file_path || null,
                            topics: module.topics?.map((topic: any) => ({
                                id: topic.id, // Preserve existing ID
                                topic_title: topic.topic_title
                            })) || [emptyTopic()]
                        }));

                        if (formikRef.current) {
                            formikRef.current.setValues({ modules });
                        }
                    } else {
                        if (formikRef.current) {
                            formikRef.current.resetForm({ values: { modules: [emptyModule()] } });
                        }
                    }
                } catch (error) {
                    console.error('Error fetching curriculum:', error);
                    if (formikRef.current) {
                        formikRef.current.resetForm({ values: { modules: [emptyModule()] } });
                    }
                } finally {
                    setLoading(false);
                }
            } else if (open && formikRef.current) {
                formikRef.current.resetForm({ values: { modules: [emptyModule()] } });
            }
        };

        fetchCurriculum();
    }, [open, courseData]);

    const handleSubmit = async (values: CurriculumFormValues) => {
        if (!courseData?.id) {
            toast.error('No course selected');
            return;
        }

        setLoading(true);
        try {
            const formData = new FormData();

            values.modules.forEach((module, moduleIndex) => {
                // Include module ID if it exists (for updates)
                if (module.id) {
                    formData.append(`modules[${moduleIndex}][id]`, module.id.toString());
                }

                formData.append(`modules[${moduleIndex}][module_title]`, module.module_title);
                formData.append(`modules[${moduleIndex}][duration]`, module.duration);
                formData.append(`modules[${moduleIndex}][description]`, module.description || '');

                if (module.file instanceof File) {
                    formData.append(`modules[${moduleIndex}][file]`, module.file);
                }

                module.topics.forEach((topic, topicIndex) => {
                    // Include topic ID if it exists (for updates)
                    if (topic.id) {
                        formData.append(`modules[${moduleIndex}][topics][${topicIndex}][id]`, topic.id.toString());
                    }

                    formData.append(`modules[${moduleIndex}][topics][${topicIndex}][topic_title]`, topic.topic_title);
                });
            });

            const response = await api.post(
                `/curriculum/save/${courseData.id}`,
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                }
            );

            if (response.data.status === true) {
                toast.success('Curriculum saved successfully');
                onClose();
            } else {
                toast.error(response.data.message || 'Failed to save curriculum');
            }
        } catch (error: any) {
            console.error('Error saving curriculum:', error);
            toast.error(error.response?.data?.message || 'Failed to save curriculum');
        } finally {
            setLoading(false);
        }
    };

    return (
        <Modal
            open={open}
            onClose={onClose}
            title={`Manage Curriculum - ${courseData?.course_name || ''}`}
            maxWidth="max-w-4xl"
            footer={
                <>
                    <button
                        onClick={onClose}
                        className="btn btn-outline-danger"
                        type="button"
                        disabled={loading}
                    >
                        Cancel
                    </button>
                    <button
                        onClick={() => formikRef.current?.submitForm()}
                        className="btn btn-primary"
                        type="button"
                        disabled={loading}
                    >
                        {loading ? 'Saving...' : 'Save Curriculum'}
                    </button>
                </>
            }
        >
            {loading && !formikRef.current ? (
                <div className="text-center py-8">Loading curriculum...</div>
            ) : (
                <Formik<CurriculumFormValues>
                    innerRef={formikRef}
                    initialValues={{ modules: [emptyModule()] }}
                    validationSchema={validationSchema}
                    onSubmit={handleSubmit}
                >
                    {(formik) => (
                        <Form className="space-y-6 overflow-y-auto max-h-[600px] scrollbar-thin pr-2">
                            <FieldArray name="modules">
                                {(moduleHelpers) => (
                                    <>
                                        {formik.values.modules.map((module, mi) => {
                                            const mTouched = (formik.touched.modules as FormikTouched<ModuleItem>[] | undefined)?.[mi];
                                            const mErrors = (formik.errors.modules as FormikErrors<ModuleItem>[] | undefined)?.[mi];

                                            return (
                                                <div key={mi} className="border border-gray-200 rounded-xl p-4 bg-white space-y-4">
                                                    {/* Module Header */}
                                                    <div className="flex items-center justify-between">
                                                        <span className="text-sm font-medium text-gray-700">Module {mi + 1}</span>
                                                        {formik.values.modules.length > 1 && (
                                                            <button
                                                                type="button"
                                                                onClick={() => moduleHelpers.remove(mi)}
                                                                className="text-red-500 hover:text-red-700"
                                                            >
                                                                <IconX />
                                                            </button>
                                                        )}
                                                    </div>

                                                    {/* Module Fields */}
                                                    <div className="grid grid-cols-12 gap-3">
                                                        <div className="col-span-6">
                                                            <label className="block mb-1 text-sm font-medium">Module Title <span className="text-danger">*</span></label>
                                                            <input
                                                                className="form-input w-full"
                                                                {...formik.getFieldProps(`modules.${mi}.module_title`)}
                                                                placeholder="e.g., Introduction to Fashion Design"
                                                            />
                                                            {mTouched?.module_title && mErrors?.module_title && (
                                                                <p className="text-red-500 text-xs mt-1">{mErrors.module_title}</p>
                                                            )}
                                                        </div>

                                                        {/* Changed from Select dropdown to input field */}
                                                        <div className="col-span-6">
                                                            <label className="block mb-1 text-sm font-medium">Duration (in hrs)<span className="text-danger">*</span></label>
                                                            <input
                                                                className="form-input w-full"
                                                                {...formik.getFieldProps(`modules.${mi}.duration`)}
                                                                placeholder="e.g., 2 Weeks, 1 Month, etc."
                                                            />
                                                            {mTouched?.duration && mErrors?.duration && (
                                                                <p className="text-red-500 text-xs mt-1">{mErrors.duration as string}</p>
                                                            )}
                                                        </div>

                                                        <div className="col-span-12">
                                                            <label className="block mb-1 text-sm font-medium">Description</label>
                                                            <textarea
                                                                className="form-textarea w-full"
                                                                rows={2}
                                                                {...formik.getFieldProps(`modules.${mi}.description`)}
                                                                placeholder="Module description"
                                                            />
                                                        </div>

                                                        <div className="col-span-12">
                                                            <label className="block mb-1 text-sm font-medium">Upload File (Optional)</label>
                                                            <FileDropzone
                                                                value={module.file instanceof File ? module.file : null}
                                                                onChange={(file: File | null) =>
                                                                    formik.setFieldValue(`modules.${mi}.file`, file)
                                                                }
                                                                accept=".pdf,.doc,.docx,.xlsx,.ppt,.pptx"
                                                            />
                                                            {typeof module.file === 'string' && module.file && (
                                                                <div className="mt-2 text-sm text-green-600">
                                                                    File already uploaded: <a href={module.file} target="_blank" rel="noopener noreferrer">View</a>
                                                                </div>
                                                            )}
                                                        </div>
                                                    </div>

                                                    {/* Topics Section - Simplified (no subtopics) */}
                                                    <div className="border-t pt-4">
                                                        <label className="block mb-2 text-sm font-medium">Topics</label>
                                                        <FieldArray name={`modules.${mi}.topics`}>
                                                            {(topicHelpers) => (
                                                                <div className="space-y-3">
                                                                    {module.topics.map((topic, ti) => {
                                                                        const tTouched = (mTouched?.topics as FormikTouched<Topic>[] | undefined)?.[ti];
                                                                        const tErrors = (mErrors?.topics as FormikErrors<Topic>[] | undefined)?.[ti];

                                                                        return (
                                                                            <div key={ti} className="bg-gray-50 border border-gray-200 rounded-lg p-3 space-y-3">
                                                                                <div className="flex items-center justify-between">
                                                                                    <span className="text-xs font-medium text-gray-600">Topic {ti + 1}</span>
                                                                                    {module.topics.length > 1 && (
                                                                                        <button
                                                                                            type="button"
                                                                                            onClick={() => topicHelpers.remove(ti)}
                                                                                            className="text-red-500 hover:text-red-700"
                                                                                        >
                                                                                            <IconX />
                                                                                        </button>
                                                                                    )}
                                                                                </div>

                                                                                <div>
                                                                                    <label className="text-sm">Topic Title <span className="text-danger">*</span></label>
                                                                                    <input
                                                                                        className="form-input w-full"
                                                                                        {...formik.getFieldProps(`modules.${mi}.topics.${ti}.topic_title`)}
                                                                                        placeholder="Enter topic title"
                                                                                    />
                                                                                    {tTouched?.topic_title && tErrors?.topic_title && (
                                                                                        <p className="text-red-500 text-xs mt-1">{tErrors.topic_title as string}</p>
                                                                                    )}
                                                                                </div>
                                                                            </div>
                                                                        );
                                                                    })}

                                                                    <Button
                                                                        variant="secondary"
                                                                        type="button"
                                                                        size="sm"
                                                                        onClick={() => topicHelpers.push(emptyTopic())}
                                                                    >
                                                                        <IconPlus className="w-3 h-3" /> Add Topic
                                                                    </Button>
                                                                </div>
                                                            )}
                                                        </FieldArray>
                                                    </div>
                                                </div>
                                            );
                                        })}

                                        <div className="flex justify-center pt-4">
                                            <Button
                                                variant="primary"
                                                type="button"
                                                onClick={() => moduleHelpers.push(emptyModule())}
                                            >
                                                <IconPlus className="w-4 h-4" /> Add Module
                                            </Button>
                                        </div>
                                    </>
                                )}
                            </FieldArray>
                        </Form>
                    )}
                </Formik>
            )}
        </Modal>
    );
};

export default Curriculum;