"use client";

import React from "react";

const MONTHS = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];

interface Props {
  /** Selected year, or "all" for every year */
  year: number | "all";
  setYear: (y: number | "all") => void;
  /** Selected month (1-12), or "all" for the whole year */
  month: number | "all";
  setMonth: (m: number | "all") => void;
  /** Years to show in the selector (e.g. [2026, 2025, 2024, …]) */
  years: number[];
  /** Exact certificate count per month — length 12, index 0 = Jan */
  monthlyCounts: number[];
  /** Whether the counts are still being fetched */
  loading?: boolean;
}

export function MonthYearFilter({
  year,
  setYear,
  month,
  setMonth,
  years,
  monthlyCounts,
  loading = false,
}: Props) {
  const total = monthlyCounts.reduce((a, b) => a + (b || 0), 0);

  const fmt = (n: number) => n.toLocaleString();

  return (
    <div
      style={{
        backgroundColor: "#fff",
        border: "1px solid #e5e7eb",
        borderRadius: 12,
        padding: "14px 16px",
        marginBottom: 12,
      }}
    >
      {/* ── Header row ── */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: 10,
          marginBottom: 12,
        }}
      >
        <div>
          <p
            style={{
              margin: 0,
              fontSize: 14,
              fontWeight: 800,
              color: "#0f172a",
              display: "flex",
              alignItems: "center",
              gap: 7,
            }}
          >
            📅 Filter by issue period
            {loading && (
              <span
                style={{
                  display: "inline-block",
                  width: 13,
                  height: 13,
                  border: "2px solid #99f6e4",
                  borderTopColor: "#0f766e",
                  borderRadius: "50%",
                  animation: "spin 0.7s linear infinite",
                }}
              />
            )}
          </p>
          <p style={{ margin: "2px 0 0", fontSize: 11, color: "#64748b" }}>
            Tap a month to filter · counts reflect the selected year
          </p>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span
            style={{
              padding: "5px 12px",
              backgroundColor: "#f0fdfa",
              border: "1px solid #99f6e4",
              borderRadius: 999,
              fontSize: 12,
              fontWeight: 700,
              color: "#0f766e",
              whiteSpace: "nowrap",
            }}
          >
            {year === "all" ? "All years" : year} total · {fmt(total)}
          </span>

          <select
            value={year === "all" ? "all" : String(year)}
            onChange={(e) => {
              const v = e.target.value;
              setYear(v === "all" ? "all" : Number(v));
            }}
            style={{
              padding: "9px 12px",
              border: "1.5px solid #e5e7eb",
              borderRadius: 8,
              fontSize: 13,
              backgroundColor: "#fff",
              color: "#0f172a",
              fontWeight: 600,
              cursor: "pointer",
              minWidth: 120,
            }}
          >
            <option value="all">All years</option>
            {years.map((y) => (
              <option key={y} value={y}>
                {y}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* ── Month cards ── */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(92px, 1fr))",
          gap: 8,
          opacity: loading ? 0.6 : 1,
          transition: "opacity 0.15s",
        }}
      >
        {/* All months */}
        <button
          type="button"
          onClick={() => setMonth("all")}
          title="Show all months"
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 3,
            padding: "11px 6px",
            borderRadius: 10,
            cursor: "pointer",
            transition: "all 0.15s",
            border:
              month === "all" ? "1.5px solid #0f766e" : "1px solid #0f766e",
            backgroundColor: month === "all" ? "#0f766e" : "#f0fdfa",
          }}
        >
          <span
            style={{
              fontSize: 10.5,
              fontWeight: 700,
              letterSpacing: 0.5,
              textTransform: "uppercase",
              color: month === "all" ? "#fff" : "#0f766e",
            }}
          >
            All
          </span>
          <span
            style={{
              fontSize: 19,
              fontWeight: 800,
              lineHeight: 1,
              color: month === "all" ? "#fff" : "#0f766e",
            }}
          >
            {loading ? "—" : fmt(total)}
          </span>
          <span
            style={{
              fontSize: 9,
              color: month === "all" ? "#ccfbf1" : "#5eead4",
            }}
          >
            months
          </span>
        </button>

        {/* Individual months */}
        {MONTHS.map((label, i) => {
          const count = monthlyCounts[i] || 0;
          const selected = month === i + 1;
          const isZero = count === 0;
          return (
            <button
              key={label}
              type="button"
              onClick={() => setMonth(i + 1)}
              title={`Filter to ${label}`}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: 3,
                padding: "11px 6px",
                borderRadius: 10,
                cursor: "pointer",
                transition: "all 0.15s",
                border: selected
                  ? "1.5px solid #0f766e"
                  : "1px solid #e5e7eb",
                backgroundColor: selected ? "#f0fdfa" : "#fff",
              }}
              onMouseEnter={(e) => {
                if (!selected) {
                  e.currentTarget.style.borderColor = "#5eead4";
                  e.currentTarget.style.backgroundColor = "#f8fffd";
                }
              }}
              onMouseLeave={(e) => {
                if (!selected) {
                  e.currentTarget.style.borderColor = "#e5e7eb";
                  e.currentTarget.style.backgroundColor = "#fff";
                }
              }}
            >
              <span
                style={{
                  fontSize: 10.5,
                  fontWeight: 700,
                  letterSpacing: 0.5,
                  textTransform: "uppercase",
                  color: selected ? "#0f766e" : "#64748b",
                }}
              >
                {label}
              </span>
              <span
                style={{
                  fontSize: 19,
                  fontWeight: 800,
                  lineHeight: 1,
                  color: selected
                    ? "#0f766e"
                    : isZero
                      ? "#cbd5e1"
                      : "#0f172a",
                }}
              >
                {loading ? "—" : fmt(count)}
              </span>
              <span style={{ fontSize: 9, color: "#94a3b8" }}>certs</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}