"use client";

import { useRouter } from "next/navigation";

const MONTHS = ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"];

export function YearSelector({
  currentYear,
  availableYears,
}: {
  currentYear: number;
  availableYears: number[];
}) {
  const router = useRouter();
  const thisYear = new Date().getFullYear();

  function go(y: number) {
    router.push(`/admin/analytics?year=${y}`);
  }

  return (
    <div className="flex items-center gap-3">
      <button
        onClick={() => go(currentYear - 1)}
        className="w-8 h-8 rounded-lg border border-[#e5e7eb] flex items-center justify-center text-[#71717a] hover:border-[#1A463C] hover:text-[#1A463C] transition-colors"
        aria-label="Anno precedente"
      >
        ←
      </button>
      <span className="text-lg font-bold text-[#1a1a1a] tabular-nums w-14 text-center">
        {currentYear}
      </span>
      <button
        onClick={() => go(currentYear + 1)}
        disabled={currentYear >= thisYear}
        className="w-8 h-8 rounded-lg border border-[#e5e7eb] flex items-center justify-center text-[#71717a] hover:border-[#1A463C] hover:text-[#1A463C] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
        aria-label="Anno successivo"
      >
        →
      </button>
    </div>
  );
}

export function MonthlyChart({ data, year }: { data: number[]; year: number }) {
  const max = Math.max(...data, 1);

  return (
    <div className="bg-white rounded-xl border border-[#e5e7eb] p-6">
      <h3 className="text-sm font-bold text-[#1a1a1a] mb-6">Incassato mese per mese — {year}</h3>
      <div className="flex items-end gap-2 h-40">
        {data.map((val, i) => {
          const pct = Math.round((val / max) * 100);
          return (
            <div key={i} className="flex-1 flex flex-col items-center gap-1">
              <div className="w-full flex flex-col justify-end" style={{ height: "120px" }}>
                <div
                  className="w-full rounded-t-md bg-[#1A463C] transition-all"
                  style={{ height: `${pct}%`, minHeight: val > 0 ? "4px" : "0" }}
                  title={`€ ${val.toLocaleString("it-IT", { minimumFractionDigits: 2 })}`}
                />
              </div>
              <span className="text-[10px] text-[#71717a]">{MONTHS[i]}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}