"use client";

import { cn } from "@/lib/utils";
import type { DashboardChartBar, DashboardTabOption } from "./dashboard-home-types";

type DashboardChartCardProps = {
  title: string;
  tabs: DashboardTabOption[];
  activeTabId: string;
  onTabChange: (tabId: string) => void;
  bars: DashboardChartBar[];
};

export function DashboardChartCard({
  title,
  tabs,
  activeTabId,
  onTabChange,
  bars,
}: DashboardChartCardProps) {
  const maxValue = Math.max(...bars.map((bar) => bar.value), 1);

  return (
    <section className="rounded-[24px] border border-border bg-white shadow-[0_8px_24px_rgba(32,32,32,0.04)]">
      <div className="flex min-h-[72px] flex-col gap-4 border-b border-divider px-6 py-4 md:flex-row md:items-center md:justify-between">
        <h2 className="text-2xl font-bold leading-tight text-foreground">{title}</h2>

        <div className="rounded-full bg-highlights-bg p-1">
          <div className="flex flex-wrap items-center gap-1">
            {tabs.map((tab) => {
              const isActive = activeTabId === tab.id;

              return (
                <button
                  key={tab.id}
                  type="button"
                  onClick={() => onTabChange(tab.id)}
                  className={cn(
                    "h-10 rounded-full px-5 text-sm font-semibold transition-colors",
                    isActive
                      ? "bg-primary text-white shadow-[0_6px_16px_rgba(30,124,115,0.24)]"
                      : "text-muted-foreground hover:bg-white"
                  )}
                >
                  {tab.label}
                </button>
              );
            })}
          </div>
        </div>
      </div>

      <div className="overflow-x-auto px-6 pb-6 pt-8">
        <div className="relative min-w-[860px]">
          <div className="pointer-events-none absolute inset-x-0 top-0 h-[320px]">
            {[64, 128, 192, 256].map((top) => (
              <div
                key={top}
                className="absolute inset-x-0 border-t border-dashed border-divider"
                style={{ top }}
              />
            ))}
          </div>

          <div className="relative z-10 grid h-[320px] grid-cols-12 items-end gap-3">
            {bars.map((bar) => {
              const height = Math.max((bar.value / maxValue) * 260, 24);

              return (
                <div key={bar.id} className="flex h-full flex-col items-center justify-end gap-3">
                  <div className="flex min-h-7 items-end justify-center text-[11px] font-semibold text-primary">
                    {bar.value}
                  </div>

                  <div className="flex h-[260px] items-end">
                    <div
                      className="w-6 rounded-t-[18px] bg-gradient-to-t from-[#1E7C73] to-[#7AD0CA] shadow-[0_10px_24px_rgba(30,124,115,0.2)] md:w-8"
                      style={{ height: `${height}px` }}
                    />
                  </div>

                  <span className="text-xs font-medium text-muted-foreground">{bar.label}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}