"use client";
import { MessageCircle } from "lucide-react";
import { Panel } from "@/components/shared/page";
import { useQueryUpdate } from "@/components/shared/tabs";
import { Button } from "@/components/ui/button";
export function UsageCounter({
  month,
  empty = false,
}: {
  month: "2026-09" | "2026-10";
  empty?: boolean;
}) {
  const update = useQueryUpdate();
  const messages = empty ? 0 : month === "2026-09" ? 945 : 1280;
  return (
    <Panel>
      <div className="flex flex-wrap items-center justify-between gap-4 p-5">
        <div className="flex items-center gap-4">
          <div className="rounded-full bg-info/10 p-3 text-info">
            <MessageCircle className="size-5" />
          </div>
          <div>
            <h2 className="text-sm font-semibold text-muted-foreground">
              Message used
            </h2>
            <p className="mt-1 text-2xl font-bold">
              {messages.toLocaleString("en-US")} / 10,000
            </p>
            <p className="mt-1 text-xs text-muted-foreground">
              Monthly message usage ·{" "}
              {month === "2026-09" ? "September" : "October"} 2026
            </p>
          </div>
        </div>
        <label className="sr-only" htmlFor="usage-month">
          Usage month
        </label>
        <select
          id="usage-month"
          value={month}
          onChange={(e) => update({ month: e.target.value })}
          className="form-input w-44"
        >
          <option value="2026-10">October 2026</option>
          <option value="2026-09">September 2026</option>
        </select>
        <progress
          aria-label="Monthly message quota used"
          className="usage-progress h-2 w-full overflow-hidden rounded-full"
          value={messages}
          max={10000}
        />
      </div>
    </Panel>
  );
}
export function DashboardFailure() {
  const update = useQueryUpdate();
  return (
    <Panel title="Dashboard unavailable">
      <div role="alert" className="space-y-4 p-6">
        <p>Unable to load the dashboard fixture.</p>
        <Button variant="outline" onClick={() => update({ state: null })}>
          Try again
        </Button>
      </div>
    </Panel>
  );
}