"use client";

import React from "react";
import type {
  AgingFilters as AgingFiltersType,
  CategoryFilter,
  SourceFilter,
} from "./agingApi";

interface Props {
  filters: AgingFiltersType;
  setFilters: React.Dispatch<React.SetStateAction<AgingFiltersType>>;
  onRefresh: () => void;
}

const BRAND_DARK = "#4A0080";
const BRAND = "#8B14D4";

const CATEGORY_SEG: { value: CategoryFilter; label: string }[] = [
  { value: "all", label: "All" },
  { value: "recertification", label: "Re-certification" },
  { value: "surveillance1", label: "Surveillance 1st" },
  { value: "surveillance2", label: "Surveillance 2nd" },
];

const SOURCE_SEG: { value: SourceFilter; label: string }[] = [
  { value: "all", label: "All" },
  { value: "Manual", label: "Manual" },
  { value: "new", label: "QRS & TQS" },
];

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

export function AgingFilters({ filters, setFilters, onRefresh }: Props) {
  const years: number[] = [];
  const nowY = new Date().getFullYear();
  for (let y = 2023; y <= nowY + 2; y++) years.push(y);

  const toggleMonth = (m: number) =>
    setFilters((f) => ({
      ...f,
      months: f.months.includes(m)
        ? f.months.filter((x) => x !== m)
        : [...f.months, m],
    }));

  const label: React.CSSProperties = {
    fontSize: 10,
    fontWeight: 800,
    color: "#94a3b8",
    textTransform: "uppercase",
    letterSpacing: 0.6,
    marginBottom: 6,
    display: "block",
  };

  // segmented control (connected pills)
  function Segmented<T extends string>({
    options,
    value,
    onChange,
  }: {
    options: { value: T; label: string }[];
    value: T;
    onChange: (v: T) => void;
  }) {
    return (
      <div
        style={{
          display: "inline-flex",
          background: "#fff",
          border: "1px solid #e2e8f0",
          borderRadius: 10,
          padding: 3,
          gap: 3,
        }}
      >
        {options.map((o) => {
          const active = value === o.value;
          return (
            <button
              key={o.value}
              onClick={() => onChange(o.value)}
              style={{
                padding: "7px 14px",
                border: "none",
                borderRadius: 8,
                background: active
                  ? `linear-gradient(135deg, ${BRAND_DARK} 0%, ${BRAND} 100%)`
                  : "transparent",
                color: active ? "#fff" : "#475569",
                fontSize: 13,
                fontWeight: 600,
                cursor: "pointer",
                whiteSpace: "nowrap",
                boxShadow: active ? "0 1px 4px rgba(74,0,128,0.3)" : "none",
                transition: "background 0.12s",
              }}
            >
              {o.label}
            </button>
          );
        })}
      </div>
    );
  }

  return (
    <div
      style={{
        background: "#fff",
        border: "1px solid #e5e7eb",
        borderRadius: 14,
        padding: 18,
        marginBottom: 16,
        boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
      }}
    >
      {/* Row: Category + Source + Year + Refresh */}
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: 24,
          alignItems: "flex-end",
        }}
      >
        <div>
          <span style={label}>Category</span>
          <Segmented
            options={CATEGORY_SEG}
            value={filters.category}
            onChange={(category) => setFilters((f) => ({ ...f, category }))}
          />
        </div>

        <div>
          <span style={label}>Source</span>
          <Segmented
            options={SOURCE_SEG}
            value={filters.source}
            onChange={(source) => setFilters((f) => ({ ...f, source }))}
          />
        </div>

        <div style={{ marginLeft: "auto", display: "flex", gap: 12, alignItems: "flex-end" }}>
          <div>
            <span style={label}>Report Year</span>
            <select
              value={filters.year}
              onChange={(e) => setFilters((f) => ({ ...f, year: Number(e.target.value) }))}
              style={{
                padding: "9px 14px",
                borderRadius: 10,
                border: "1px solid #e2e8f0",
                fontSize: 13,
                fontWeight: 700,
                color: "#334155",
                background: "#fff",
                cursor: "pointer",
              }}
            >
              {years.map((y) => (
                <option key={y} value={y}>{y}</option>
              ))}
            </select>
          </div>
          <button
            onClick={onRefresh}
            title="Refresh"
            style={{
              padding: "9px 16px",
              borderRadius: 10,
              border: "1px solid #e2e8f0",
              background: "#fff",
              color: "#475569",
              fontSize: 13,
              fontWeight: 600,
              cursor: "pointer",
            }}
          >
            ↻ Refresh
          </button>
        </div>
      </div>

      {/* Divider */}
      <div style={{ height: 1, background: "#f1f5f9", margin: "16px 0" }} />

      {/* Months */}
      <div>
        <span style={label}>
          Months <span style={{ color: "#cbd5e1", fontWeight: 600 }}>· by original registration · none = all</span>
        </span>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
          {MONTHS.map((m, i) => {
            const val = i + 1;
            const active = filters.months.includes(val);
            return (
              <button
                key={m}
                onClick={() => toggleMonth(val)}
                style={{
                  width: 46,
                  padding: "6px 0",
                  borderRadius: 8,
                  border: active ? "none" : "1px solid #e2e8f0",
                  background: active
                    ? `linear-gradient(135deg, ${BRAND_DARK} 0%, ${BRAND} 100%)`
                    : "#fff",
                  color: active ? "#fff" : "#64748b",
                  fontSize: 12,
                  fontWeight: 600,
                  cursor: "pointer",
                }}
              >
                {m}
              </button>
            );
          })}
          {filters.months.length > 0 && (
            <button
              onClick={() => setFilters((f) => ({ ...f, months: [] }))}
              style={{
                padding: "6px 12px",
                borderRadius: 8,
                border: "1px solid #fca5a5",
                background: "#fef2f2",
                color: "#b91c1c",
                fontSize: 12,
                fontWeight: 600,
                cursor: "pointer",
              }}
            >
              ✕ Clear
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export default AgingFilters;