import { useTranslation } from "react-i18next";
import type { HighlightsData } from "../../shared/types";
import HubNetBalanceTile from "./HubNetBalanceTile";
import HubTopMoversTile from "./HubTopMoversTile";
import HubTopTransactionsTile from "./HubTopTransactionsTile";

export interface HubHighlightsPanelProps {
  data: HighlightsData | null;
  isLoading: boolean;
  error: string | null;
}

export default function HubHighlightsPanel({ data, isLoading, error }: HubHighlightsPanelProps) {
  const { t } = useTranslation();

  if (error) {
    return (
      <div className="bg-[var(--negative)]/10 text-[var(--negative)] rounded-xl p-4 mb-6">
        {error}
      </div>
    );
  }

  if (!data) {
    return (
      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 mb-6 text-center text-[var(--muted-foreground)]">
        {isLoading ? t("common.loading") : t("reports.empty.noData")}
      </div>
    );
  }

  const series = data.monthlyBalanceSeries.map((m) => m.netBalance);

  return (
    <section className={`mb-6 ${isLoading ? "opacity-60" : ""}`} aria-busy={isLoading}>
      <h2 className="text-sm font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-3">
        {t("reports.hub.highlights")}
      </h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <HubNetBalanceTile
          label={t("reports.highlights.netBalanceCurrent")}
          amount={data.netBalanceCurrent}
          series={series}
        />
        <HubNetBalanceTile
          label={t("reports.highlights.netBalanceYtd")}
          amount={data.netBalanceYtd}
          series={series}
        />
        <HubTopMoversTile movers={data.topMovers} />
        <HubTopTransactionsTile transactions={data.topTransactions} />
      </div>
    </section>
  );
}
