"use client";

import { useState } from "react";
import { Icon } from "@/components/ui/Icon";

const WEEKDAYS = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
const MONTHS = [
  "Januar", "Februar", "März", "April", "Mai", "Juni",
  "Juli", "August", "September", "Oktober", "November", "Dezember",
];

function pad(n: number) {
  return String(n).padStart(2, "0");
}
function toISO(d: Date): string {
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}
function fmtLong(iso: string): string {
  const d = new Date(`${iso}T00:00`);
  return `${d.getDate()}. ${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
}

/** Eigener Datepicker (Popover-Kalender) statt nativem input[type=date]. */
export function DatePicker({
  value,
  onChange,
  disabled,
  placeholder = "Kein Datum",
}: {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  placeholder?: string;
}) {
  const [open, setOpen] = useState(false);
  const [mode, setMode] = useState<"days" | "months">("days");
  const selected = value ? new Date(`${value}T00:00`) : null;
  const [view, setView] = useState<Date>(() => selected ?? new Date());
  const todayISO = toISO(new Date());

  // Erster darzustellender Tag (Montag der ersten Woche).
  const firstOfMonth = new Date(view.getFullYear(), view.getMonth(), 1);
  const offset = (firstOfMonth.getDay() + 6) % 7; // Mo=0
  const gridStart = new Date(firstOfMonth);
  gridStart.setDate(1 - offset);

  const days = Array.from({ length: 42 }, (_, i) => {
    const d = new Date(gridStart);
    d.setDate(gridStart.getDate() + i);
    return d;
  });

  const pick = (d: Date) => {
    onChange(toISO(d));
    setOpen(false);
  };

  return (
    <div className="relative">
      <button
        type="button"
        className="input datepicker-trigger"
        disabled={disabled}
        onClick={() => setOpen((o) => !o)}
        data-empty={!value}
      >
        <Icon name="calendar" size={16} />
        <span className="flex-1 text-left">{value ? fmtLong(value) : placeholder}</span>
        {value ? (
          <span
            className="datepicker-clear"
            role="button"
            aria-label="Datum entfernen"
            onClick={(e) => {
              e.stopPropagation();
              onChange("");
            }}
          >
            <Icon name="close" size={13} />
          </span>
        ) : (
          <Icon name="chevron" size={14} style={{ transform: "rotate(90deg)", opacity: 0.5 }} />
        )}
      </button>

      {open ? (
        <>
          <div className="pop-backdrop" onClick={() => { setOpen(false); setMode("days"); }} />
          <div className="card-sm pop-solid datepicker-pop">
            <div className="datepicker-head">
              <button
                type="button"
                className="icon-btn"
                style={{ width: 28, height: 28 }}
                onClick={() =>
                  mode === "days"
                    ? setView(new Date(view.getFullYear(), view.getMonth() - 1, 1))
                    : setView(new Date(view.getFullYear() - 1, view.getMonth(), 1))
                }
                aria-label="Zurück"
              >
                <Icon name="chevron" size={15} style={{ transform: "rotate(180deg)" }} />
              </button>
              {/* Klick auf den Titel → Monats-/Jahresauswahl */}
              <button type="button" className="datepicker-title" onClick={() => setMode(mode === "days" ? "months" : "days")}>
                {mode === "days" ? `${MONTHS[view.getMonth()]} ${view.getFullYear()}` : view.getFullYear()}
              </button>
              <button
                type="button"
                className="icon-btn"
                style={{ width: 28, height: 28 }}
                onClick={() =>
                  mode === "days"
                    ? setView(new Date(view.getFullYear(), view.getMonth() + 1, 1))
                    : setView(new Date(view.getFullYear() + 1, view.getMonth(), 1))
                }
                aria-label="Weiter"
              >
                <Icon name="chevron" size={15} />
              </button>
            </div>

            {mode === "months" ? (
              <div className="datepicker-months">
                {MONTHS.map((m, i) => (
                  <button
                    key={m}
                    type="button"
                    className="datepicker-month"
                    data-selected={view.getMonth() === i}
                    onClick={() => {
                      setView(new Date(view.getFullYear(), i, 1));
                      setMode("days");
                    }}
                  >
                    {m.slice(0, 3)}
                  </button>
                ))}
              </div>
            ) : (
              <>
                <div className="datepicker-grid datepicker-weekdays">
                  {WEEKDAYS.map((w) => (
                    <span key={w} className="datepicker-wd">{w}</span>
                  ))}
                </div>
                <div className="datepicker-grid">
                  {days.map((d, i) => {
                    const iso = toISO(d);
                    const otherMonth = d.getMonth() !== view.getMonth();
                    return (
                      <button
                        key={i}
                        type="button"
                        className="datepicker-day"
                        data-other={otherMonth}
                        data-today={iso === todayISO}
                        data-selected={value === iso}
                        onClick={() => pick(d)}
                      >
                        {d.getDate()}
                      </button>
                    );
                  })}
                </div>
                <div className="mt-2 flex items-center justify-between">
                  <button type="button" className="btn btn-ghost btn-sm" onClick={() => pick(new Date())}>Heute</button>
                  {value ? (
                    <button type="button" className="btn btn-ghost btn-sm" onClick={() => { onChange(""); setOpen(false); }}>Entfernen</button>
                  ) : null}
                </div>
              </>
            )}
          </div>
        </>
      ) : null}
    </div>
  );
}