"use client";

import { useT } from "@/shared/i18n/client";
import { Input } from "@/presentation/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/presentation/components/ui/select";
import type { HealthPeriod } from "@/domain/entities/health";

export interface PeriodState {
  period: HealthPeriod;
  from?: string;
  to?: string;
}

export function PeriodFilter({
  value,
  onChange,
}: {
  value: PeriodState;
  onChange: (v: PeriodState) => void;
}) {
  const t = useT();

  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Select
        value={value.period}
        onValueChange={(period) => onChange({ ...value, period: period as HealthPeriod })}
      >
        <SelectTrigger className="w-40 h-9">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="month">{t.health.periods.month}</SelectItem>
          <SelectItem value="week">{t.health.periods.week}</SelectItem>
          <SelectItem value="3months">{t.health.periods["3months"]}</SelectItem>
          <SelectItem value="custom">{t.health.periods.custom}</SelectItem>
        </SelectContent>
      </Select>

      {value.period === "custom" && (
        <div className="flex items-center gap-1.5">
          <Input
            type="date"
            value={value.from ?? ""}
            onChange={(e) => onChange({ ...value, from: e.target.value })}
            className="h-9 w-36"
          />
          <span className="text-muted-foreground text-sm">—</span>
          <Input
            type="date"
            value={value.to ?? ""}
            onChange={(e) => onChange({ ...value, to: e.target.value })}
            className="h-9 w-36"
          />
        </div>
      )}
    </div>
  );
}