import { createSignal, Show } from "solid-js";
import { Repeat } from "lucide-solid";

interface RecurringConfigProps {
  value: string;
  onChange: (rule: string) => void;
  endDate?: string;
  onEndDateChange: (date?: string) => void;
}

export function RecurringConfig(props: RecurringConfigProps) {
  const [showOptions, setShowOptions] = createSignal(false);

  const presets = [
    { label: "Daily", value: "FREQ=DAILY" },
    { label: "Weekdays", value: "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR" },
    { label: "Weekly", value: "FREQ=WEEKLY" },
    { label: "Bi-weekly", value: "FREQ=WEEKLY;INTERVAL=2" },
    { label: "Monthly", value: "FREQ=MONTHLY" },
    { label: "Quarterly", value: "FREQ=MONTHLY;INTERVAL=3" },
    { label: "Yearly", value: "FREQ=YEARLY" },
  ];

  const getLabel = () => {
    if (!props.value) return null;
    const preset = presets.find(p => p.value === props.value);
    return preset?.label || "Custom";
  };

  return (
    <div class="relative">
      <button
        type="button"
        onClick={() => setShowOptions(!showOptions())}
        class={`flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-colors ${
          props.value
            ? "border-[var(--accent)] text-[var(--accent)] bg-[var(--accent-muted)]"
            : "border-[var(--border)] text-[var(--text-muted)] hover:bg-[var(--surface-hover)]"
        }`}
      >
        <Repeat class="w-4 h-4" />
        <Show when={getLabel()} fallback="Repeat">
          {getLabel()}
        </Show>
      </button>

      <Show when={showOptions()}>
        <div class="absolute top-full left-0 mt-1 z-10 w-64 p-3 rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
          <div class="space-y-1">
            <button
              type="button"
              onClick={() => { props.onChange(""); setShowOptions(false); }}
              class={`w-full text-left px-3 py-2 rounded-lg text-sm ${
                !props.value ? "bg-[var(--accent-muted)] text-[var(--accent)]" : "hover:bg-[var(--surface-hover)]"
              }`}
            >
              No repeat
            </button>
            {presets.map(preset => (
              <button
                type="button"
                onClick={() => { props.onChange(preset.value); setShowOptions(false); }}
                class={`w-full text-left px-3 py-2 rounded-lg text-sm ${
                  props.value === preset.value ? "bg-[var(--accent-muted)] text-[var(--accent)]" : "hover:bg-[var(--surface-hover)]"
                }`}
              >
                {preset.label}
              </button>
            ))}
          </div>

          <Show when={props.value}>
            <div class="mt-3 pt-3 border-t border-[var(--border)]">
              <label class="block text-xs font-medium text-[var(--text-muted)] mb-1">
                End date (optional)
              </label>
              <input
                type="date"
                value={props.endDate || ""}
                onInput={e => props.onEndDateChange(e.currentTarget.value || undefined)}
                class="w-full px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-sm"
              />
            </div>
          </Show>
        </div>
      </Show>
    </div>
  );
}