"use client";

import * as React from "react";
import {
  BarChart3,
  CalendarDays,
  Loader2,
  RefreshCw,
  X,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  BdrMetricsExportReport,
  type BdrMetricsExportScope,
} from "@/components/bdr-metrics/bdr-metrics-export-report";
import { Label } from "@/components/ui/label";
import { ReactSelect } from "@/components/ui/react-select";
import { cn } from "@/lib/utils";
import type { BdrMetricsDateRangeMode } from "./bdr-metrics-date-range";

const filterControlClass =
  "h-7 xl:h-8 rounded-lg text-[10px] xl:text-[11px] font-['Lexend_Deca'] font-semibold bg-white/70 border-white/50 hover:bg-white/90 hover:border-indigo-300 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 transition-all duration-200";

const DATE_RANGE_PRESETS: { value: BdrMetricsDateRangeMode; label: string }[] =
  [
    { value: "last_year", label: "Last year" },
    { value: "all_time", label: "All time" },
    { value: "custom", label: "Custom" },
  ];

export type BdrMetricsHeaderKpi = {
  ratio: number | null;
  numerator: number;
  denominator: number;
};

export type BdrMetricsPageHeaderProps = {
  teamId: string;
  bdrId: string;
  dateRangeMode: BdrMetricsDateRangeMode;
  from: string;
  to: string;
  showClearFilters: boolean;
  showAllTeamsOption: boolean;
  teamOptions: { id: string; name: string }[];
  bdrOptions: { id: string; name: string }[];
  filtersBusy: boolean;
  refreshing: boolean;
  exporting: boolean;
  exportScope: BdrMetricsExportScope;
  onRefresh: () => void;
  onTeamChange: (value: string) => void;
  onBdrChange: (value: string) => void;
  onDateRangeModeChange: (mode: BdrMetricsDateRangeMode) => void;
  onFromChange: (value: string) => void;
  onToChange: (value: string) => void;
  onClearFilters: () => void;
  onExport: () => void;
  assignedToSql?: BdrMetricsHeaderKpi;
  sqlToMeetingBooked?: BdrMetricsHeaderKpi;
};

export function BdrMetricsPageHeader({
  teamId,
  bdrId,
  dateRangeMode,
  from,
  to,
  showClearFilters,
  showAllTeamsOption,
  teamOptions,
  bdrOptions,
  filtersBusy,
  refreshing,
  exporting,
  exportScope,
  onRefresh,
  onTeamChange,
  onBdrChange,
  onDateRangeModeChange,
  onFromChange,
  onToChange,
  onClearFilters,
  onExport,
}: BdrMetricsPageHeaderProps) {
  const showDateInputs = dateRangeMode === "custom";
  const filterContentClass =
    "rounded-2xl border-white/50 bg-white/95 backdrop-blur-md";

  const teamFilterOptions = React.useMemo(() => {
    const options: { value: string; label: string }[] = [];
    if (showAllTeamsOption) {
      options.push({ value: "all", label: "All teams" });
    }
    teamOptions.forEach((t) => {
      options.push({ value: t.id, label: t.name });
    });
    return options;
  }, [showAllTeamsOption, teamOptions]);

  const bdrFilterOptions = React.useMemo(
    () => [
      { value: "all", label: "All BDRs" },
      ...bdrOptions.map((u) => ({ value: u.id, label: u.name })),
    ],
    [bdrOptions],
  );

  const dateRangeModeOptions = React.useMemo(
    () =>
      DATE_RANGE_PRESETS.map((p) => ({
        value: p.value,
        label: p.label,
      })),
    [],
  );

  return (
    <header className="rounded-2xl border border-white/50 bg-white/45 backdrop-blur-xl overflow-hidden shrink-0 transition-all duration-300">
      <div className="flex flex-col gap-3 border-b border-black/[0.05] p-4 md:flex-row md:items-center md:justify-between md:gap-4">
        <div className="flex min-w-0 flex-1 items-start gap-3">
          <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-indigo-500/10 text-indigo-600 ring-1 ring-indigo-500/20">
            <BarChart3 className="size-4" aria-hidden />
          </span>
          <div className="min-w-0">
            <h1 className="font-['Lexend'] text-lg font-bold tracking-tight text-[#1d1d39] leading-tight">
              BDR Reports
            </h1>
          </div>
        </div>

        <div
          className="flex w-full shrink-0 items-center gap-1 rounded-xl border border-white/50 bg-white/40 p-1 shadow-sm shadow-black/[0.02] backdrop-blur-sm md:w-auto"
          role="toolbar"
          aria-label="BDR report actions"
        >
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            className="rounded-lg text-gray-700 hover:bg-white/80 hover:text-[#1d1d39] active:scale-[0.98]"
            disabled={refreshing || exporting}
            onClick={onRefresh}
            aria-label="Refresh BDR reports"
          >
            <RefreshCw
              className={cn("size-4 text-gray-500", refreshing && "animate-spin")}
              aria-hidden
            />
          </Button>
          <span
            className="hidden h-5 w-px shrink-0 bg-black/[0.06] sm:block"
            aria-hidden
          />
          <BdrMetricsExportReport
            scope={exportScope}
            exporting={exporting}
            filtersBusy={filtersBusy}
            onExport={onExport}
          />
        </div>
      </div>

      <div className="bg-white/10 px-4 py-3 md:px-5">
        <div className="mb-2 flex items-center justify-between gap-2">
          <span className="font-['Lexend_Deca'] text-[10px] font-bold uppercase tracking-[0.15em] text-gray-400">
            Filters
          </span>
          <div className="flex items-center gap-3">
            {filtersBusy && (
              <span className="flex items-center gap-1.5 font-['Lexend_Deca'] text-[11px] font-semibold text-indigo-600 animate-pulse">
                <Loader2 className="size-3.5 animate-spin" aria-hidden />
                Updating…
              </span>
            )}
            {showClearFilters && (
              <button
                type="button"
                onClick={onClearFilters}
                className="inline-flex items-center gap-1.5 rounded-full bg-white/60 border border-white px-2.5 py-0.5 font-['Lexend_Deca'] text-[11px] font-bold text-indigo-600 hover:bg-white hover:text-indigo-700 transition-all active:scale-95"
              >
                <X className="size-3" aria-hidden />
                Clear filters
              </button>
            )}
          </div>
        </div>

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
          <FilterField label="Team" htmlFor="bdr-metrics-team">
            <ReactSelect
              id="bdr-metrics-team"
              value={teamId}
              onValueChange={onTeamChange}
              options={teamFilterOptions}
              placeholder="All teams"
              triggerClassName={cn(filterControlClass, "w-full")}
              contentClassName={filterContentClass}
            />
          </FilterField>

          <FilterField label="BDR" htmlFor="bdr-metrics-bdr">
            <ReactSelect
              id="bdr-metrics-bdr"
              value={bdrId}
              onValueChange={onBdrChange}
              options={bdrFilterOptions}
              placeholder="All BDRs"
              triggerClassName={cn(filterControlClass, "w-full")}
              contentClassName={filterContentClass}
            />
          </FilterField>

          <FilterField label="Assignment period" htmlFor="bdr-metrics-range-mode">
            <ReactSelect
              id="bdr-metrics-range-mode"
              value={dateRangeMode}
              onValueChange={(v) =>
                onDateRangeModeChange(v as BdrMetricsDateRangeMode)
              }
              options={dateRangeModeOptions}
              triggerClassName={cn(filterControlClass, "w-full")}
              contentClassName={filterContentClass}
            />
          </FilterField>

          {showDateInputs ? (
            <>
              <FilterField label="Assigned from" htmlFor="bdr-metrics-from">
                <DateInput
                  id="bdr-metrics-from"
                  value={from}
                  onChange={onFromChange}
                />
              </FilterField>

              <FilterField label="Assigned to" htmlFor="bdr-metrics-to">
                <DateInput
                  id="bdr-metrics-to"
                  value={to}
                  onChange={onToChange}
                />
              </FilterField>
            </>
          ) : (
            <div className="flex min-w-0 flex-col justify-end sm:col-span-2">
              <p className="rounded-lg border border-white/50 bg-white/50 px-3 py-2 font-['Lexend_Deca'] text-[11px] font-semibold text-gray-600">
                {dateRangeMode === "all_time"
                  ? "All assignments in scope (no date limit)."
                  : "Last 12 months by assignment date."}
              </p>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

function FilterField({
  label,
  htmlFor,
  children,
}: {
  label: string;
  htmlFor: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-w-0 flex-col gap-1">
      <Label
        htmlFor={htmlFor}
        className="font-['Lexend_Deca'] text-[9px] font-bold uppercase tracking-wide text-gray-500 pl-0.5"
      >
        {label}
      </Label>
      {children}
    </div>
  );
}

function DateInput({
  id,
  value,
  onChange,
}: {
  id: string;
  value: string;
  onChange: (value: string) => void;
}) {
  return (
    <div className="relative">
      <CalendarDays
        className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-gray-400"
        aria-hidden
      />
      <input
        id={id}
        type="date"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={cn(
          filterControlClass,
          "w-full border border-gray-200/60 pl-8 pr-2.5 text-gray-800 [color-scheme:light] outline-none",
        )}
      />
    </div>
  );
}