import type { DashboardPeriod, SalesPoint } from "@/lib/dashboard/mock-data";
import { periodLabels } from "@/lib/dashboard/mock-data";

type SalesOverviewProps = {
  period: DashboardPeriod;
  data: SalesPoint[];
};

const chartTitles: Record<DashboardPeriod, string> = {
  today: "Penjualan per Jam",
  week: "Penjualan per Hari",
  month: "Penjualan per Minggu",
};

export function SalesOverview({ period, data }: SalesOverviewProps) {
  const maxValue = Math.max(...data.map((point) => point.value), 1);
  const peak = data.reduce((best, point) =>
    point.value > best.value ? point : best,
  );

  return (
    <section className="rounded-lg border border-neutral-40 bg-neutral-10 p-5">
      <div className="mb-6 flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h2 className="heading-s text-neutral-100">{chartTitles[period]}</h2>
          <p className="text-m-regular text-neutral-80">
            Ringkasan performa penjualan {periodLabels[period].toLowerCase()}
          </p>
        </div>
        <div className="text-s-regular rounded-lg bg-secondary-50 px-3 py-2 text-secondary-700">
          Puncak: <span className="text-s-medium">{peak.label}</span>
        </div>
      </div>

      <div className="flex h-52 items-end gap-2 sm:gap-3">
        {data.map((point) => {
          const height = Math.max((point.value / maxValue) * 100, 8);

          return (
            <div
              key={point.label}
              className="group flex flex-1 flex-col items-center gap-2"
            >
              <div className="relative flex h-40 w-full items-end justify-center">
                <div
                  className="w-full max-w-10 rounded-t-md bg-gradient-to-t from-primary-600 to-primary-300 transition-all group-hover:from-primary-700 group-hover:to-primary-400"
                  style={{ height: `${height}%` }}
                  title={`${point.label}: ${point.value.toLocaleString("id-ID")}`}
                />
              </div>
              <span className="text-s-regular text-neutral-70">{point.label}</span>
            </div>
          );
        })}
      </div>
    </section>
  );
}