"use client";

import { useState, useMemo } from "react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
  CardDescription,
} from "@/app/shadcn_components/ui/card";
import { BarChart, DonutChart } from "@tremor/react";
import { formatNumber } from "@/app/utils";
import {
  PoundSterling,
  Leaf,
  Zap,
  Home,
  CarIcon,
  LineChart,
  CoinsIcon,
} from "lucide-react";
import { motion } from "framer-motion";

const mappedTitles: Record<string, string> = {
  solar_eco4: "Solar ECO4 project metrics",
  solar_hhrsh_eco4: "Solar & HHRSH ECO4 project metrics",
  empty_cavity_eco: "Empty Cavity Insulation metrics",
  partial_cavity_eco: "Partial Cavity Insulation metrics",
  extraction_eco: "Cavity Extraction & Refill project metrics",
  default: "Select a work type to view metrics",
};

const displayNames: Record<string, string> = {
  solar_eco4: "Solar ECO4",
  solar_hhrsh_eco4: "Solar & HHRSH ECO4",
  empty_cavity_eco: "Empty Cavity Insulation",
  partial_cavity_eco: "Partial Cavity Insulation",
  extraction_eco: "Cavity Extraction & Refill",
};

const cardStyles: Record<string, { color: string; icon: React.ElementType }> = {
  "Number of Homes": { color: "text-purple-600", icon: Home },
  "Estimated Capex Investment": {
    color: "text-green-600",
    icon: PoundSterling,
  },
  "Total Funding": { color: "text-brandbrown", icon: CoinsIcon },
  "Bill Savings": { color: "text-amber-600", icon: Zap },
  "Average post SAP": { color: "text-blue-600", icon: LineChart },
  "Carbon Savings": { color: "text-emerald-600", icon: Leaf },
};

export function ProjectProposal({ plans }: { plans: any[] }) {
  const grouped = useMemo(() => {
    const map: Record<string, any[]> = {};
    for (const plan of plans) {
      if (!plan.planType) continue;
      if (!map[plan.planType]) map[plan.planType] = [];
      map[plan.planType].push(plan);
    }

    return Object.entries(map).map(([type, list]) => {
      const totalFunding = list.reduce(
        (sum, p) => sum + (p.totalFunding ?? 0),
        0
      );
      const totalClientContribution = list.reduce(
        (sum, p) => sum + (p.clientContribution ?? 0),
        0
      );
      const totalCarbon = list.reduce(
        (sum, p) => sum + (p.totalCarbonSavings ?? 0),
        0
      );
      const totalBills = list.reduce(
        (sum, p) => sum + (p.totalBillSavings ?? 0),
        0
      );
      const avgSapPost =
        list.reduce((sum, p) => sum + (p.averageSapPost ?? 0), 0) / list.length;

      return {
        planType: type,
        label: displayNames[type] || type, // 👈 new human-friendly label
        count: list.length,
        avgClientContribution: totalClientContribution / list.length,
        totalClientContribution,
        totalFunding,
        totalCarbon,
        totalBills,
        avgSapPost,
      };
    });
  }, [plans]);

  const [selectedType, setSelectedType] = useState<string | null>(
    grouped[0]?.planType ?? null
  );

  // Derive the selected data safely
  const selectedData = useMemo(() => {
    if (!selectedType || !grouped.length) return null;
    return grouped.find((d) => d.planType === selectedType) ?? grouped[0];
  }, [grouped, selectedType]);

  return (
    <div className="grid grid-cols-1 grid-cols-4 gap-4">
      {/* Chart */}
      <Card className="col-span-2 border border-gray-100 bg-gradient-to-br from-white to-gray-50/40 shadow-sm">
        <CardHeader>
          <CardTitle className="text-base font-medium text-brandblue">
            Homes by Work Type
          </CardTitle>
          {grouped.length > 1 && (
            <CardDescription className="text-sm text-gray-500">
              Click on the bars to view metrics for each work type.
            </CardDescription>
          )}
        </CardHeader>
        <CardContent>
          {grouped.length > 1 ? (
            <BarChart
              data={grouped}
              index="label" // 👈 use label instead of planType
              categories={["count"]}
              colors={["#2d348f", "#14163d", "#3943b7", "#5d6be0"]}
              valueFormatter={(v) => v.toString()}
              onValueChange={(v) =>
                setSelectedType(
                  v && typeof v === "object" && "planType" in v
                    ? String((v as any).planType)
                    : null
                )
              }
              className="h-64"
            />
          ) : (
            <DonutChart
              data={grouped}
              category="count"
              index="planType"
              colors={["#2d348f", "#14163d", "#3943b7", "#5d6be0"]}
              valueFormatter={(v) => `${v} home${v === 1 ? "" : "s"}`}
            />
          )}
        </CardContent>
      </Card>

      {/* Metrics */}
      <Card className="col-span-2 border border-gray-200 bg-white">
        <CardHeader>
          <CardTitle className="text-lg font-semibold text-brandblue">
            {mappedTitles[selectedType || "default"]}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-8">
          {/* --- Top Row: Investment + Funding --- */}
          <div className="grid grid-cols-2 gap-4 border-b border-gray-100 pb-6">
            <div className="flex flex-col items-start justify-center bg-gradient-to-br from-amber-50/50 to-white rounded-xl p-4 shadow-sm">
              <div className="flex items-center gap-2 mb-1">
                <PoundSterling className="h-4 w-4 text-brandbrown" />
                <p className="text-sm text-gray-600 font-medium">
                  Capex Investment
                </p>
              </div>
              <p className="text-3xl font-bold text-brandbrown leading-tight">
                £{formatNumber(selectedData?.totalClientContribution || 0)}
              </p>
              <p className="text-xs text-gray-500 mt-1">
                Avg per home £
                {formatNumber(selectedData?.avgClientContribution || 0)}
              </p>
            </div>

            <div className="flex flex-col items-start justify-center bg-gradient-to-br from-blue-50/50 to-white rounded-xl p-4 shadow-sm">
              <div className="flex items-center gap-2 mb-1">
                <CoinsIcon className="h-4 w-4 text-brandblue" />
                <p className="text-sm text-gray-600 font-medium">
                  Funding Unlocked
                </p>
              </div>
              <p className="text-3xl font-bold text-brandblue leading-tight">
                £{formatNumber(selectedData?.totalFunding || 0)}
              </p>
              <p className="text-xs text-gray-500 mt-1">
                Total funding available for this work type
              </p>
            </div>
          </div>

          {/* --- Bottom Row: Bills, Carbon, Post-SAP --- */}
          <div className="grid grid-cols-3 gap-4 text-center">
            <div className="bg-white rounded-lg shadow-sm p-3 hover:bg-gray-50 transition-colors">
              <Zap className="h-4 w-4 mx-auto text-amber-600 mb-1" />
              <p className="text-xs text-gray-500 mb-1">Bill Savings</p>
              <p className="text-md font-semibold text-brandblue">
                £{formatNumber(selectedData?.totalBills || 0)}
              </p>
            </div>

            <div className="bg-white rounded-lg shadow-sm p-3 hover:bg-gray-50 transition-colors">
              <Leaf className="h-4 w-4 mx-auto text-emerald-600 mb-1" />
              <p className="text-xs text-gray-500 mb-1">Carbon Savings</p>
              <p className="text-md font-semibold text-brandblue">
                {formatNumber((selectedData?.totalCarbon || 0) * 1000)}
                <span className="text-xs text-gray-600 align-bottom">
                  kgCO₂e
                </span>
              </p>
            </div>

            <div className="bg-white rounded-lg shadow-sm p-3 hover:bg-gray-50 transition-colors">
              <LineChart className="h-4 w-4 mx-auto text-blue-600 mb-1" />
              <p className="text-xs text-gray-500 mb-1">Avg Post-SAP</p>
              <p className="text-md font-semibold text-brandblue">
                {selectedData?.avgSapPost
                  ? Number(selectedData.avgSapPost).toFixed(0)
                  : "—"}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export function DashboardSummary({ plans }: { plans: any[] }) {
  const totalFunding = plans.reduce((sum, p) => sum + (p.totalFunding || 0), 0);
  const totalInvestment = plans.reduce(
    (sum, p) => sum + (p.clientContribution || 0),
    0
  );
  const totalCarbon = plans.reduce(
    (sum, p) => sum + (p.totalCarbonSavings || 0),
    0
  );
  const averageSapPost =
    plans.reduce((sum, p) => sum + (p.averageSapPost || 0), 0) / plans.length;

  const averageBillSavings =
    plans.reduce((sum, p) => sum + (p.totalBillSavings || 0), 0) / plans.length;

  const totalBills = plans.reduce(
    (sum, p) => sum + (p.totalBillSavings || 0),
    0
  );
  const planCount = plans.length;

  // Will be using this UK gov report for car stats:
  //www.gov.uk/government/statistics/vehicle-licensing-statistics-2022/vehicle-licensing-statistics-2022.
  // https: "In the UK, the average CO2 emissions for cars registered for the first time in 2022 was 110.8 grams per kilometre (g/km)";
  const avgCarCO2PerYearKg = (108 * 11_000) / 1000; // average 108 g/km × 11,000 km
  const carsOffRoad = Math.round((totalCarbon * 1000) / avgCarCO2PerYearKg);

  const cards: {
    title: string;
    value: string | number | React.ReactNode;
    subtitle: string | React.ReactNode;
    icon: React.ElementType;
  }[] = [
    {
      title: "Number of Homes",
      value: planCount,
      subtitle: "Properties included across your project plans.",
      icon: Home,
    },
    {
      title: "Estimated Capex Investment",
      value: `£${formatNumber(totalInvestment)}`,
      subtitle:
        "This is an estimate of the total investment needed for your project.",
      icon: PoundSterling,
    },
    {
      title: "Total Funding",
      value: `£${formatNumber(totalFunding)}`,
      subtitle: "Domna will help you unlock this much grant funding.",
      icon: CoinsIcon,
    },
    {
      title: "Bill Savings",
      value: `£${formatNumber(totalBills)}`,
      subtitle: `This amounts to a £${formatNumber(averageBillSavings ? Number(averageBillSavings.toFixed(0)) : 0)} saving per home`,
      icon: Zap,
    },
    {
      title: "Average post SAP",
      value: `${averageSapPost.toFixed(0)}`,
      subtitle: "Expected average SAP rating across all homes, after works.",
      icon: LineChart,
    },
    {
      title: "Carbon Savings",
      value: (
        <>
          {formatNumber(totalCarbon * 1000)}{" "}
          <span className="text-sm text-gray-600 align-bottom">kgCO₂e</span>
        </>
      ),
      subtitle: (
        <>
          <span>
            This is equivalent to removing {carsOffRoad} cars from the road for
            one year.
          </span>
          <CarIcon className="inline-block ml-1 h-4 w-4 text-gray-500 align-middle text-brandbrown" />
        </>
      ),
      icon: Leaf,
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
      {cards.map((c) => {
        const style = cardStyles[c.title] || {
          color: "text-brandblue",
          icon: Home,
        };
        const Icon = style.icon;

        return (
          <Card
            key={c.title}
            className="relative h-full flex flex-col border border-gray-100 bg-gradient-to-br from-white to-brandlightblue/10 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300"
          >
            <CardHeader className="flex flex-row items-center gap-2 pb-1">
              <div className="p-1.5 rounded-md bg-brandlightblue/40">
                <motion.div
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.95 }}
                  className="p-1.5 rounded-md bg-brandlightblue/40"
                >
                  <Icon className={`h-4 w-4 ${style.color}`} />
                </motion.div>
              </div>
              <CardTitle className="text-md font-medium text-gray-600 mb-2">
                {c.title}
              </CardTitle>
            </CardHeader>

            <CardContent className="flex flex-1 flex-col pb-2 mb-2">
              <div className="flex items-baseline gap-1">
                <div className="text-3xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-brandblue to-midblue">
                  {c.value}
                </div>
              </div>
            </CardContent>

            <CardFooter className="pt-0 pb-4">
              <p className="text-xs text-gray-500">{c.subtitle}</p>
            </CardFooter>
          </Card>
        );
      })}
    </div>
  );
}
