new-api-analytics/components/TimeRangeSelector.tsx

"use client";

import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Calendar } from "lucide-react";
import { type TimeRange } from "@/lib/utils";
import { useTimeRange } from "@/lib/time-range-context";
import { useI18n } from "@/lib/i18n";

export function TimeRangeSelector() {
  const { t, locale } = useI18n();
  const { range, setRange, customStart, customEnd, setCustomStart, setCustomEnd } = useTimeRange();
  const [showPopover, setShowPopover] = useState(false);
  const [localStart, setLocalStart] = useState(customStart);
  const [localEnd, setLocalEnd] = useState(customEnd);
  const popoverRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // Sync local state when context changes
  useEffect(() => { setLocalStart(customStart); }, [customStart]);
  useEffect(() => { setLocalEnd(customEnd); }, [customEnd]);

  // Close popover on click outside
  useEffect(() => {
    if (!showPopover) return;
    const handler = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setShowPopover(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [showPopover]);

  const presets: { label: string; value: TimeRange }[] = [
    { label: t("time.today"), value: "today" },
    { label: t("time.7d"), value: "7d" },
    { label: t("time.30d"), value: "30d" },
    { label: t("time.all"), value: "all" },
  ];

  function handlePreset(v: TimeRange) {
    setRange(v);
    setShowPopover(false);
  }

  function handleCustomClick() {
    if (range === "custom" && showPopover) {
      setShowPopover(false);
    } else {
      setRange("custom");
      setShowPopover(true);
    }
  }

  function handleConfirm() {
    setCustomStart(localStart);
    setCustomEnd(localEnd);
    setShowPopover(false);
  }

  return (
    <div ref={containerRef} className="relative">
      <div
        className="flex gap-1 rounded-lg p-1"
        style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}
      >
        {presets.map((r) => (
          <button
            key={r.value}
            onClick={() => handlePreset(r.value)}
            className="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors"
            style={{ color: range === r.value ? "var(--text-accent)" : "var(--text-muted)" }}
          >
            {range === r.value && (
              <motion.div
                layoutId="time-range-bg"
                className="absolute inset-0 rounded-md"
                style={{ background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}
                transition={{ type: "spring", stiffness: 400, damping: 30 }}
              />
            )}
            <span className="relative z-10">{r.label}</span>
          </button>
        ))}

        {/* Custom button */}
        <button
          onClick={handleCustomClick}
          className="relative px-3 py-1.5 text-xs font-medium rounded-md transition-colors flex items-center gap-1"
          style={{ color: range === "custom" ? "var(--text-accent)" : "var(--text-muted)" }}
        >
          {range === "custom" && (
            <motion.div
              layoutId="time-range-bg"
              className="absolute inset-0 rounded-md"
              style={{ background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}
              transition={{ type: "spring", stiffness: 400, damping: 30 }}
            />
          )}
          <Calendar className="relative z-10 h-3 w-3" />
          <span className="relative z-10">{t("time.custom")}</span>
        </button>
      </div>

      {/* Popover */}
      <AnimatePresence>
        {showPopover && (
          <motion.div
            ref={popoverRef}
            initial={{ opacity: 0, y: -4, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -4, scale: 0.97 }}
            transition={{ duration: 0.15 }}
            className="absolute right-0 top-full mt-2 z-50 rounded-lg p-4 space-y-3 min-w-[260px]"
            style={{
              background: "var(--surface-bg)",
              border: "1px solid var(--surface-border)",
              boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
              backdropFilter: "blur(12px)",
            }}
          >
            <div className="space-y-2">
              <label className="flex items-center gap-2 text-xs" style={{ color: "var(--text-muted)" }}>
                {t("time.startDate")}
              </label>
              <input
                type="date"
                lang={locale === "zh" ? "zh-CN" : "en-US"}
                value={localStart}
                onChange={(e) => setLocalStart(e.target.value)}
                className="input-glass w-full rounded-md px-3 py-1.5 text-xs font-[family-name:var(--font-geist-mono)]"
              />
            </div>
            <div className="space-y-2">
              <label className="flex items-center gap-2 text-xs" style={{ color: "var(--text-muted)" }}>
                {t("time.endDate")}
              </label>
              <input
                type="date"
                lang={locale === "zh" ? "zh-CN" : "en-US"}
                value={localEnd}
                onChange={(e) => setLocalEnd(e.target.value)}
                className="input-glass w-full rounded-md px-3 py-1.5 text-xs font-[family-name:var(--font-geist-mono)]"
              />
            </div>
            <button
              onClick={handleConfirm}
              className="btn-accent w-full rounded-md py-1.5 text-xs font-medium"
            >
              {t("time.confirm")}
            </button>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}