import { useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
    Legend,
    PolarAngleAxis,
    PolarGrid,
    PolarRadiusAxis,
    Radar,
    RadarChart,
    ResponsiveContainer,
    Tooltip,
} from "recharts";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

type Content = Record<string, unknown>;

export type RadarPoint = {
    dimension: string;
    shortName: string;
    exposure: number;
    current: number;
};

export type RadarQuarter = {
    id: string;
    label: string;
    color: string;
    points: RadarPoint[];
};

const colorClass: Record<string, { bg: string; text: string }> = {
    "deep-sea": { bg: "bg-deep-sea", text: "text-deep-sea" },
    valencia: { bg: "bg-valencia", text: "text-valencia" },
    moss: { bg: "bg-moss", text: "text-moss" },
    sunflower: { bg: "bg-sunflower", text: "text-sunflower" },
    salmon: { bg: "bg-salmon", text: "text-salmon" },
    mist: { bg: "bg-mist", text: "text-mist" },
};

export const RADAR_COLOR_OPTIONS = [
    { value: "deep-sea", label: "Deep Sea" },
    { value: "valencia", label: "Valencia" },
    { value: "moss", label: "Moss" },
    { value: "sunflower", label: "Sunflower" },
    { value: "salmon", label: "Salmon" },
    { value: "mist", label: "Mist" },
] as const;

const defaultPointsQ1: RadarPoint[] = [
    { dimension: "Bold Visionary Leader", shortName: "Visionary", exposure: 60, current: 35 },
    { dimension: "Balanced Person", shortName: "Balanced", exposure: 55, current: 30 },
    { dimension: "Inspiring Communicator", shortName: "Communicator", exposure: 70, current: 45 },
    { dimension: "Resilient Problem Solver", shortName: "Problem Solver", exposure: 65, current: 25 },
    { dimension: "Respectful Relationship Builder", shortName: "Relationship", exposure: 60, current: 50 },
    { dimension: "Caring Citizen", shortName: "Citizen", exposure: 50, current: 30 },
];

export const defaultRadarQuarters: RadarQuarter[] = [
    {
        id: "q1",
        label: "Q1 · Explorer",
        color: "moss",
        points: defaultPointsQ1,
    },
    {
        id: "q2",
        label: "Q2 · Investigator",
        color: "deep-sea",
        points: [
            { dimension: "Bold Visionary Leader", shortName: "Visionary", exposure: 72, current: 48 },
            { dimension: "Balanced Person", shortName: "Balanced", exposure: 68, current: 42 },
            { dimension: "Inspiring Communicator", shortName: "Communicator", exposure: 78, current: 58 },
            { dimension: "Resilient Problem Solver", shortName: "Problem Solver", exposure: 75, current: 38 },
            { dimension: "Respectful Relationship Builder", shortName: "Relationship", exposure: 70, current: 60 },
            { dimension: "Caring Citizen", shortName: "Citizen", exposure: 65, current: 45 },
        ],
    },
    {
        id: "q3",
        label: "Q3 · Creator",
        color: "valencia",
        points: [
            { dimension: "Bold Visionary Leader", shortName: "Visionary", exposure: 82, current: 62 },
            { dimension: "Balanced Person", shortName: "Balanced", exposure: 78, current: 58 },
            { dimension: "Inspiring Communicator", shortName: "Communicator", exposure: 85, current: 72 },
            { dimension: "Resilient Problem Solver", shortName: "Problem Solver", exposure: 83, current: 55 },
            { dimension: "Respectful Relationship Builder", shortName: "Relationship", exposure: 80, current: 72 },
            { dimension: "Caring Citizen", shortName: "Citizen", exposure: 78, current: 60 },
        ],
    },
    {
        id: "q4",
        label: "Q4 · Ambassador",
        color: "sunflower",
        points: [
            { dimension: "Bold Visionary Leader", shortName: "Visionary", exposure: 90, current: 75 },
            { dimension: "Balanced Person", shortName: "Balanced", exposure: 88, current: 72 },
            { dimension: "Inspiring Communicator", shortName: "Communicator", exposure: 92, current: 85 },
            { dimension: "Resilient Problem Solver", shortName: "Problem Solver", exposure: 90, current: 70 },
            { dimension: "Respectful Relationship Builder", shortName: "Relationship", exposure: 88, current: 82 },
            { dimension: "Caring Citizen", shortName: "Citizen", exposure: 85, current: 75 },
        ],
    },
];

function str(value: unknown): string {
    return typeof value === "string" ? value : "";
}

function num(value: unknown, fallback = 0): number {
    if (typeof value === "number" && Number.isFinite(value)) return value;
    if (typeof value === "string" && value.trim() !== "") {
        const parsed = Number(value);
        if (Number.isFinite(parsed)) return parsed;
    }
    return fallback;
}

function resolveColor(color: string) {
    return colorClass[color] ?? colorClass.moss;
}

function parsePoints(raw: unknown): RadarPoint[] {
    if (!Array.isArray(raw)) return [];
    return raw
        .filter((item): item is Record<string, unknown> => item != null && typeof item === "object")
        .map((item) => ({
            dimension: str(item.dimension).trim(),
            shortName: str(item.shortName).trim(),
            exposure: num(item.exposure),
            current: num(item.current),
        }))
        .filter((item) => item.dimension || item.shortName);
}

export function parseRadarQuarters(content?: Content): RadarQuarter[] {
    const raw = content?.quarters;
    if (!Array.isArray(raw) || raw.length === 0) return defaultRadarQuarters;

    return raw
        .filter((item): item is Record<string, unknown> => item != null && typeof item === "object")
        .map((item, index) => ({
            id: str(item.id).trim() || `q${index + 1}`,
            label: str(item.label).trim() || `Q${index + 1}`,
            color: str(item.color).trim() || "moss",
            points: parsePoints(item.points),
        }))
        .filter((item) => item.label || item.points.length > 0);
}

export function GrowthRadarChartBlock({ content }: { content?: Content }) {
    const eyebrow = str(content?.eyebrow).trim();
    const eyebrowColor = str(content?.eyebrowColor).trim() || "salmon";
    const title = str(content?.title).trim();
    const subtitle = str(content?.subtitle).trim();
    const exposureLabel = str(content?.exposureLabel).trim() || "Exposure (from courses)";
    const currentLabel = str(content?.currentLabel).trim() || "Current Level";
    const quarters = parseRadarQuarters(content);
    const [selectedQuarter, setSelectedQuarter] = useState(quarters[0]?.id || "q1");
    const activeId = quarters.some((quarter) => quarter.id === selectedQuarter)
        ? selectedQuarter
        : (quarters[0]?.id || "q1");
    const activeQuarter = useMemo(
        () => quarters.find((quarter) => quarter.id === activeId) ?? quarters[0],
        [quarters, activeId],
    );
    const eyebrowTextClass = resolveColor(eyebrowColor).text;

    if (quarters.length === 0 && !eyebrow && !title && !subtitle) {
        return null;
    }

    return (
        <section className="py-16 bg-card">
            <div className="container mx-auto px-6 max-w-4xl">
                {(eyebrow || title || subtitle) ? (
                    <motion.div
                        className="text-center mb-8"
                        initial={{ opacity: 0, y: 10 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                    >
                        {eyebrow ? (
                            <p className={`font-display text-xs tracking-[0.2em] uppercase ${eyebrowTextClass} mb-2`}>
                                {eyebrow}
                            </p>
                        ) : null}
                        {title ? (
                            <h2 className="font-display text-2xl md:text-3xl font-bold text-foreground">
                                {title}
                            </h2>
                        ) : null}
                        {subtitle ? (
                            <p className="text-muted-foreground mt-2 text-sm max-w-lg mx-auto">
                                {subtitle}
                            </p>
                        ) : null}
                    </motion.div>
                ) : null}

                {quarters.length > 0 && activeQuarter ? (
                    <Tabs value={activeId} onValueChange={setSelectedQuarter} className="mb-8">
                        <TabsList className="grid grid-cols-4 max-w-md mx-auto">
                            {quarters.map((quarter) => (
                                <TabsTrigger
                                    key={quarter.id}
                                    value={quarter.id}
                                    className="font-display text-xs font-bold"
                                >
                                    {quarter.label.split(" · ")[0] || quarter.label}
                                </TabsTrigger>
                            ))}
                        </TabsList>

                        {quarters.map((quarter) => {
                            const tones = resolveColor(quarter.color);
                            const points = quarter.points;
                            return (
                                <TabsContent key={quarter.id} value={quarter.id}>
                                    <motion.div
                                        initial={{ opacity: 0, scale: 0.95 }}
                                        animate={{ opacity: 1, scale: 1 }}
                                        transition={{ duration: 0.3 }}
                                        className="bg-background rounded-2xl border border-border p-6"
                                    >
                                        <div className="flex items-center justify-center gap-2 mb-4">
                                            <span className={`inline-block w-3 h-3 rounded-full ${tones.bg}`} />
                                            <span className="font-display text-sm font-bold text-foreground">
                                                {quarter.label}
                                            </span>
                                        </div>

                                        {points.length > 0 ? (
                                            <div className="w-full" style={{ height: 380 }}>
                                                <ResponsiveContainer width="100%" height="100%">
                                                    <RadarChart data={points} cx="50%" cy="50%" outerRadius="75%">
                                                        <PolarGrid stroke="hsl(var(--border))" />
                                                        <PolarAngleAxis
                                                            dataKey="shortName"
                                                            tick={{
                                                                fontSize: 11,
                                                                fill: "hsl(var(--foreground))",
                                                                fontFamily: "Outfit",
                                                            }}
                                                        />
                                                        <PolarRadiusAxis
                                                            angle={90}
                                                            domain={[0, 100]}
                                                            tick={{
                                                                fontSize: 9,
                                                                fill: "hsl(var(--muted-foreground))",
                                                            }}
                                                        />
                                                        <Radar
                                                            name={exposureLabel}
                                                            dataKey="exposure"
                                                            stroke="hsl(var(--deep-sea))"
                                                            fill="hsl(var(--deep-sea))"
                                                            fillOpacity={0.25}
                                                            strokeWidth={2}
                                                        />
                                                        <Radar
                                                            name={currentLabel}
                                                            dataKey="current"
                                                            stroke="hsl(var(--valencia))"
                                                            fill="hsl(var(--valencia))"
                                                            fillOpacity={0.3}
                                                            strokeWidth={2}
                                                        />
                                                        <Legend wrapperStyle={{ fontSize: 12, fontFamily: "Outfit" }} />
                                                        <Tooltip
                                                            contentStyle={{
                                                                backgroundColor: "hsl(var(--card))",
                                                                border: "1px solid hsl(var(--border))",
                                                                borderRadius: 8,
                                                                fontSize: 12,
                                                                fontFamily: "Outfit",
                                                            }}
                                                        />
                                                    </RadarChart>
                                                </ResponsiveContainer>
                                            </div>
                                        ) : null}

                                        {points.length > 0 ? (
                                            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
                                                {points.map((point) => {
                                                    const gap = point.exposure - point.current;
                                                    return (
                                                        <div
                                                            key={point.dimension || point.shortName}
                                                            className="bg-muted rounded-lg p-3 text-center"
                                                        >
                                                            <p className="font-display text-xs font-bold text-foreground mb-1">
                                                                {point.shortName || point.dimension}
                                                            </p>
                                                            <div className="flex items-center justify-center gap-3 text-xs">
                                                                <span className="text-deep-sea font-bold">
                                                                    {point.exposure}%
                                                                </span>
                                                                <span className="text-muted-foreground">→</span>
                                                                <span className="text-valencia font-bold">
                                                                    {point.current}%
                                                                </span>
                                                            </div>
                                                            <p className="text-[0.65rem] text-muted-foreground mt-1">
                                                                Gap:{" "}
                                                                <span className={gap > 20 ? "text-valencia font-bold" : "text-moss font-bold"}>
                                                                    {gap}%
                                                                </span>
                                                            </p>
                                                        </div>
                                                    );
                                                })}
                                            </div>
                                        ) : null}
                                    </motion.div>
                                </TabsContent>
                            );
                        })}
                    </Tabs>
                ) : null}
            </div>
        </section>
    );
}