'use client';

import { useTranslations, useLocale } from 'next-intl';
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
import { Upload, CheckCircle, FileText, AlertCircle, GripVertical, X, ClipboardList, Timer } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';
import { submitActivity } from '../../_actions/activities';
import { useToast } from '@/hooks/use-toast';
import { 
    DndContext, 
    closestCenter, 
    KeyboardSensor, 
    PointerSensor, 
    useSensor, 
    useSensors,
    DragOverlay,
    defaultDropAnimationSideEffects,
    type DropAnimation,
    TouchSensor,
    MouseSensor
} from '@dnd-kit/core';
import {
    arrayMove,
    SortableContext,
    sortableKeyboardCoordinates,
    verticalListSortingStrategy,
    useSortable,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { cn } from '@/lib/cn';

interface ActivityResponse {
    id: number;
    activity_question_id: number;
    response_text: string;
    mark?: number;
    is_correct?: number;
}

interface ActivityQuestion {
    id: number;
    activity_id: number;
    question_text: string;
    responses?: ActivityResponse[];
}

interface ActivityData {
    success: boolean;
    message?: string;
    duration?: number | null;
    data?: {
        id: number;
        title: string;
        content: string;
        images: string[] | null;
        files: string[];
        note: number;
        type_review: string;
        duration?: number | null;
        reviews: string[];
        questions: ActivityQuestion[];
        responses?: ActivityResponse[]; // flat list in some API versions
    };
}

// Draggable Response Item
function DraggableResponse({ id, text, isOverlay = false }: { id: string | number, text: string, isOverlay?: boolean }) {
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
        isDragging
    } = useSortable({ id: `response-${id}` });

    const style = {
        transform: CSS.Translate.toString(transform),
        transition,
    };

    return (
        <div
            ref={setNodeRef}
            style={style}
            {...attributes}
            {...listeners}
            className={cn(
                "p-3 mb-2 bg-white border rounded-lg shadow-sm cursor-grab active:cursor-grabbing flex items-center gap-2 group hover:border-purple-300 transition-colors touch-none",
                isDragging && "opacity-50",
                isOverlay && "cursor-grabbing shadow-lg border-purple-500 scale-105 z-50 pointer-events-none"
            )}
        >
            <GripVertical className="h-4 w-4 text-gray-400 group-hover:text-purple-400" />
            <span className="text-sm text-gray-700 select-none">{text}</span>
        </div>
    );
}

// Question Drop Zone
function QuestionDropZone({ question, matchedResponses, onRemove }: { question: ActivityQuestion, matchedResponses: ActivityResponse[], onRemove: (responseId: number) => void }) {
    const { setNodeRef, isOver } = useSortable({ id: `question-${question.id}` });

    return (
        <div className="mb-6 p-4 border-2 border-dashed rounded-xl transition-colors bg-white hover:bg-gray-50/50">
            <h4 className="font-semibold text-gray-800 mb-3 flex items-center gap-2">
                <span className="bg-purple-100 text-purple-700 w-6 h-6 rounded-full flex items-center justify-center text-xs">?</span>
                {question.question_text}
            </h4>
            
            <div 
                ref={setNodeRef}
                className={cn(
                    "min-h-[60px] p-2 rounded-lg transition-all border-2 border-transparent",
                    isOver && "border-purple-300 bg-purple-50/50 scale-[1.01]"
                )}
            >
                {matchedResponses.length > 0 ? (
                    <div className="space-y-2">
                        {matchedResponses.map((res) => (
                            <div key={res.id} className="flex items-center justify-between p-3 bg-purple-50 border border-purple-100 rounded-lg group animate-in fade-in slide-in-from-top-1">
                                <span className="text-sm text-purple-900">{res.response_text}</span>
                                <button 
                                    onClick={() => onRemove(res.id)}
                                    className="p-1 hover:bg-purple-200 rounded-full text-purple-400 hover:text-purple-600 transition-colors"
                                >
                                    <X className="h-4 w-4" />
                                </button>
                            </div>
                        ))}
                    </div>
                ) : (
                    <div className="h-[60px] flex items-center justify-center text-gray-400 text-sm italic">
                        {isOver ? "Drop to match" : "Drag response here"}
                    </div>
                )}
            </div>
        </div>
    );
}

export function ActivityInterface({ activityData, courseName, activityItemId, onActivitySubmitted }: { activityData: any, courseName?: string, activityItemId?: number, onActivitySubmitted?: () => void }) {
    const t = useTranslations('programs');
    const locale = useLocale();
    const { toast } = useToast();
    const isArabic = locale === 'ar';
    
    const [description, setDescription] = useState('');
    const [files, setFiles] = useState<string[]>([]);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isSubmitted, setIsSubmitted] = useState(false);
    const isSubmittedRef = useRef(false);

    // Matching State
    const [matches, setMatches] = useState<Record<number, number[]>>({});
    const [activeId, setActiveId] = useState<string | null>(null);

    const activity = activityData?.data?.[0] || activityData?.data; // Handle array or single object
    const duration = activityData?.duration || activity?.duration || activityData?.data?.[0]?.duration;
    
    const [timeLeft, setTimeLeft] = useState<number | null>(
        (duration && Number(duration) > 0) ? Number(duration) * 60 : null
    );

    useEffect(() => {
        if (timeLeft === null || isSubmitted || isSubmittedRef.current) return;

        if (timeLeft <= 0) {
            toast({
                title: t('timeUp'),
                description: t('examAutoSubmitting'),
                variant: "destructive"
            });
            handleSubmit();
            return;
        }

        const timer = setInterval(() => {
            setTimeLeft(prev => (prev !== null && prev > 0) ? prev - 1 : 0);
        }, 1000);

        return () => clearInterval(timer);
    }, [timeLeft, isSubmitted]);

    const formatTime = (seconds: number) => {
        const h = Math.floor(seconds / 3600);
        const m = Math.floor((seconds % 3600) / 60);
        const s = seconds % 60;
        return `${h > 0 ? h + ':' : ''}${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    };

    // Sensors for DND
    const sensors = useSensors(
        useSensor(MouseSensor, {
            activationConstraint: {
                distance: 5,
            },
        }),
        useSensor(TouchSensor, {
            activationConstraint: {
                delay: 250,
                tolerance: 5,
            },
        }),
        useSensor(KeyboardSensor, {
            coordinateGetter: sortableKeyboardCoordinates,
        })
    );

    // Extract all pools of responses
    const allResponsesPool = useMemo(() => {
        if (!activity) return [];
        
        let pool: ActivityResponse[] = [];
        
        // Handle nested responses
        if (activity.questions) {
            activity.questions.forEach((q: any) => {
                if (q.responses) {
                    pool = [...pool, ...q.responses];
                }
            });
        }
        
        // Handle flat responses if present
        if (activity.responses) {
            pool = [...pool, ...activity.responses];
        }

        // De-duplicate by ID
        const unique = Array.from(new Map(pool.map(item => [item.id, item])).values());
        return unique;
    }, [activity]);

    // Responses that haven't been matched yet
    const availableResponses = useMemo(() => {
        const matchedIds = Object.values(matches).flat();
        return allResponsesPool.filter(r => !matchedIds.includes(r.id));
    }, [allResponsesPool, matches]);

    const activeResponse = useMemo(() => {
        if (!activeId || !activeId.startsWith('response-')) return null;
        const id = parseInt(activeId.split('-')[1]);
        return allResponsesPool.find(r => r.id === id);
    }, [activeId, allResponsesPool]);

    // Handle Drag Events
    const handleDragStart = (event: any) => {
        setActiveId(event.active.id);
    };

    const handleDragEnd = (event: any) => {
        const { active, over } = event;
        setActiveId(null);

        if (!over) return;

        const activeStr = active.id as string;
        const overStr = over.id as string;

        if (activeStr.startsWith('response-') && overStr.startsWith('question-')) {
            const responseId = parseInt(activeStr.split('-')[1]);
            const questionId = parseInt(overStr.split('-')[1]);

            setMatches(prev => {
                const newMatches = { ...prev };
                // Remove from other questions if present
                Object.keys(newMatches).forEach(key => {
                    const k = parseInt(key);
                    newMatches[k] = newMatches[k].filter(id => id !== responseId);
                });
                // Add to new question
                newMatches[questionId] = [...(newMatches[questionId] || []), responseId];
                return newMatches;
            });
        }
    };

    const handleRemoveMatch = (responseId: number) => {
        setMatches(prev => {
            const newMatches = { ...prev };
            Object.keys(newMatches).forEach(key => {
                const k = parseInt(key);
                newMatches[k] = newMatches[k].filter(id => id !== responseId);
            });
            return newMatches;
        });
    };

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const selectedFiles = e.target.files;
        if (selectedFiles) {
            const fileNames = Array.from(selectedFiles).map(file => file.name);
            setFiles(fileNames);
        }
    };

    const handleSubmit = async () => {
        if (isSubmittedRef.current) return;
        setIsSubmitting(true);
        
        try {
            const payload = {
                description: description,
                my_files: files,
                participant_responses: matches
            };

            const submissionId = activityItemId || activityData?.id || (activity ? activity.id : 0);

            // ── Browser DevTools log ──────────────────────────────────────
            console.group('%c[ACTIVITY SUBMIT]', 'color:#7c3aed;font-weight:bold');
            console.log('Submission ID :', submissionId);
            console.log('Payload       :', JSON.parse(JSON.stringify(payload)));
            console.groupEnd();
            // ─────────────────────────────────────────────────────────────

            const result = await submitActivity(submissionId.toString(), payload);

            // ── Browser DevTools log ──────────────────────────────────────
            console.group('%c[ACTIVITY RESULT]', 'color:#059669;font-weight:bold');
            console.log('Result :', JSON.parse(JSON.stringify(result)));
            console.log('success:', result.success);
            console.groupEnd();
            // ─────────────────────────────────────────────────────────────
            
            if (result.success) {
                setIsSubmitted(true);
                isSubmittedRef.current = true;
                onActivitySubmitted?.();
            } else {
                console.warn('[ACTIVITY] Submission reported failure. Full result:', result);
                const errorMsg = result.error || result.message || t('activitySubmitError');
                alert(errorMsg);
            }
        } catch (error) {
            console.error('Error submitting activity:', error);
            alert(t('activitySubmitError'));
        } finally {
            setIsSubmitting(false);
        }
    };

    if (!activityData?.success || !activity) {
        const errorMessage = activityData?.message || t('activityNotAvailableMessage');
        return (
            <div className="min-h-screen flex items-center justify-center">
                <Card className="max-w-md w-full">
                    <CardContent className="p-8 text-center">
                        <AlertCircle className="h-16 w-16 text-orange-600 mx-auto mb-4" />
                        <h2 className="text-2xl font-bold mb-2">{errorMessage}</h2>
                        <Button 
                            onClick={() => window.location.reload()}
                            className="bg-blue-600 hover:bg-blue-700 mt-4"
                        >
                            {t('go-back')}
                        </Button>
                    </CardContent>
                </Card>
            </div>
        );
    }

    if (isSubmitted) {
        return (
            <div className="min-h-screen flex items-center justify-center p-4">
                <Card className="max-w-md w-full">
                    <CardContent className="p-8 text-center">
                        <CheckCircle className="h-16 w-16 text-blue-600 mx-auto mb-4" />
                        <h2 className="text-2xl font-bold mb-2">{t('activitySubmitted')}</h2>
                        <p className="text-gray-600 mb-6">{t('activitySubmittedMessage')}</p>
                        <Button 
                            onClick={() => window.location.reload()}
                            className="bg-blue-600 hover:bg-blue-700"
                        >
                            {t('go-back')}
                        </Button>
                    </CardContent>
                </Card>
            </div>
        );
    }

    const dropAnimation: DropAnimation = {
        sideEffects: defaultDropAnimationSideEffects({
            styles: {
                active: {
                    opacity: '0.5',
                },
            },
        }),
    };

    return (
        <div className="h-screen flex flex-col bg-gray-50 overflow-hidden">
            {/* Purple Header */}
            <div className="bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-700 text-white px-6 py-4 flex-shrink-0">
                <div className="max-w-6xl mx-auto flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <h2 className="text-xl font-bold">{activity.title}</h2>
                    </div>
                     <Button
                            onClick={() => window.location.reload()}
                            variant="ghost"
                            className="bg-white text-purple-600 hover:bg-purple-50 p-2 rounded-lg transition-all hover:scale-105"
                        >
                              
                            <svg className="w-5 h-5 ml-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                            </svg>
                             {t('go-back')}
                        </Button>
                </div>
            </div>

            <div className="flex-1 overflow-y-auto">
                <div className="max-w-6xl mx-auto p-6 pb-20">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        {/* Left Side: Activity Content and Matching */}
                        <div className="lg:col-span-2 space-y-6">
                            <Card>
                                <CardContent className="p-6">
                                    <h3 className="text-lg font-semibold text-gray-900 mb-3">{t('activityDescription')}</h3>
                                    <div className="p-4 bg-gray-50 rounded-lg">
                                        <p className="text-gray-700 whitespace-pre-wrap">{activity.content}</p>
                                    </div>
                                </CardContent>
                            </Card>

                            {/* Matching Logic UI */}
                            {activity.questions && activity.questions.length > 0 && (
                                <DndContext
                                    sensors={sensors}
                                    collisionDetection={closestCenter}
                                    onDragStart={handleDragStart}
                                    onDragEnd={handleDragEnd}
                                >
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
                                        {/* Questions Column */}
                                        <div className="space-y-4">
                                            <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
                                                <ClipboardList className="h-5 w-5 text-purple-600" />
                                                Questions to Match
                                            </h3>
                                            <SortableContext items={activity.questions.map(q => `question-${q.id}`)} strategy={verticalListSortingStrategy}>
                                                {activity.questions.map((q) => (
                                                    <QuestionDropZone 
                                                        key={q.id} 
                                                        question={q} 
                                                        matchedResponses={allResponsesPool.filter(r => (matches[q.id] || []).includes(r.id))}
                                                        onRemove={handleRemoveMatch}
                                                    />
                                                ))}
                                            </SortableContext>
                                        </div>

                                        {/* Responses Column (Floating/Sticky on desktop) */}
                                        <div className="space-y-4">
                                            <div className="sticky top-6">
                                                <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2 mb-4">
                                                    <GripVertical className="h-5 w-5 text-purple-600" />
                                                    Responses Pool
                                                </h3>
                                                <div className="p-4 bg-gray-100/50 rounded-xl border border-gray-200 min-h-[200px]">
                                                    <SortableContext items={availableResponses.map(r => `response-${r.id}`)} strategy={verticalListSortingStrategy}>
                                                        {availableResponses.length > 0 ? (
                                                            availableResponses.map((r) => (
                                                                <DraggableResponse key={r.id} id={r.id} text={r.response_text} />
                                                            ))
                                                        ) : (
                                                            <div className="flex flex-col items-center justify-center h-40 text-gray-400 text-center p-4">
                                                                <CheckCircle className="h-10 w-10 mb-2 opacity-20" />
                                                                <p className="text-sm">All responses matched!</p>
                                                            </div>
                                                        )}
                                                    </SortableContext>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <DragOverlay dropAnimation={dropAnimation}>
                                        {activeResponse ? (
                                            <DraggableResponse id={activeResponse.id} text={activeResponse.response_text} isOverlay />
                                        ) : null}
                                    </DragOverlay>
                                </DndContext>
                            )}

                            {/* Additional Info / Files */}
                            {activity.files && activity.files.length > 0 && (
                                <Card>
                                    <CardContent className="p-6">
                                        <h3 className="text-lg font-semibold text-gray-900 mb-3">{t('attachedFiles')}</h3>
                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                            {activity.files.map((file, index) => (
                                                <a
                                                    key={index}
                                                    href={`https://tr.ivorytraining.com/${file}`}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="flex items-center gap-3 p-3 border rounded-lg hover:bg-gray-50 transition-all hover:shadow-md"
                                                >
                                                    <FileText className="h-5 w-5 text-purple-600" />
                                                    <span className="text-sm text-gray-700 truncate">
                                                        {file.split('/').pop()}
                                                    </span>
                                                </a>
                                            ))}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}
                        </div>

                        {/* Right Side: Submission Form */}
                        <div className="space-y-6">
                            <Card className="sticky top-6">
                                <CardContent className="p-6">
                                    <h3 className="text-lg font-semibold text-gray-900 mb-4">{t('yourSubmission')}</h3>
                                    
                                    <div className="mb-4">
                                        <label className="block text-sm font-medium text-gray-700 mb-2">
                                            {t('activityDescriptionField')}
                                        </label>
                                        <Textarea
                                            value={description}
                                            onChange={(e) => setDescription(e.target.value)}
                                            placeholder={t('writeYourAnswer')}
                                            className="min-h-[120px] resize-none"
                                            dir={isArabic ? 'rtl' : 'ltr'}
                                        />
                                    </div>

                                    <div className="mb-6">
                                        <label className="block text-sm font-medium text-gray-700 mb-2">
                                            {t('uploadFiles')}
                                        </label>
                                        <div className="border border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-purple-500 transition-colors">
                                            <input
                                                type="file"
                                                multiple
                                                onChange={handleFileChange}
                                                className="hidden"
                                                id="file-upload"
                                            />
                                            <label htmlFor="file-upload" className="cursor-pointer group">
                                                <Upload className="h-8 w-8 text-gray-400 mx-auto mb-2 group-hover:text-purple-500 transition-colors" />
                                                <p className="text-xs text-gray-600">{t('clickToUpload')}</p>
                                                {files.length > 0 && (
                                                    <div className="mt-3 text-left">
                                                        <ul className="text-xs text-gray-500 space-y-1">
                                                            {files.map((file, index) => (
                                                                <li key={index} className="flex items-center gap-1">
                                                                    <FileText className="h-3 w-3" />
                                                                    <span className="truncate">{file}</span>
                                                                </li>
                                                            ))}
                                                        </ul>
                                                    </div>
                                                )}
                                            </label>
                                        </div>
                                    </div>

                                    <div className="space-y-3">
                                        <Button
                                            onClick={handleSubmit}
                                            disabled={isSubmitting || (!description.trim() && Object.keys(matches).length === 0)}
                                            className="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-6"
                                        >
                                            {isSubmitting ? t('submitting') : t('submitActivity')}
                                        </Button>
                                        <Button
                                            variant="ghost"
                                            className="w-full text-gray-500"
                                            onClick={() => window.location.reload()}
                                        >
                                            {t('cancel')}
                                        </Button>
                                    </div>
                                </CardContent>
                            </Card>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}