import { useState } from "react";
import { quarters } from "@/data/curriculum";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
  Tooltip,
  Legend,
} from "recharts";

const finksScores: Record<number, Record<string, number>> = {
  1: { "Foundational Knowledge": 85, Application: 60, Integration: 50, "Human Dimension": 55, Caring: 70, "Learning How to Learn": 75 },
  2: { "Foundational Knowledge": 75, Application: 80, Integration: 70, "Human Dimension": 65, Caring: 60, "Learning How to Learn": 80 },
  3: { "Foundational Knowledge": 65, Application: 90, Integration: 75, "Human Dimension": 75, Caring: 70, "Learning How to Learn": 85 },
  4: { "Foundational Knowledge": 90, Application: 95, Integration: 95, "Human Dimension": 90, Caring: 90, "Learning How to Learn": 90 },
};

const quarterColors: Record<number, string> = {
  1: "hsl(54, 77%, 35%)",
  2: "hsl(184, 100%, 27%)",
  3: "hsl(22, 92%, 64%)",
  4: "hsl(48, 93%, 45%)",
};

const quarterLabels: Record<string, string> = {
  year: "Full Year Average",
  "1": "Q1 · The Nature Investigator",
  "2": "Q2 · The Data Scientist",
  "3": "Q3 · The Young Engineer",
  "4": "Q4 · The Habitat Founder",
};

const tooltipStyle = {
  background: "hsl(var(--card))",
  border: "1px solid hsl(var(--border))",
  borderRadius: 8,
  fontFamily: "Outfit",
};

export const GrowthDashboard = () => {
  const [portraitView, setPortraitView] = useState("year");
  const [finksView, setFinksView] = useState("year");

  const getPortraitData = (view: string) => {
    const dimensions = quarters[0].portraitOfLearner.map((d) => d.dimension);
    if (view === "year") {
      return dimensions.map((dim) => {
        const avg = quarters.reduce((sum, q) => {
          const found = q.portraitOfLearner.find((p) => p.dimension === dim);
          return sum + (found?.pct || 0);
        }, 0) / quarters.length;
        return { dimension: dim, value: Math.round(avg), fullMark: 100 };
      });
    }
    const q = quarters.find((q) => q.id === Number(view))!;
    return q.portraitOfLearner.map((p) => ({ dimension: p.dimension, value: p.pct, fullMark: 100 }));
  };

  const getFinksData = (view: string) => {
    const categories = Object.keys(finksScores[1]);
    if (view === "year") {
      return categories.map((cat) => {
        const avg = [1, 2, 3, 4].reduce((sum, qId) => sum + finksScores[qId][cat], 0) / 4;
        return { category: cat, value: Math.round(avg), fullMark: 100 };
      });
    }
    const qId = Number(view);
    return categories.map((cat) => ({ category: cat, value: finksScores[qId][cat], fullMark: 100 }));
  };

  const getComparisonData = (view: string, type: "portrait" | "finks") => {
    if (view !== "year") return null;
    if (type === "portrait") {
      const dimensions = quarters[0].portraitOfLearner.map((d) => d.dimension);
      return dimensions.map((dim) => {
        const entry: Record<string, string | number> = { dimension: dim };
        quarters.forEach((q) => {
          const found = q.portraitOfLearner.find((p) => p.dimension === dim);
          entry[`Q${q.id}`] = found?.pct || 0;
        });
        return entry;
      });
    }
    const categories = Object.keys(finksScores[1]);
    return categories.map((cat) => {
      const entry: Record<string, string | number> = { category: cat };
      [1, 2, 3, 4].forEach((qId) => { entry[`Q${qId}`] = finksScores[qId][cat]; });
      return entry;
    });
  };

  const portraitData = getPortraitData(portraitView);
  const finksData = getFinksData(finksView);
  const portraitComparison = getComparisonData(portraitView, "portrait");
  const finksComparison = getComparisonData(finksView, "finks");
  const radarFill = (view: string) => view === "year" ? "hsl(184, 100%, 27%)" : quarterColors[Number(view)];

  const QuarterSelect = ({ value, onChange }: { value: string; onChange: (v: string) => void }) => (
    <Select value={value} onValueChange={onChange}>
      <SelectTrigger className="w-[240px] font-display">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="year">Full Year Average</SelectItem>
        <SelectItem value="1">Q1 · Nature Investigator</SelectItem>
        <SelectItem value="2">Q2 · Data Scientist</SelectItem>
        <SelectItem value="3">Q3 · Young Engineer</SelectItem>
        <SelectItem value="4">Q4 · Habitat Founder</SelectItem>
      </SelectContent>
    </Select>
  );

  const renderRadar = (view: string, data: any[], comparison: any[] | null, dataKey: string) => {
    if (view === "year" && comparison) {
      return (
        <ResponsiveContainer width="100%" height={450}>
          <RadarChart data={comparison} outerRadius="75%">
            <PolarGrid stroke="hsl(var(--border))" />
            <PolarAngleAxis dataKey={dataKey} tick={{ fontSize: 11, fill: "hsl(var(--foreground))" }} />
            <PolarRadiusAxis angle={30} domain={[0, 100]} tick={{ fontSize: 10 }} />
            {quarters.map((q) => (
              <Radar key={q.id} name={`Q${q.id}`} dataKey={`Q${q.id}`} stroke={quarterColors[q.id]} fill={quarterColors[q.id]} fillOpacity={0.08} strokeWidth={2} />
            ))}
            <Legend wrapperStyle={{ fontFamily: "Outfit", fontSize: 13 }} />
            <Tooltip contentStyle={tooltipStyle} />
          </RadarChart>
        </ResponsiveContainer>
      );
    }
    return (
      <ResponsiveContainer width="100%" height={450}>
        <RadarChart data={data} outerRadius="75%">
          <PolarGrid stroke="hsl(var(--border))" />
          <PolarAngleAxis dataKey={dataKey} tick={{ fontSize: 11, fill: "hsl(var(--foreground))" }} />
          <PolarRadiusAxis angle={30} domain={[0, 100]} tick={{ fontSize: 10 }} />
          <Radar name="Score" dataKey="value" stroke={radarFill(view)} fill={radarFill(view)} fillOpacity={0.2} strokeWidth={2} />
          <Tooltip contentStyle={tooltipStyle} />
        </RadarChart>
      </ResponsiveContainer>
    );
  };

  return (
    <div className="space-y-16">
      {/* Portrait of the Learner */}
      <section>
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
          <div>
            <h2 className="font-display text-2xl font-bold text-foreground">🕸️ Portrait of the Learner</h2>
            <p className="text-muted-foreground text-sm mt-1">{quarterLabels[portraitView]}</p>
          </div>
          <QuarterSelect value={portraitView} onChange={setPortraitView} />
        </div>
        <div className="bg-card rounded-2xl border border-border p-6">
          {renderRadar(portraitView, portraitData, portraitComparison, "dimension")}
        </div>
        {portraitView !== "year" && (
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
            {quarters.find((q) => q.id === Number(portraitView))!.portraitOfLearner.map((dim) => (
              <div key={dim.dimension} className="bg-card rounded-xl p-4 border border-border">
                <div className="flex items-center gap-2 mb-1">
                  <span>{dim.emoji}</span>
                  <span className="font-display text-sm font-semibold text-foreground">{dim.dimension}</span>
                </div>
                <p className="text-muted-foreground text-xs">{dim.description}</p>
                <div className="mt-2 h-2 bg-secondary rounded-full overflow-hidden">
                  <div className="h-full rounded-full transition-all" style={{ width: `${dim.pct}%`, background: quarterColors[Number(portraitView)] }} />
                </div>
                <p className="text-right text-xs font-display font-bold text-muted-foreground mt-1">{dim.pct}%</p>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Fink's Taxonomy */}
      <section>
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
          <div>
            <h2 className="font-display text-2xl font-bold text-foreground">🕸️ Fink's Taxonomy of Significant Learning</h2>
            <p className="text-muted-foreground text-sm mt-1">{quarterLabels[finksView]}</p>
          </div>
          <QuarterSelect value={finksView} onChange={setFinksView} />
        </div>
        <div className="bg-card rounded-2xl border border-border p-6">
          {renderRadar(finksView, finksData, finksComparison, "category")}
        </div>
        {finksView !== "year" && (
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
            {quarters.find((q) => q.id === Number(finksView))!.finksTaxonomy.map((item) => (
              <div key={item.category} className="bg-card rounded-xl p-4 border border-border">
                <div className="flex items-center gap-2 mb-1">
                  <span>{item.emoji}</span>
                  <span className="font-display text-sm font-semibold text-foreground">{item.category}</span>
                </div>
                <p className="text-muted-foreground text-xs">{item.description}</p>
                <div className="mt-2 h-2 bg-secondary rounded-full overflow-hidden">
                  <div className="h-full rounded-full transition-all" style={{ width: `${finksScores[Number(finksView)][item.category]}%`, background: quarterColors[Number(finksView)] }} />
                </div>
                <p className="text-right text-xs font-display font-bold text-muted-foreground mt-1">{finksScores[Number(finksView)][item.category]}%</p>
              </div>
            ))}
          </div>
        )}
      </section>
    </div>
  );
};