import { Archive, BarChart3, FileText, MessageSquare, Star, Target, TrendingUp } from "lucide-react";
import { motion } from "framer-motion";
import {
    Legend,
    PolarAngleAxis,
    PolarGrid,
    PolarRadiusAxis,
    Radar,
    RadarChart,
    ResponsiveContainer,
} from "recharts";
import { defaultSampleReportContent } from "./progress-report/defaults";
import { getMasteryColor, getMasteryDot, masteryBorder, masteryText, parseMasteryLevel } from "./progress-report/helpers";
import { parseSampleReportContent } from "./progress-report/parseContent";

type Content = Record<string, unknown>;

export { defaultSampleReportContent };
export { parseSampleReportContent as parseProgressSampleReportContent };

export function ProgressSampleReportBlock({ content }: { content?: Content }) {
    const data = parseSampleReportContent(content);

    return (
        <section className="py-12 bg-background">
            <div className="container mx-auto px-6 max-w-4xl">
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="bg-card rounded-2xl border border-border overflow-hidden mb-8"
                >
                    <div className="bg-bark p-6 text-center">
                        <p className="font-display text-xs tracking-[0.15em] uppercase text-milk/50 mb-1">
                            {data.schoolLabel}
                        </p>
                        <h2 className="font-display text-xl md:text-2xl font-bold text-milk">{data.reportTitle}</h2>
                    </div>
                    <div className="p-6">
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                            {[
                                { label: "Student", value: data.studentName },
                                { label: "Grade", value: data.studentGrade },
                                { label: "Term", value: data.studentTerm },
                                { label: "Teacher", value: data.studentTeacher },
                            ].map((item) => (
                                <div key={item.label}>
                                    <p className="text-[0.65rem] text-muted-foreground font-display uppercase tracking-wider">
                                        {item.label}
                                    </p>
                                    <p className="font-display text-sm font-bold text-foreground">{item.value}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.1 }}
                    className="bg-card rounded-xl border border-border p-5 mb-8"
                >
                    <h3 className="font-display text-sm font-bold text-foreground mb-3 flex items-center gap-2">
                        <BarChart3 className="w-4 h-4 text-primary" /> Mastery Scale
                    </h3>
                    <p className="text-xs text-muted-foreground mb-3">{data.scaleNote}</p>
                    <div className="flex flex-wrap gap-2">
                        {data.masteryScale.map((scale) => (
                            <span
                                key={scale.label}
                                className={`text-[0.65rem] font-display font-semibold px-3 py-1 rounded-full border ${masteryBorder(scale.color)} ${masteryText(scale.color)} bg-background`}
                            >
                                {scale.level} – {scale.label}
                            </span>
                        ))}
                    </div>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.15 }}
                    className="bg-card rounded-xl border border-border overflow-hidden mb-8"
                >
                    <div className="p-5 border-b border-border">
                        <h3 className="font-display text-sm font-bold text-foreground flex items-center gap-2">
                            <TrendingUp className="w-4 h-4 text-primary" /> {data.masteryProgressTitle}
                        </h3>
                        <p className="text-xs text-muted-foreground mt-1">{data.masteryProgressSubtitle}</p>
                    </div>
                    <div className="overflow-x-auto">
                        <table className="w-full text-xs">
                            <thead>
                                <tr className="bg-muted/50">
                                    <th className="text-left p-3 font-display font-bold text-muted-foreground">Subject</th>
                                    <th className="text-left p-3 font-display font-bold text-muted-foreground">Learning Outcome</th>
                                    <th className="text-center p-3 font-display font-bold text-muted-foreground">Grade</th>
                                    <th className="text-center p-3 font-display font-bold text-muted-foreground">Term 1</th>
                                    <th className="text-center p-3 font-display font-bold text-muted-foreground">Term 2</th>
                                </tr>
                            </thead>
                            <tbody>
                                {data.masteryProgress.map((row, index) => {
                                    const showSubject = index === 0
                                        || data.masteryProgress[index - 1].subject !== row.subject;
                                    return (
                                        <tr
                                            key={`${row.subject}-${row.outcome}-${index}`}
                                            className={`border-t border-border ${showSubject && index > 0 ? "border-t-2" : ""}`}
                                        >
                                            <td className="p-3 font-display font-bold text-foreground">
                                                {showSubject ? row.subject : ""}
                                            </td>
                                            <td className="p-3 text-foreground">{row.outcome}</td>
                                            <td className="p-3 text-center text-muted-foreground">{row.gradeLevel}</td>
                                            <td className="p-3 text-center">
                                                <span className={`inline-block px-2 py-0.5 rounded-full text-[0.6rem] font-semibold border ${getMasteryColor(row.term1)}`}>
                                                    {row.term1}
                                                </span>
                                            </td>
                                            <td className="p-3 text-center">
                                                <span className={`inline-block px-2 py-0.5 rounded-full text-[0.6rem] font-semibold border ${getMasteryColor(row.term2)}`}>
                                                    {row.term2}
                                                </span>
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                        </table>
                    </div>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.2 }}
                    className="bg-card rounded-xl border border-border overflow-hidden mb-8"
                >
                    <div className="p-5 border-b border-border">
                        <h3 className="font-display text-sm font-bold text-foreground flex items-center gap-2">
                            <Star className="w-4 h-4 text-primary" /> {data.competencyTitle}
                        </h3>
                        <p className="text-xs text-muted-foreground mt-1">{data.competencySubtitle}</p>
                    </div>
                    <div className="p-5 space-y-4">
                        {data.competencyProgress.map((comp) => (
                            <div key={comp.name} className="flex flex-col sm:flex-row sm:items-center gap-3">
                                <div className="sm:w-40 shrink-0">
                                    <p className="font-display text-xs font-bold text-foreground">{comp.name}</p>
                                    <p className="text-[0.6rem] text-muted-foreground">{comp.description}</p>
                                </div>
                                <div className="flex-1 flex items-center gap-3">
                                    <div className="flex-1 h-6 bg-muted/50 rounded-full relative overflow-hidden">
                                        <motion.div
                                            className={`h-full rounded-full ${getMasteryDot(comp.term1)} opacity-30`}
                                            initial={{ width: 0 }}
                                            whileInView={{ width: `${(parseMasteryLevel(comp.term1) / 4) * 100}%` }}
                                            viewport={{ once: true }}
                                            transition={{ duration: 0.6 }}
                                        />
                                        <motion.div
                                            className={`absolute top-0 left-0 h-full rounded-full ${getMasteryDot(comp.term2)}`}
                                            initial={{ width: 0 }}
                                            whileInView={{ width: `${(parseMasteryLevel(comp.term2) / 4) * 100}%` }}
                                            viewport={{ once: true }}
                                            transition={{ duration: 0.8, delay: 0.2 }}
                                            style={{ opacity: 0.7 }}
                                        />
                                    </div>
                                    <div className="flex gap-1.5 shrink-0">
                                        <span className={`text-[0.55rem] px-1.5 py-0.5 rounded border ${getMasteryColor(comp.term1)} font-semibold`}>
                                            T1
                                        </span>
                                        <span className={`text-[0.55rem] px-1.5 py-0.5 rounded border ${getMasteryColor(comp.term2)} font-semibold`}>
                                            T2
                                        </span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.22 }}
                    className="bg-card rounded-xl border border-border overflow-hidden mb-8"
                >
                    <div className="p-5 border-b border-border">
                        <h3 className="font-display text-sm font-bold text-foreground flex items-center gap-2">
                            <Star className="w-4 h-4 text-primary" /> {data.spiderTitle}
                        </h3>
                        <p className="text-xs text-muted-foreground mt-1">{data.spiderSubtitle}</p>
                    </div>
                    <div className="p-5">
                        <ResponsiveContainer width="100%" height={340}>
                            <RadarChart data={data.spiderPoints} cx="50%" cy="50%" outerRadius="75%">
                                <PolarGrid stroke="hsl(var(--border))" />
                                <PolarAngleAxis
                                    dataKey="competency"
                                    tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
                                />
                                <PolarRadiusAxis
                                    angle={90}
                                    domain={[0, 4]}
                                    tickCount={5}
                                    tick={{ fontSize: 9, fill: "hsl(var(--muted-foreground))" }}
                                />
                                <Radar
                                    name="Term 1"
                                    dataKey="term1"
                                    stroke="hsl(var(--sunflower))"
                                    fill="hsl(var(--sunflower))"
                                    fillOpacity={0.2}
                                    strokeWidth={2}
                                />
                                <Radar
                                    name="Term 2"
                                    dataKey="term2"
                                    stroke="hsl(var(--deep-sea))"
                                    fill="hsl(var(--deep-sea))"
                                    fillOpacity={0.3}
                                    strokeWidth={2}
                                />
                                <Legend wrapperStyle={{ fontSize: "0.7rem" }} />
                            </RadarChart>
                        </ResponsiveContainer>
                    </div>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.25 }}
                    className="bg-card rounded-xl border border-border overflow-hidden mb-8"
                >
                    <div className="p-5 border-b border-border">
                        <h3 className="font-display text-sm font-bold text-foreground flex items-center gap-2">
                            <Target className="w-4 h-4 text-primary" /> {data.readinessTitle}
                        </h3>
                        <p className="text-xs text-muted-foreground mt-1">{data.readinessSubtitle}</p>
                    </div>
                    <div className="p-5 grid grid-cols-3 gap-4">
                        {data.readiness.map((item) => (
                            <div key={item.subject} className="text-center bg-muted/30 rounded-xl p-4">
                                <p className="font-display text-xs font-bold text-foreground mb-1">{item.subject}</p>
                                <p className="text-2xl font-bold text-foreground mb-1">{item.pct}</p>
                                <p className="text-[0.65rem] text-muted-foreground">{item.status}</p>
                            </div>
                        ))}
                    </div>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.3 }}
                    className="bg-card rounded-xl border border-border p-6 mb-8"
                >
                    <h3 className="font-display text-sm font-bold text-foreground flex items-center gap-2 mb-4">
                        <MessageSquare className="w-4 h-4 text-primary" /> {data.reflectionTitle}
                    </h3>
                    <div className="space-y-4">
                        {data.reflectionItems.map((item) => (
                            <div key={item.label} className="bg-muted/30 rounded-lg p-4">
                                <p className="font-display text-xs font-bold text-foreground mb-1">
                                    {item.emoji} {item.label}
                                </p>
                                <p className="text-xs text-muted-foreground leading-relaxed italic">"{item.text}"</p>
                            </div>
                        ))}
                    </div>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.35 }}
                    className="bg-card rounded-xl border border-border p-6 mb-8"
                >
                    <h3 className="font-display text-sm font-bold text-foreground flex items-center gap-2 mb-4">
                        <FileText className="w-4 h-4 text-primary" /> {data.narrativeTitle}
                    </h3>
                    <div className="space-y-4">
                        {data.narrativeSections.map((section) => (
                            <div
                                key={section.label}
                                className={section.highlight ? "bg-moss/10 border border-moss/20 rounded-lg p-4" : undefined}
                            >
                                <p className={`font-display text-xs font-bold mb-1 ${section.highlight ? "text-moss" : "text-foreground"}`}>
                                    {section.emoji} {section.label}
                                </p>
                                <p className={`text-xs leading-relaxed ${section.highlight ? "text-moss/80" : "text-muted-foreground"}`}>
                                    {section.text}
                                </p>
                            </div>
                        ))}
                    </div>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.4 }}
                    className="bg-card rounded-xl border border-border p-6"
                >
                    <h3 className="font-display text-sm font-bold text-foreground flex items-center gap-2 mb-4">
                        <Archive className="w-4 h-4 text-primary" /> {data.archiveTitle}
                    </h3>
                    <div className="space-y-2">
                        {data.archiveItems.map((item) => (
                            <div
                                key={item}
                                className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded-lg px-4 py-2.5"
                            >
                                <FileText className="w-3.5 h-3.5" />
                                <span>{item}</span>
                            </div>
                        ))}
                    </div>
                </motion.div>
            </div>
        </section>
    );
}