"use client";

import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { cmsApi, Course, AdvancedAnalytics } from "@/lib/api";
import { useAuth } from "@/context/AuthContext";
import {
    TrendingUp,
    ArrowLeft,
    Layers,
    Calendar,
    Filter
} from "lucide-react";
import CourseEditorLayout from "@/components/CourseEditorLayout";

interface HeatmapPoint {
    second: number;
    count: number;
}

export default function AdvancedAnalyticsPage({ params }: { params: { id: string } }) {
    const { id } = params;
    const router = useRouter();
    const { user } = useAuth();
    const [course, setCourse] = useState<Course | null>(null);
    const [analytics, setAnalytics] = useState<AdvancedAnalytics | null>(null);
    const [heatmapData, setHeatmapData] = useState<HeatmapPoint[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const fetchData = async () => {
            if (!user) return;
            try {
                const [courseData, advancedData] = await Promise.all([
                    cmsApi.getCourseWithFullOutline(id),
                    cmsApi.getAdvancedAnalytics(id)
                ]);
                setCourse(courseData);
                setAnalytics(advancedData);
            } catch (err: unknown) {
                const message = err instanceof Error ? err.message : "Failed to load data";
                console.error("Failed to load advanced analytics", err);
                setError(message);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, [id, user]);

    if (loading) return (
        <div className="min-h-screen bg-gray-900 flex items-center justify-center">
            <div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
        </div>
    );

    if (error || !course || !analytics) return (
        <div className="min-h-screen bg-[#0f1115] text-white p-20 text-center flex flex-col items-center justify-center gap-6">
            <div className="text-gray-400">{error || "Data unavailable"}</div>
            <button onClick={() => router.back()} className="btn-premium px-8">Go Back</button>
        </div>
    );

    return (
        <div className="min-h-screen bg-[#0f1115] text-white p-8">
            <div className="max-w-7xl mx-auto">
                {/* Header */}
                <div className="flex items-center justify-between mb-12">
                    <div className="flex items-center gap-4">
                        <button
                            onClick={() => router.push(`/courses/${id}/analytics`)}
                            className="p-2 hover:bg-white/10 rounded-full transition-colors"
                        >
                            <ArrowLeft className="w-6 h-6" />
                        </button>
                        <div>
                            <h1 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-indigo-400 bg-clip-text text-transparent">
                                Advanced Insights
                            </h1>
                            <p className="text-gray-400 mt-1">Cohort analysis and student retention for {course.title}</p>
                        </div>
                    </div>
                </div>

                <CourseEditorLayout activeTab="analytics">
                    <div className="p-8 space-y-12">
                        {/* Cohort Analysis */}
                        <section>
                            <div className="flex items-center justify-between mb-8">
                                <h2 className="text-2xl font-black flex items-center gap-3">
                                    <Layers className="text-purple-500" />
                                    Cohort Completion
                                </h2>
                                <div className="flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-widest bg-white/5 px-4 py-2 rounded-xl">
                                    <Filter size={14} /> Grouped by Month
                                </div>
                            </div>

                            <div className="overflow-hidden rounded-3xl border border-white/10 bg-white/[0.02]">
                                <table className="w-full text-left border-collapse">
                                    <thead>
                                        <tr className="bg-white/5">
                                            <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Cohort (Enrollment Month)</th>
                                            <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Students</th>
                                            <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Avg. Completion Rate</th>
                                            <th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Engagement Status</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-white/5">
                                        {analytics.cohorts.length === 0 ? (
                                            <tr>
                                                <td colSpan={4} className="p-12 text-center text-gray-600 italic">No cohort data available yet.</td>
                                            </tr>
                                        ) : analytics.cohorts.map((cohort) => (
                                            <tr key={cohort.period} className="hover:bg-white/[0.02] transition-colors">
                                                <td className="p-6 font-bold flex items-center gap-3">
                                                    <Calendar size={16} className="text-purple-400" />
                                                    {cohort.period}
                                                </td>
                                                <td className="p-6 font-black">{cohort.count}</td>
                                                <td className="p-6">
                                                    <div className="flex items-center gap-4">
                                                        <div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden min-w-[200px]">
                                                            <div
                                                                className="h-full bg-purple-500 transition-all duration-1000 shadow-[0_0_10px_rgba(168,85,247,0.5)]"
                                                                style={{ width: `${cohort.completion_rate * 100}%` }}
                                                            />
                                                        </div>
                                                        <span className="text-sm font-black">{Math.round(cohort.completion_rate * 100)}%</span>
                                                    </div>
                                                </td>
                                                <td className="p-6">
                                                    {cohort.completion_rate > 0.8 ? (
                                                        <span className="text-[10px] font-black uppercase tracking-widest text-green-400 bg-green-400/10 px-3 py-1 rounded-full border border-green-500/20">Excellent</span>
                                                    ) : cohort.completion_rate > 0.5 ? (
                                                        <span className="text-[10px] font-black uppercase tracking-widest text-blue-400 bg-blue-400/10 px-3 py-1 rounded-full border border-blue-500/20">Healthy</span>
                                                    ) : (
                                                        <span className="text-[10px] font-black uppercase tracking-widest text-orange-400 bg-orange-400/10 px-3 py-1 rounded-full border border-orange-500/20">Low Momentum</span>
                                                    )}
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </section>

                        {/* Retention Analysis */}
                        <section>
                            <h2 className="text-2xl font-black mb-8 flex items-center gap-3">
                                <TrendingUp className="text-indigo-500" />
                                Retention Heatmap
                            </h2>
                            <div className="space-y-6">
                                {analytics.retention.map((item, index) => {
                                    const firstStudentCount = analytics.retention[0]?.student_count || 1;
                                    const percentage = (item.student_count / firstStudentCount) * 100;

                                    return (
                                        <div key={item.lesson_id} className="group relative">
                                            <div className="flex items-center justify-between mb-2">
                                                <div className="flex items-center gap-4">
                                                    <div className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-[10px] font-black text-gray-500">
                                                        {index + 1}
                                                    </div>
                                                    <span className="font-bold text-gray-300">{item.lesson_title}</span>
                                                </div>
                                                <div className="text-right">
                                                    <div className="text-sm font-black text-white">{item.student_count} Students</div>
                                                    <div className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">{Math.round(percentage)}% Retention</div>
                                                </div>
                                            </div>
                                            <div className="h-4 w-full bg-white/5 rounded-lg overflow-hidden border border-white/5">
                                                <div
                                                    className={`h-full transition-all duration-1000 ${percentage > 80 ? 'bg-indigo-500' :
                                                        percentage > 50 ? 'bg-indigo-600/70' :
                                                            'bg-indigo-700/40'
                                                        }`}
                                                    style={{ width: `${percentage}%` }}
                                                />
                                            </div>
                                            {index > 0 && analytics.retention[index - 1].student_count > 0 && (
                                                <div className="absolute -top-4 right-0 text-[10px] font-black text-red-500/50">
                                                    -{Math.round(100 - (item.student_count / analytics.retention[index - 1].student_count) * 100)}% drop
                                                </div>
                                            )}
                                        </div>
                                    );
                                })}
                            </div>
                        </section>

                        {/* Engagement Heatmap */}
                        <section>
                            <div className="flex items-center justify-between mb-8">
                                <h2 className="text-2xl font-black flex items-center gap-3">
                                    <TrendingUp size={24} className="text-orange-500" />
                                    Engagement Heatmap
                                </h2>
                                <select
                                    className="bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all"
                                    onChange={(e) => {
                                        const lessonId = e.target.value;
                                        if (lessonId) {
                                            cmsApi.getLessonHeatmap(lessonId).then(setHeatmapData).catch(console.error);
                                        } else {
                                            setHeatmapData([]);
                                        }
                                    }}
                                >
                                    <option value="">Select a video lesson...</option>
                                    {course.modules?.flatMap(m => m.lessons)
                                        .filter(l => l.content_type === 'video' || (l.metadata?.blocks || []).some(b => b.type === 'media'))
                                        .map(l => (
                                            <option key={l.id} value={l.id}>{l.title}</option>
                                        ))
                                    }
                                </select>
                            </div>

                            {heatmapData.length > 0 ? (
                                <div className="p-8 rounded-3xl border border-white/10 bg-white/[0.02] space-y-8">
                                    <p className="text-sm text-gray-500 uppercase font-black tracking-widest">
                                        Playback concentration by second (Total Interactions: {heatmapData.reduce((acc: number, p: HeatmapPoint) => acc + Number(p.count), 0)})
                                    </p>
                                    <div className="flex items-end gap-[2px] h-48 w-full group">
                                        {(() => {
                                            const counts = heatmapData.map((p: HeatmapPoint) => Number(p.count));
                                            const maxCount = Math.max(...counts, 1);
                                            const lastSecond = heatmapData[heatmapData.length - 1].second;

                                            // Fill gaps for a smooth chart
                                            const fullHeatmap = Array.from({ length: lastSecond + 1 }, (_, i) => {
                                                const point = heatmapData.find((p: HeatmapPoint) => p.second === i);
                                                return point ? Number(point.count) : 0;
                                            });

                                            return fullHeatmap.map((count, i) => (
                                                <div
                                                    key={i}
                                                    className="flex-1 bg-orange-500/20 hover:bg-orange-500 transition-all rounded-t-[1px] relative group/bar"
                                                    style={{ height: `${(count / maxCount) * 100}%` }}
                                                >
                                                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black text-[10px] font-black rounded opacity-0 group-hover/bar:opacity-100 whitespace-nowrap z-10 pointer-events-none">
                                                        {Math.floor(i / 60)}:{(i % 60).toString().padStart(2, '0')} - {count} views
                                                    </div>
                                                </div>
                                            ));
                                        })()}
                                    </div>
                                    <div className="flex justify-between text-[10px] font-black text-gray-600 uppercase tracking-widest pt-4 border-t border-white/5">
                                        <span>0:00 Start</span>
                                        <span>Video Timeline</span>
                                        <span>End</span>
                                    </div>
                                </div>
                            ) : (
                                <div className="p-20 text-center border-2 border-dashed border-white/5 rounded-3xl">
                                    <p className="text-gray-600 font-bold uppercase tracking-widest italic">
                                        Select a lesson to view its engagement signature
                                    </p>
                                </div>
                            )}
                        </section>
                    </div>
                </CourseEditorLayout>
            </div>
        </div>
    );
}
