import { usePage } from "@inertiajs/react";
import { enUS, fr } from "date-fns/locale";
import { CalendarIcon, RefreshCcw } from "lucide-react";
import { type ReactNode } from "react";

import InputError from "@/back/Components/InputError";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";
import { cn, formatDate } from "@/lib/utils";
import useI18nStore from "@/store/i18n-store";

interface SimpleDatePickerProps {
  name: string;
  placeholder?: string;
  date?: Date | null;
  required?: boolean;
  disabled?: boolean;
  className?: string;
  label: ReactNode | string;
  hasTime?: boolean;
  parentErrors?: Record<string, string> | null;

  setData: (name: string, value: Date | null) => void;
}

export default function SimpleDatePicker({
  name,
  placeholder = "Sélectionner une date",
  date,
  required = false,
  disabled = false,
  className,
  label,
  hasTime = false,
  parentErrors = null,
  setData,
}: Readonly<SimpleDatePickerProps>) {
  const { errors } = usePage().props;
  const localErrors = parentErrors ?? errors;

  const { locale: currentLocale, timezone: currentTimezone } =
    useI18nStore.getState();

  const calendarLocale = currentLocale === "en" ? enUS : fr;

  const parsedDate = date ? new Date(date) : undefined;
  const hours = Array.from({ length: 24 }, (_, i) => i);
  const minutes = Array.from({ length: 12 }, (_, i) => i * 5);
  const handleDateSelect = (selectedDate: Date | undefined) => {
    if (selectedDate) {
      setData(name, selectedDate);
    }
  };

  const resetDate = () => {
    setData(name, null);
  };

  function handleTimeChange(type: "hour" | "minute", value: string) {
    const currentDate = parsedDate ?? new Date();
    const newDate = new Date(currentDate);
    if (type === "hour") {
      const hour = Number.parseInt(value, 10);
      newDate.setHours(hour);
    } else {
      newDate.setMinutes(Number.parseInt(value, 10));
    }
    setData(name, newDate);
  }

  return (
    <div className="flex flex-col items-start w-full gap-1.5">
      <Label htmlFor={name} className="font-bold flex items-center gap-1.5">
        {label}
        {required && " *"}
      </Label>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            className={cn(
              "w-full font-normal",
              {
                "text-muted-foreground hover:text-muted-foreground": !date,
              },
              { "border-destructive/50 mb-1.5": localErrors[name] },
              className,
            )}
            disabled={disabled}
          >
            <span>
              {date
                ? formatDate(date.toString(), currentTimezone, hasTime)
                : placeholder}
            </span>
            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <div className="sm:flex">
            <Calendar
              required={required}
              startMonth={new Date(1925, 0, 1)}
              endMonth={new Date(2050, 11, 31)}
              locale={calendarLocale}
              mode="single"
              captionLayout="dropdown"
              selected={parsedDate ?? undefined}
              onSelect={handleDateSelect}
              disabled={disabled}
              className="border-b sm:border-0 sm:border-r"
            />
            {hasTime && (
              <div className="flex flex-col sm:flex-row sm:h-[333.2px] divide-y sm:divide-y-0 sm:divide-x">
                <ScrollArea className="w-[248px] sm:w-auto">
                  <div className="flex sm:flex-col p-2">
                    {hours.map((hour) => (
                      <Button
                        key={hour}
                        size="icon"
                        variant={
                          parsedDate?.getHours() === hour ? "default" : "ghost"
                        }
                        className="sm:w-full shrink-0 aspect-square"
                        onClick={() => {
                          handleTimeChange("hour", hour.toString());
                        }}
                      >
                        <p
                          className={cn(
                            parsedDate?.getHours() === hour
                              ? "text-primary-foreground"
                              : "",
                          )}
                        >
                          {hour}
                        </p>
                      </Button>
                    ))}
                  </div>
                  <ScrollBar orientation="horizontal" className="sm:hidden" />
                </ScrollArea>
                <ScrollArea className="w-[248px] sm:w-auto">
                  <div className="flex sm:flex-col p-2">
                    {minutes.map((minute) => (
                      <Button
                        key={minute}
                        size="icon"
                        variant={
                          parsedDate?.getMinutes() === minute
                            ? "default"
                            : "ghost"
                        }
                        className="sm:w-full shrink-0 aspect-square"
                        onClick={() => {
                          handleTimeChange("minute", minute.toString());
                        }}
                      >
                        <p
                          className={cn(
                            parsedDate?.getMinutes() === minute
                              ? "text-primary-foreground"
                              : "",
                          )}
                        >
                          {minute.toString().padStart(2, "0")}
                        </p>
                      </Button>
                    ))}
                  </div>
                  <ScrollBar orientation="horizontal" className="sm:hidden" />
                </ScrollArea>
              </div>
            )}
          </div>
          <div className="w-full ">
            <Separator className="w-full" />
            <Button
              disabled={!date}
              onClick={resetDate}
              type="button"
              variant="ghost"
              className="rounded-none w-full py-1.5"
            >
              <RefreshCcw />{" "}
              {str(trans("uwil-backend::back.simple_date_picker.reset"))
                .ucFirst()
                .value()}
            </Button>
          </div>
        </PopoverContent>
      </Popover>
      <InputError message={localErrors[name]} />
    </div>
  );
}