import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { ArrowLineDownIcon } from '@phosphor-icons/react';
import dayjs from 'dayjs';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';
import { useTranslation } from 'react-i18next';

type Props = {
  resource: string;
  basePath?: string;
};

export function DownloadCsvButton({
  resource,
  basePath = '/api/admin/export',
}: Props) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const [range, setRange] = useState<DateRange | undefined>();

  const handleDownload = () => {
    const params = new URLSearchParams();
    if (range?.from) params.set('from', dayjs(range.from).format('YYYY-MM-DD'));
    if (range?.to) params.set('to', dayjs(range.to).format('YYYY-MM-DD'));

    const qs = params.size ? `?${params.toString()}` : '';
    window.location.href = `${basePath}/${resource}${qs}`;
    setOpen(false);
  };

  const label = range?.from
    ? range.to
      ? `${dayjs(range.from).format('MMM D')} – ${dayjs(range.to).format('MMM D, YYYY')}`
      : dayjs(range.from).format('MMM D, YYYY')
    : t('All Time');

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="ghostPrimary">
          <ArrowLineDownIcon weight="bold" />
          <span className="hidden md:inline">{t('Download CSV')}</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="end">
        <div className="border-b p-3">
          <p className="text-sm font-medium">{t('Date Range')}</p>
          <p className="text-xs text-muted-foreground">
            {label} - {t('leave empty to export all records')}
          </p>
        </div>

        <Calendar
          mode="range"
          selected={range}
          onSelect={setRange}
          numberOfMonths={2}
          disabled={{ after: new Date() }}
        />

        <div className="flex items-center justify-between gap-2 border-t p-3">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setRange(undefined)}
            disabled={!range}
          >
            {t('Clear')}
          </Button>
          <Button size="sm" onClick={handleDownload}>
            <ArrowLineDownIcon weight="bold" />
            {t('Download')}
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}