/**
 * Picker fields used by ScheduleBuilder — time, day-of-week, day-of-month, and
 * the "On these days" weekday multi-select. The "Repeat every N [unit]" control
 * lives in schedule-interval-picker.tsx and reuses labelClass exported here.
 *
 * All visible text arrives via props so the package stays i18n-agnostic;
 * weekday names come from `Intl` in the given `locale`.
 */
import { cn } from "@houston-ai/core"
import { narrowWeekdayNames, shortWeekdayNames, longWeekdayNames } from "./schedule-format.ts"

const inputClass = cn(
  "px-3 py-2 rounded-lg border border-border/20 bg-background",
  "text-sm text-foreground",
  "focus:outline-none focus:shadow-sm transition-shadow",
)

export const labelClass = "text-xs font-medium text-muted-foreground mb-1.5 block"

export function TimePicker({
  label,
  value,
  onChange,
}: {
  label: string
  value: string
  onChange: (time: string) => void
}) {
  return (
    <div>
      <label className={labelClass}>{label}</label>
      <input
        type="time"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={cn(inputClass, "w-full")}
      />
    </div>
  )
}

export function DayOfWeekPicker({
  label,
  locale = "en-US",
  value,
  onChange,
}: {
  label: string
  locale?: string
  value: number
  onChange: (day: number) => void
}) {
  const names = shortWeekdayNames(locale)
  return (
    <div>
      <label className={labelClass}>{label}</label>
      <div className="flex gap-1">
        {names.map((name, day) => (
          <button
            key={day}
            onClick={() => onChange(day)}
            className={cn(
              "size-8 rounded-lg text-xs font-medium transition-colors",
              value === day
                ? "bg-primary text-primary-foreground"
                : "bg-background border border-border/20 text-muted-foreground hover:text-foreground",
            )}
          >
            {name}
          </button>
        ))}
      </div>
    </div>
  )
}

export function DayOfMonthPicker({
  label,
  value,
  onChange,
}: {
  label: string
  value: number
  onChange: (day: number) => void
}) {
  return (
    <div>
      <label className={labelClass}>{label}</label>
      <input
        type="number"
        min={1}
        max={31}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className={cn(inputClass, "w-24")}
      />
    </div>
  )
}

const WEEKDAY_SHORTCUT_DAYS: { key: "everyDay" | "weekdays" | "weekends"; days: number[] }[] = [
  { key: "everyDay", days: [0, 1, 2, 3, 4, 5, 6] },
  { key: "weekdays", days: [1, 2, 3, 4, 5] },
  { key: "weekends", days: [0, 6] },
]

/**
 * "On these days" — multi-select weekday toggle (single-letter, Sunday-first)
 * plus quick shortcuts, for the custom weekly schedule. Multi-select, so
 * distinct from DayOfWeekPicker (single-day, used by the Weekly preset). Day
 * letters + accessible names come from `Intl` in the given `locale`.
 */
export function WeekdaysPicker({
  label,
  locale = "en-US",
  shortcuts,
  value,
  onChange,
}: {
  label: string
  locale?: string
  shortcuts: { everyDay: string; weekdays: string; weekends: string }
  value: number[]
  onChange: (days: number[]) => void
}) {
  const narrow = narrowWeekdayNames(locale)
  const full = longWeekdayNames(locale)
  const toggle = (d: number) =>
    onChange(value.includes(d) ? value.filter((x) => x !== d) : [...value, d].sort((a, b) => a - b))
  return (
    <div>
      <label className={labelClass}>{label}</label>
      <div className="flex gap-1.5">
        {narrow.map((letter, d) => {
          const on = value.includes(d)
          return (
            <button
              key={d}
              type="button"
              aria-label={full[d]}
              aria-pressed={on}
              onClick={() => toggle(d)}
              className={cn(
                "size-9 rounded-full text-xs font-medium transition-colors",
                on
                  ? "bg-primary text-primary-foreground"
                  : "bg-background border border-border/20 text-muted-foreground hover:text-foreground",
              )}
            >
              {letter}
            </button>
          )
        })}
      </div>
      <div className="mt-2 flex gap-1.5">
        {WEEKDAY_SHORTCUT_DAYS.map((s) => (
          <button
            key={s.key}
            type="button"
            onClick={() => onChange(s.days)}
            className="h-7 rounded-full border border-border/20 bg-background px-3 text-xs text-muted-foreground transition-colors hover:text-foreground"
          >
            {shortcuts[s.key]}
          </button>
        ))}
      </div>
    </div>
  )
}
