"use client";

import { useMemo, useRef, useState } from "react";
import { Calendar } from "lucide-react";
import { format, isValid, parse } from "date-fns";
import { es } from "date-fns/locale";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

function toDisplayValue(value?: string | Date | null) {
  if (!value) return "";
  const date = value instanceof Date ? value : new Date(value);
  return isValid(date) ? format(date, "dd-MM-yyyy", { locale: es }) : "";
}

function toIsoValue(value?: string | Date | null) {
  if (!value) return "";
  const date = value instanceof Date ? value : new Date(value);
  return isValid(date) ? format(date, "yyyy-MM-dd") : "";
}

function parseDisplayValue(value: string) {
  const parsed = parse(value, "dd-MM-yyyy", new Date(), { locale: es });
  return isValid(parsed) ? format(parsed, "yyyy-MM-dd") : "";
}

export function DateField({
  label,
  name,
  defaultValue,
  error,
}: {
  label: string;
  name: string;
  defaultValue?: string | Date | null;
  error?: string;
}) {
  const dateInputRef = useRef<HTMLInputElement>(null);
  const initialDisplay = useMemo(() => toDisplayValue(defaultValue), [defaultValue]);
  const initialIso = useMemo(() => toIsoValue(defaultValue), [defaultValue]);
  const [displayValue, setDisplayValue] = useState(initialDisplay);
  const [isoValue, setIsoValue] = useState(initialIso);

  return (
    <div className="space-y-2">
      <Label htmlFor={`${name}-display`}>{label}</Label>
      <div className="flex gap-2">
        <Input
          id={`${name}-display`}
          value={displayValue}
          placeholder="DD-MM-AAAA"
          inputMode="numeric"
          aria-invalid={Boolean(error)}
          onChange={(event) => {
            const value = event.target.value;
            setDisplayValue(value);
            setIsoValue(parseDisplayValue(value));
          }}
          onBlur={() => {
            if (!isoValue) return;
            setDisplayValue(toDisplayValue(isoValue));
          }}
        />
        <Button
          type="button"
          variant="outline"
          size="icon"
          aria-label={`Abrir calendario para ${label}`}
          onClick={() => {
            if (typeof dateInputRef.current?.showPicker === "function") {
              dateInputRef.current.showPicker();
            } else {
              dateInputRef.current?.focus();
            }
          }}
        >
          <Calendar className="h-4 w-4" />
        </Button>
      </div>
      <input
        ref={dateInputRef}
        type="date"
        name={name}
        value={isoValue}
        lang="es-CL"
        className="sr-only"
        onChange={(event) => {
          setIsoValue(event.target.value);
          setDisplayValue(toDisplayValue(event.target.value));
        }}
      />
      {error ? <p className="text-xs text-destructive">{error}</p> : null}
    </div>
  );
}