"use client";
import { useState } from "react";
import { Info } from "lucide-react";
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import type { DashboardSummary } from "./types";
const periods = [
  "This Day",
  "This Week",
  "This Month",
  "This Year",
  "All Time",
];
export function CarbonCard({ summary }: { summary: DashboardSummary }) {
  const [period, setPeriod] = useState("This Day");
  const helper =
    period === "All Time"
      ? "across all recorded sessions"
      : period === "This Day"
        ? "today"
        : period.toLowerCase();
  const number = (value: number, digits: number) =>
    value.toLocaleString("id-ID", {
      minimumFractionDigits: digits,
      maximumFractionDigits: digits,
    });
  return (
    <section className="detail-panel p-5 sm:p-6">
      <div className="mb-5 flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
        <div>
          <div className="flex items-center gap-2">
            <h2 className="text-lg font-semibold">EV Charging CO₂ Avoided</h2>
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  type="button"
                  aria-label="Methodology & assumptions"
                  className="flex size-6 items-center justify-center rounded-full border text-muted-foreground"
                >
                  <Info className="size-3.5" />
                </button>
              </TooltipTrigger>
              <TooltipContent className="max-w-xs">
                Estimated tailpipe emissions avoided compared to a gasoline
                vehicle. EV efficiency and fuel emission factors are
                illustrative.
              </TooltipContent>
            </Tooltip>
          </div>
          <p className="mt-1 text-muted-foreground">
            Tailpipe CO₂ avoided by EV charging {helper}
          </p>
        </div>
        <div
          className="flex w-fit max-w-full flex-wrap rounded-lg border p-1"
          role="group"
          aria-label="Carbon reporting period"
        >
          {periods.map((p) => (
            <button
              key={p}
              aria-pressed={period === p}
              className={cn(
                "rounded-md px-3 py-1.5 text-sm",
                period === p
                  ? "bg-foreground text-background"
                  : "text-muted-foreground",
              )}
              onClick={() => setPeriod(p)}
            >
              {p}
            </button>
          ))}
        </div>
      </div>
      <div className="mb-5 grid gap-4 sm:grid-cols-2">
        <div className="rounded-xl bg-muted px-4 py-3 dark:bg-muted/20">
          <p className="metric-label tracking-wide">
            Total EV Energy Delivered
          </p>
          <p className="mt-1 text-2xl font-semibold">
            {number(summary.energy, 2)}{" "}
            <span className="text-sm font-normal text-muted-foreground">
              kWh
            </span>
          </p>
        </div>
        <div className="rounded-xl bg-carbon-surface px-4 py-3 text-carbon">
          <p className="text-xs font-medium uppercase tracking-wide">
            EV Charging CO₂ Avoided
          </p>
          <p className="mt-1 text-2xl font-semibold">
            {number(summary.carbon, 2)}{" "}
            <span className="text-sm font-normal">kgCO₂e</span>
          </p>
          <p className="mt-1 text-xs">
            Compared to an average gasoline car&apos;s tailpipe emissions
            baseline.
          </p>
        </div>
      </div>
      <div className="grid gap-2 sm:grid-cols-3">
        {[
          {
            label: "Gasoline car distance",
            value: "0 km",
            suffix: "of driving in a typical gasoline car.",
          },
          {
            label: "Gasoline fuel avoided",
            value: "0,0 L",
            suffix: "of gasoline not burned.",
          },
          {
            label: "Diesel fuel avoided",
            value: "0,0 L",
            suffix: "of diesel not burned.",
          },
        ].map(({ label, value, suffix }) => (
          <div
            key={label}
            className="rounded-lg border bg-muted/80 px-3 py-2 text-xs dark:bg-muted/10"
          >
            <p className="mb-0.5 font-medium">{label}</p>
            <p>
              ≈ <strong>{value}</strong> {suffix}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}