import { BarChart3 } from "lucide-react";
import { motion } from "framer-motion";
import { fadeUpItem, staggerContainer } from "@/components/PageTransition";
import { defaultHowItWorksContent } from "./progress-report/defaults";
import { masteryBg, masteryText, scoreBg } from "./progress-report/helpers";
import { parseHowItWorksContent } from "./progress-report/parseContent";

type Content = Record<string, unknown>;

export { defaultHowItWorksContent };
export { parseHowItWorksContent as parseProgressHowItWorksContent };

export function ProgressHowItWorksBlock({ content }: { content?: Content }) {
    const data = parseHowItWorksContent(content);

    return (
        <div>
            <section className="py-16 bg-background">
                <div className="container mx-auto px-6 max-w-4xl">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        className="text-center mb-12"
                    >
                        <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mb-3">
                            {data.whyTitle}
                        </h2>
                        <p
                            className="text-muted-foreground max-w-2xl mx-auto text-sm leading-relaxed"
                            dangerouslySetInnerHTML={{ __html: data.whyIntroHtml }}
                        />
                    </motion.div>
                    <motion.div
                        className="grid md:grid-cols-3 gap-6 mb-16"
                        variants={staggerContainer}
                        initial="initial"
                        whileInView="animate"
                        viewport={{ once: true }}
                    >
                        {data.whyCards.map((item) => (
                            <motion.div
                                key={item.title}
                                variants={fadeUpItem}
                                className="bg-card rounded-xl border border-border p-6 text-center"
                            >
                                <span className="text-3xl block mb-3">{item.emoji}</span>
                                <h3 className="font-display text-sm font-bold text-foreground mb-2">{item.title}</h3>
                                <p className="text-muted-foreground text-xs leading-relaxed">{item.description}</p>
                            </motion.div>
                        ))}
                    </motion.div>
                </div>
            </section>

            <section className="py-16 bg-muted/30">
                <div className="container mx-auto px-6 max-w-4xl">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        className="text-center mb-10"
                    >
                        <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mb-2">
                            {data.scaleTitle}
                        </h2>
                        <p className="text-muted-foreground text-sm">{data.scaleSubtitle}</p>
                    </motion.div>
                    <motion.div
                        className="grid sm:grid-cols-2 gap-4"
                        variants={staggerContainer}
                        initial="initial"
                        whileInView="animate"
                        viewport={{ once: true }}
                    >
                        {data.masteryScale.map((level) => (
                            <motion.div
                                key={level.label}
                                variants={fadeUpItem}
                                className="bg-card rounded-xl border border-border p-5 flex gap-4 items-start"
                            >
                                <div
                                    className={`w-10 h-10 rounded-full ${masteryBg(level.color)} flex items-center justify-center shrink-0 text-white font-bold text-sm`}
                                >
                                    {level.level}
                                </div>
                                <div>
                                    <h3 className={`font-display text-sm font-bold ${masteryText(level.color)} mb-1`}>
                                        {level.label}
                                    </h3>
                                    <p className="text-muted-foreground text-xs leading-relaxed">{level.description}</p>
                                </div>
                            </motion.div>
                        ))}
                    </motion.div>
                </div>
            </section>

            <section className="py-16 bg-background">
                <div className="container mx-auto px-6 max-w-4xl">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        className="text-center mb-10"
                    >
                        <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mb-2">
                            {data.trackTitle}
                        </h2>
                        <p
                            className="text-muted-foreground text-sm max-w-2xl mx-auto"
                            dangerouslySetInnerHTML={{ __html: data.trackIntroHtml }}
                        />
                    </motion.div>

                    <motion.div
                        className="grid sm:grid-cols-2 gap-4 mb-12"
                        variants={staggerContainer}
                        initial="initial"
                        whileInView="animate"
                        viewport={{ once: true }}
                    >
                        {data.trackCards.map((item) => (
                            <motion.div
                                key={item.title}
                                variants={fadeUpItem}
                                className="bg-card rounded-xl border border-border p-5 flex gap-4 items-start"
                            >
                                <span className={`text-2xl shrink-0 ${item.color ?? ""}`}>{item.emoji}</span>
                                <div>
                                    <h3 className="font-display text-sm font-bold text-foreground mb-1">{item.title}</h3>
                                    <p className="text-muted-foreground text-xs leading-relaxed">{item.description}</p>
                                </div>
                            </motion.div>
                        ))}
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        className="bg-card rounded-xl border border-border overflow-hidden"
                    >
                        <div className="p-5 border-b border-border">
                            <h3 className="font-display text-sm font-bold text-foreground flex items-center gap-2">
                                <BarChart3 className="w-4 h-4 text-primary" /> {data.heatmapTitle}
                            </h3>
                            <p className="text-xs text-muted-foreground mt-1">{data.heatmapDescription}</p>
                        </div>
                        <div className="p-5 overflow-x-auto">
                            <table className="w-full text-[0.6rem]">
                                <thead>
                                    <tr>
                                        <th className="text-left p-2 font-display font-bold text-muted-foreground">Student</th>
                                        {data.heatmapColumns.map((column) => (
                                            <th
                                                key={column}
                                                className="p-2 font-display font-bold text-muted-foreground text-center"
                                            >
                                                {column}
                                            </th>
                                        ))}
                                    </tr>
                                </thead>
                                <tbody>
                                    {data.heatmapStudents.map((student) => (
                                        <tr key={student.name} className="border-t border-border">
                                            <td className="p-2 font-display font-bold text-foreground">{student.name}</td>
                                            {student.scores.map((score, scoreIndex) => (
                                                <td key={scoreIndex} className="p-1.5 text-center">
                                                    <motion.div
                                                        className={`${scoreBg(score)} w-7 h-7 rounded-md mx-auto flex items-center justify-center text-white font-bold text-[0.6rem]`}
                                                        initial={{ scale: 0, opacity: 0 }}
                                                        whileInView={{ scale: 1, opacity: 1 }}
                                                        viewport={{ once: true }}
                                                        transition={{ delay: scoreIndex * 0.03 + 0.1 }}
                                                    >
                                                        {score}
                                                    </motion.div>
                                                </td>
                                            ))}
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                            <div className="flex items-center gap-3 mt-4 justify-center">
                                {data.heatmapLegend.map((item) => (
                                    <div key={item.level} className="flex items-center gap-1">
                                        <div className={`w-3 h-3 rounded-sm ${masteryBg(item.color)}`} />
                                        <span className="text-[0.55rem] text-muted-foreground">{item.label}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, y: 15 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        className="mt-6 bg-primary/5 border border-primary/10 rounded-xl p-5 text-center"
                    >
                        <p
                            className="text-xs text-muted-foreground leading-relaxed max-w-2xl mx-auto"
                            dangerouslySetInnerHTML={{ __html: data.continuumHtml }}
                        />
                    </motion.div>
                </div>
            </section>

            <section className="py-16 bg-background">
                <div className="container mx-auto px-6 max-w-3xl">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        className="text-center mb-10"
                    >
                        <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mb-2">
                            {data.timelineTitle}
                        </h2>
                        <p className="text-muted-foreground text-sm">{data.timelineSubtitle}</p>
                    </motion.div>
                    <div className="relative">
                        <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-border" />
                        <div className="space-y-8">
                            {data.timeline.map((item, index) => (
                                <motion.div
                                    key={`${item.quarter}-${item.label}`}
                                    initial={{ opacity: 0, x: 20 }}
                                    whileInView={{ opacity: 1, x: 0 }}
                                    viewport={{ once: true }}
                                    transition={{ delay: index * 0.1 }}
                                    className="flex items-start gap-4"
                                >
                                    <div className="w-12 flex justify-center relative z-10">
                                        <div className="w-5 h-5 rounded-full bg-primary border-2 border-background flex items-center justify-center">
                                            <span className="text-[0.5rem] font-bold text-primary-foreground">
                                                {item.quarter}
                                            </span>
                                        </div>
                                    </div>
                                    <div className="flex-1 bg-card rounded-xl border border-border p-5">
                                        <div className="flex items-center gap-2 mb-1">
                                            <span className="font-display text-sm font-bold text-foreground">
                                                {item.label}
                                            </span>
                                            <span className="text-[0.6rem] bg-muted text-muted-foreground px-2 py-0.5 rounded-full font-display">
                                                📅 {item.month}
                                            </span>
                                        </div>
                                        <p className="text-xs text-muted-foreground leading-relaxed">{item.description}</p>
                                    </div>
                                </motion.div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            <section className="py-16 bg-muted/30">
                <div className="container mx-auto px-6 max-w-4xl">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        className="bg-card rounded-2xl border border-border p-8 md:p-10 text-center"
                    >
                        <span className="text-4xl block mb-4">{data.readEmoji}</span>
                        <h2 className="font-display text-xl md:text-2xl font-bold text-foreground mb-3">
                            {data.readTitle}
                        </h2>
                        <div className="text-sm text-muted-foreground leading-relaxed space-y-3 max-w-2xl mx-auto text-left">
                            {data.readTips.map((tip) => (
                                <p key={tip.lead}>
                                    <strong className="text-foreground">{tip.lead}</strong> {tip.text}
                                </p>
                            ))}
                        </div>
                    </motion.div>
                </div>
            </section>
        </div>
    );
}