"use client";

import { useState } from "react";
import { RECURRENCE_LABELS } from "@/lib/todoConstants";
import type { TodoRecurrence } from "@/models/Todo";

const WD = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];

export function TodoRecurrenceFields({
  defaultRecurrence = "none",
  defaultInterval = 1,
  defaultWeekdays = [],
  defaultEndDate = "",
  compact,
}: {
  defaultRecurrence?: TodoRecurrence;
  defaultInterval?: number;
  defaultWeekdays?: number[];
  defaultEndDate?: string;
  compact?: boolean;
}) {
  const [rec, setRec] = useState<TodoRecurrence>(defaultRecurrence);
  const sel = compact
    ? "bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-1.5 text-xs text-[var(--rk-ink)] focus:outline-none focus:border-white/50"
    : "bg-[var(--rk-bg)] border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50";

  return (
    <div className="flex flex-col gap-2">
      <label className={`flex flex-col gap-1 ${compact ? "text-xs" : "text-sm"}`}>
        <span className={compact ? "text-[var(--rk-ink-muted)]" : "text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]"}>
          Wiederholung
        </span>
        <select name="recurrence" value={rec} onChange={(e) => setRec(e.target.value as TodoRecurrence)} className={sel}>
          {(Object.keys(RECURRENCE_LABELS) as TodoRecurrence[]).map((r) => (
            <option key={r} value={r}>
              {RECURRENCE_LABELS[r]}
            </option>
          ))}
        </select>
      </label>

      {rec !== "none" && (
        <div className="flex flex-wrap items-center gap-3 text-xs">
          <label className="flex items-center gap-1.5 text-[var(--rk-ink-muted)]">
            alle
            <input
              name="recurrenceInterval"
              type="number"
              min={1}
              max={52}
              defaultValue={defaultInterval}
              className="w-14 bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2 py-1 text-xs text-[var(--rk-ink)] [color-scheme:dark]"
            />
            {rec === "daily" ? "Tage" : rec === "weekly" ? "Wochen" : "Monate"}
          </label>
          <label className="flex items-center gap-1.5 text-[var(--rk-ink-muted)]">
            bis
            <input
              name="recurrenceEndDate"
              type="date"
              defaultValue={defaultEndDate}
              className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2 py-1 text-xs text-[var(--rk-ink)] [color-scheme:dark]"
            />
          </label>
          {rec === "weekly" && (
            <div className="flex flex-wrap gap-1">
              {WD.map((d, i) => (
                <label
                  key={i}
                  className="flex items-center gap-1 rounded-lg border border-white/15 px-1.5 py-1 text-[var(--rk-ink-muted)] has-[:checked]:border-[var(--rk-accent)]/60 has-[:checked]:text-[var(--rk-ink)]"
                >
                  <input
                    type="checkbox"
                    name="recurrenceWeekdays"
                    value={i}
                    defaultChecked={defaultWeekdays.includes(i)}
                    className="h-3 w-3"
                  />
                  {d}
                </label>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}