"use client";

import dynamic from "next/dynamic";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Tabs } from "@/components/ui/tabs";
import type { ModuleScoreSummary } from "@/lib/scoring";

type DashboardViewProps = {
  moduleScores: ModuleScoreSummary[];
};

const ModuleBarsCard = dynamic(
  () => import("@/components/app/module-bars-card").then((module) => module.ModuleBarsCard),
  { ssr: false, loading: () => <div className="h-72 rounded-2xl border border-[#dde4f0] bg-white" /> },
);

const RadarChartCard = dynamic(
  () => import("@/components/app/radar-chart-card").then((module) => module.RadarChartCard),
  { ssr: false, loading: () => <div className="h-72 rounded-2xl border border-[#dde4f0] bg-white" /> },
);

export function DashboardView({ moduleScores }: DashboardViewProps) {
  const barData = moduleScores.map((moduleScore) => ({
    name: moduleScore.moduleName,
    value: Math.round(moduleScore.score),
  }));

  const radarData = moduleScores.map((moduleScore) => ({
    module: moduleScore.moduleName,
    score: Math.round(moduleScore.score),
  }));

  return (
    <Tabs
      items={[
        {
          id: "overview",
          label: "Overview",
          content: (
            <div className="grid gap-4 lg:grid-cols-2">
              <ModuleBarsCard data={barData} />
              <RadarChartCard data={radarData} />
            </div>
          ),
        },
        {
          id: "modules",
          label: "Modules",
          content: (
            <Card>
              <CardHeader>
                <h3 className="text-base font-semibold text-[#22314b]">Estado por modulo</h3>
              </CardHeader>
              <CardContent className="space-y-4">
                {moduleScores.map((moduleScore) => (
                  <div key={moduleScore.moduleId} className="rounded-lg border border-[#e3eaf5] p-3">
                    <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                      <p className="text-sm font-semibold text-[#32425d]">{moduleScore.moduleName}</p>
                      <Badge variant={moduleScore.status === "Completado" ? "success" : moduleScore.status === "En curso" ? "warning" : "neutral"}>
                        {moduleScore.status}
                      </Badge>
                    </div>

                    <div className="mb-1 flex items-center justify-between text-xs font-semibold text-[#5f6d86]">
                      <span>Score</span>
                      <span>{Math.round(moduleScore.score)}%</span>
                    </div>
                    <Progress value={moduleScore.score} />

                    <div className="mt-3 mb-1 flex items-center justify-between text-xs font-semibold text-[#5f6d86]">
                      <span>Avance</span>
                      <span>{Math.round(moduleScore.completion)}%</span>
                    </div>
                    <Progress value={moduleScore.completion} />
                  </div>
                ))}
              </CardContent>
            </Card>
          ),
        },
      ]}
    />
  );
}