import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { BarChart3, Table } from "lucide-react";

export type ViewMode = "chart" | "table";

export interface ViewModeToggleProps {
  value: ViewMode;
  onChange: (mode: ViewMode) => void;
  /** localStorage key used to persist the preference per section. */
  storageKey?: string;
}

export function readViewMode(storageKey: string, fallback: ViewMode = "chart"): ViewMode {
  if (typeof localStorage === "undefined") return fallback;
  const saved = localStorage.getItem(storageKey);
  return saved === "chart" || saved === "table" ? saved : fallback;
}

export default function ViewModeToggle({ value, onChange, storageKey }: ViewModeToggleProps) {
  const { t } = useTranslation();

  useEffect(() => {
    if (storageKey) localStorage.setItem(storageKey, value);
  }, [value, storageKey]);

  const options: { mode: ViewMode; icon: React.ReactNode; label: string }[] = [
    { mode: "chart", icon: <BarChart3 size={14} />, label: t("reports.viewMode.chart") },
    { mode: "table", icon: <Table size={14} />, label: t("reports.viewMode.table") },
  ];

  return (
    <div className="inline-flex gap-1" role="group" aria-label={t("reports.viewMode.chart")}>
      {options.map(({ mode, icon, label }) => (
        <button
          key={mode}
          type="button"
          onClick={() => onChange(mode)}
          aria-pressed={value === mode}
          className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
            value === mode
              ? "bg-[var(--primary)] text-white"
              : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
          }`}
        >
          {icon}
          {label}
        </button>
      ))}
    </div>
  );
}