import { Leaf, Zap, Banknote, CheckCircle, Users } from "lucide-react";
import { PageHeader, Panel } from "@/components/shared/page";
import { ChartPanel } from "@/components/shared/chart";
import { costSeries, week } from "./fixtures";
import { currency } from "@/lib/format";
import { DashboardFailure } from "./usage-counter";
export function DashboardView({
  empty = false,
  failed = false,
}: {
  empty?: boolean;
  failed?: boolean;
}) {
  const metrics = [
    {
      label: "Energy Delivered",
      value: empty ? "0 kWh" : "12,485.60 kWh",
      change: "+12.6%",
      icon: Zap,
    },
    {
      label: "Revenue",
      value: currency(empty ? 0 : 30820000),
      change: "+8.2%",
      icon: Banknote,
    },
    {
      label: "Success Sessions",
      value: empty ? "0" : "1,248",
      change: "+10.4%",
      icon: CheckCircle,
    },
    {
      label: "New Users",
      value: empty ? "0" : "186",
      change: "+6.8%",
      icon: Users,
    },
  ];
  if (failed)
    return (
      <>
        <PageHeader title="Dashboard" />
        <DashboardFailure />
      </>
    );
  return (
    <>
      <PageHeader title="Dashboard" />
      <div className="page-grid">
        <Panel>
          <div className="rounded-xl bg-carbon-surface p-6 text-carbon">
            <div className="flex items-center gap-2">
              <Leaf className="size-6" />
              <h2 className="font-semibold">Carbon Emission Avoided</h2>
            </div>
            <div className="mt-6 grid gap-5 sm:grid-cols-3">
              <div>
                <p className="text-3xl font-bold">
                  {empty ? "0" : "10,487.90"}{" "}
                  <span className="text-base font-normal">kg CO₂</span>
                </p>
                <p className="mt-2 text-xs opacity-70">
                  Total emissions avoided
                </p>
              </div>
              <div>
                <p className="text-2xl font-semibold">{empty ? "0" : "475"}</p>
                <p className="mt-2 text-xs opacity-70">
                  Equivalent trees planted
                </p>
              </div>
              <div>
                <p className="text-2xl font-semibold">
                  {empty ? "0" : "45,600"} km
                </p>
                <p className="mt-2 text-xs opacity-70">
                  Equivalent driving distance
                </p>
              </div>
            </div>
          </div>
        </Panel>
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {metrics.map((m) => (
            <Panel key={m.label}>
              <div className="p-5">
                <div className="mb-5 flex size-11 items-center justify-center rounded-xl bg-muted">
                  <m.icon className="size-5" />
                </div>
                <p className="text-sm text-muted-foreground">{m.label}</p>
                <p className="mt-2 break-words text-2xl font-semibold">
                  {m.value}
                </p>
                <p className="mt-3 text-xs text-success">
                  {empty ? "0%" : m.change}
                  <span className="ml-2 text-muted-foreground">
                    vs last month
                  </span>
                </p>
              </div>
            </Panel>
          ))}
        </div>
        <ChartPanel
          title="Cost Breakdown"
          type="bar"
          categories={week}
          series={
            empty
              ? costSeries.map((s) => ({ ...s, data: [0, 0, 0, 0, 0, 0, 0] }))
              : costSeries
          }
        />
        <ChartPanel
          title="Active Users"
          type="area"
          categories={week}
          series={[
            {
              name: "Active Users",
              data: empty
                ? [0, 0, 0, 0, 0, 0, 0]
                : [120, 175, 160, 230, 200, 310, 285],
            },
          ]}
        />
      </div>
    </>
  );
}