"use client";

import { useState } from "react";
import { Download, BarChart3 } from "@/components/ui/icons";
import { Panel, PanelHeader } from "@/components/ui/panel";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import { revenueByMonth } from "@/lib/mock-data";

type Range = "mois" | "annee" | "tout";

const RANGES: { key: Range; label: string }[] = [
  { key: "mois", label: "Mois" },
  { key: "annee", label: "Année" },
  { key: "tout", label: "Tout" },
];

export function RevenuePanel() {
  const [range, setRange] = useState<Range>("annee");
  const isEmpty = revenueByMonth.length === 0;

  return (
    <Panel>
      <PanelHeader
        title="Chiffre d'affaires"
        subtitle="Suivi des encaissements mensuels"
        trailing={
          <>
            <div className="flex items-center rounded-md border border-border bg-stone-900/[0.03] p-0.5">
              {RANGES.map((r) => (
                <button
                  key={r.key}
                  type="button"
                  onClick={() => setRange(r.key)}
                  className={`px-3 py-1 text-xs font-medium rounded transition-colors ${
                    range === r.key
                      ? "bg-surface text-text shadow-sm"
                      : "text-text-dim hover:text-text"
                  }`}
                >
                  {r.label}
                </button>
              ))}
            </div>
            <Button variant="ghost" size="sm" disabled={isEmpty}>
              <Download className="size-3.5" />
              Exporter
            </Button>
          </>
        }
      />
      <EmptyState
        icon={BarChart3}
        title="Aucun chiffre d'affaires"
        description="Les encaissements remontés depuis Stripe alimenteront automatiquement ce graphique."
      />
    </Panel>
  );
}