
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Search, CalendarIcon } from "lucide-react";
import { useState } from "react";
import { format } from "date-fns";
import { DateRange } from "react-day-picker";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

export function DashboardHeader() {
  const { t } = useTranslation();
  const [dateRange, setDateRange] = useState<DateRange | undefined>();
  const [quickSelect, setQuickSelect] = useState<string>("1");

  const handleQuickSelect = (value: string) => {
    if (!value) return;
    
    setQuickSelect(value);
    const today = new Date();
    const days = parseInt(value);
    const startDate = new Date(today);
    startDate.setDate(today.getDate() - days);
    
    setDateRange({
      from: startDate,
      to: today,
    });
  };

  return (
    <div className="border-b border-slate-800 bg-slate-900">
      <div className="flex items-center justify-between p-6">
        <div>
          <h1 className="text-2xl font-semibold text-white">{t('dashboard.title')}</h1>
          <p className="text-slate-400">{t('dashboard.subtitle')} for {format(new Date(), 'MMMM dd, yyyy')}</p>
        </div>
        
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2 bg-slate-800 rounded-lg p-1">
            <ToggleGroup
              type="single"
              value={quickSelect}
              onValueChange={handleQuickSelect}
              className="gap-0"
            >
              <ToggleGroupItem value="1" className="text-xs px-3 py-1 data-[state=on]:bg-cyan-500 data-[state=on]:text-white">
                {t('dashboard.quickFilters.24h')}
              </ToggleGroupItem>
              <ToggleGroupItem value="7" className="text-xs px-3 py-1 data-[state=on]:bg-cyan-500 data-[state=on]:text-white">
                {t('dashboard.quickFilters.7d')}
              </ToggleGroupItem>
              <ToggleGroupItem value="14" className="text-xs px-3 py-1 data-[state=on]:bg-cyan-500 data-[state=on]:text-white">
                {t('dashboard.quickFilters.14d')}
              </ToggleGroupItem>
              <ToggleGroupItem value="30" className="text-xs px-3 py-1 data-[state=on]:bg-cyan-500 data-[state=on]:text-white">
                {t('dashboard.quickFilters.30d')}
              </ToggleGroupItem>
            </ToggleGroup>
            
            <div className="w-px h-6 bg-slate-600 mx-1"></div>
            
            <Popover>
              <PopoverTrigger asChild>
                <Button
                  variant="ghost"
                  className={cn(
                    "justify-start text-left font-normal text-slate-300 hover:text-white px-3 py-1 h-8",
                    !dateRange && "text-slate-400"
                  )}
                >
                  <CalendarIcon className="mr-2 h-4 w-4" />
                  {dateRange?.from ? (
                    dateRange.to ? (
                      <>
                        {format(dateRange.from, "MMM dd")} - {format(dateRange.to, "MMM dd")}
                      </>
                    ) : (
                      format(dateRange.from, "MMM dd, yyyy")
                    )
                  ) : (
                    <span>{t('dashboard.quickFilters.customRange')}</span>
                  )}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0 bg-slate-800 border-slate-700" align="start">
                <Calendar
                  initialFocus
                  mode="range"
                  defaultMonth={dateRange?.from}
                  selected={dateRange}
                  onSelect={setDateRange}
                  numberOfMonths={2}
                  className="p-3 pointer-events-auto bg-slate-800 text-white"
                />
              </PopoverContent>
            </Popover>
          </div>

          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
            <Input
              placeholder={t('dashboard.search')}
              className="pl-10 bg-slate-800 border-slate-700 text-white placeholder-slate-400 w-64"
            />
          </div>
        </div>
      </div>
    </div>
  );
}
