"use client";

import { useState } from "react";
import { CalendarDays, ChevronDown } from "lucide-react";
import type { PeriodPreset } from "@/lib/types";
import { useOenoscopeStore } from "@/lib/store";
import { cn } from "@/lib/utils";

const options: { value: PeriodPreset; label: string }[] = [
  { value: "7d", label: "7j" },
  { value: "30d", label: "30j" },
  { value: "90d", label: "90j" },
  { value: "6m", label: "6 mois" },
  { value: "12m", label: "12m" },
  { value: "24m", label: "24m" }
];

export function TimeRangePicker({ compact = false }: { compact?: boolean }) {
  const [open, setOpen] = useState(false);
  const period = useOenoscopeStore((state) => state.period);
  const periodMode = useOenoscopeStore((state) => state.periodMode);
  const customRange = useOenoscopeStore((state) => state.customRange);
  const setPeriod = useOenoscopeStore((state) => state.setPeriod);
  const setCustomRange = useOenoscopeStore((state) => state.setCustomRange);
  const activeLabel =
    periodMode === "custom"
      ? `${customRange.from.split("-").reverse().join("/")} – ${customRange.to.split("-").reverse().join("/")}`
      : options.find((option) => option.value === period)?.label ?? "90j";

  return (
    <div className={cn("relative flex min-w-0 items-center gap-2", compact && "text-sm")}>
      {!compact ? <span className="text-sm text-smoke">Période</span> : null}
      <button
        type="button"
        onClick={() => setOpen((value) => !value)}
        className="inline-flex h-9 min-w-0 items-center justify-between gap-2 rounded-md border border-gold/35 bg-ivory-warm px-3 text-xs font-medium text-bordeaux-ink hover:bg-gold/10 xl:gap-3"
      >
        <span className="inline-flex min-w-0 items-center gap-2">
          <CalendarDays className="h-4 w-4 text-gold" strokeWidth={1.5} />
          <span className="max-w-24 truncate xl:max-w-32">{activeLabel}</span>
        </span>
        <ChevronDown className="h-4 w-4 text-gold" strokeWidth={1.5} />
      </button>
      {open ? (
        <div
          className={cn(
            "absolute top-11 z-50 w-[min(360px,calc(100vw-2rem))] rounded-md border border-gold/35 bg-ivory p-4 shadow-vellum",
            compact ? "left-0" : "left-0"
          )}
        >
          <p className="text-xs uppercase tracking-[0.16em] text-smoke">Derniers jours</p>
          <div className="mt-3 grid grid-cols-3 gap-2">
            {options.map((option) => (
              <button
                key={option.value}
                type="button"
                onClick={() => {
                  setPeriod(option.value);
                  setOpen(false);
                }}
                className={cn(
                  "h-9 rounded-md border px-3 text-xs font-medium transition-colors",
                  periodMode === "preset" && period === option.value
                    ? "border-bordeaux-deep bg-bordeaux-deep text-ivory"
                    : "border-gold/30 bg-ivory-warm text-bordeaux-ink hover:bg-gold/10"
                )}
              >
                {option.label}
              </button>
            ))}
          </div>
          <div className="my-4 h-px bg-gold/20" />
          <p className="text-xs uppercase tracking-[0.16em] text-smoke">Intervalle par date</p>
          <div className="mt-3 grid grid-cols-2 gap-3">
            <label className="text-xs text-smoke">
              Du
              <input
                type="date"
                value={customRange.from}
                max={customRange.to}
                onChange={(event) => setCustomRange({ ...customRange, from: event.target.value })}
                className="mt-1 h-9 w-full rounded-md border border-gold/30 bg-ivory-warm px-2 text-sm text-bordeaux-ink"
              />
            </label>
            <label className="text-xs text-smoke">
              Au
              <input
                type="date"
                value={customRange.to}
                min={customRange.from}
                onChange={(event) => setCustomRange({ ...customRange, to: event.target.value })}
                className="mt-1 h-9 w-full rounded-md border border-gold/30 bg-ivory-warm px-2 text-sm text-bordeaux-ink"
              />
            </label>
          </div>
          <p className="mt-3 text-xs leading-relaxed text-smoke">
            Le choix d'un preset désactive l'intervalle manuel. Modifier une date active l'intervalle manuel.
          </p>
        </div>
      ) : null}
    </div>
  );
}