"use client";

import { AppointmentRangeCard } from "./index";

export interface DemoProps {
  accent?: string;
  startTime?: string;
  endTime?: string;
  showIcons?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#38BDF8", startTime = "10:30 AM", endTime = "12:30 PM", showIcons = true }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <AppointmentRangeCard accent={accent} startTime={startTime} endTime={endTime} showIcons={showIcons} />
    </div>
  );
}

1d:T1f88, 1e:T1a071,

<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    startTime?: string;
    endTime?: string;
    showIcons?: boolean;
  }>(),
  { accent: "#38BDF8", startTime: "10:30 AM", endTime: "12:30 PM", showIcons: true },
);

const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
const VIEW_YEAR = 2026;
const VIEW_MONTH = 8; // September, 0-indexed
const MONTH_NAME = "September";
const TODAY_DAY = 14;
const DEFAULT_SELECTED_DAY = 22;

function alpha(hex: string, a: number): string {
  const raw = hex.replace("#", "").trim();
  const six = raw.length === 3 ? raw.replace(/./g, (c) => c + c) : raw;
  const n = Number.parseInt(six, 16);
  if (six.length !== 6 || Number.isNaN(n)) return hex;
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

const total = new Date(VIEW_YEAR, VIEW_MONTH + 1, 0).getDate();
const offset = new Date(VIEW_YEAR, VIEW_MONTH, 1).getDay();
const pad = Array.from({ length: offset }, (_, i) => i);
const days = Array.from({ length: total }, (_, i) => i + 1);

const selected = ref(DEFAULT_SELECTED_DAY);
const focusedDay = ref(DEFAULT_SELECTED_DAY);
const start = ref(props.startTime);
const end = ref(props.endTime);
const startFocused = ref(false);
const endFocused = ref(false);
const cellRefs = reactive(new Map<number, HTMLButtonElement>());

watch(
  () => props.startTime,
  (v) => (start.value = v),
);
watch(
  () => props.endTime,
  (v) => (end.value = v),
);

function setCellRef(day: number, el: unknown) {
  if (el) cellRefs.set(day, el as HTMLButtonElement);
  else cellRefs.delete(day);
}

function select(day: number) {
  selected.value = day;
  focusedDay.value = day;
}

function focusDay(day: number) {
  focusedDay.value = day;
  cellRefs.get(day)?.focus();
}

function handleArrow(event: KeyboardEvent, day: number) {
  const idx = days.indexOf(day);
  let nextIdx = idx;
  if (event.key === "ArrowRight") nextIdx = idx + 1;
  else if (event.key === "ArrowLeft") nextIdx = idx - 1;
  else if (event.key === "ArrowDown") nextIdx = idx + 7;
  else if (event.key === "ArrowUp") nextIdx = idx - 7;
  else return;
  event.preventDefault();
  const next = days[Math.min(days.length - 1, Math.max(0, nextIdx))];
  if (next !== undefined) focusDay(next);
}

const cardStyle = computed(() => ({
  borderColor: alpha(props.accent, 0.22),
  backgroundColor: alpha(props.accent, 0.035),
}));

function fillStyle(accent: string) {
  return { backgroundColor: accent, boxShadow: `0 4px 14px ${alpha(accent, 0.4)}` };
}
function ringStyle(accent: string) {
  return { boxShadow: `inset 0 0 0 1.5px ${alpha(accent, 0.6)}` };
}
function fieldStyle(accent: string, focused: boolean) {
  return {
    borderColor: focused ? alpha(accent, 0.65) : "rgba(128,128,128,0.22)",
    backgroundColor: focused ? alpha(accent, 0.08) : "rgba(128,128,128,0.06)",
    boxShadow: focused ? `0 0 0 3px ${alpha(accent, 0.16)}` : "0 0 0 0 rgba(0,0,0,0)",
  };
}
</script>

<template>
  <div class="appointment-range-card" :style="cardStyle">
    <div role="group" :aria-label="`Choose a date in ${MONTH_NAME} ${VIEW_YEAR}`">
      <div class="weekdays">
        <span v-for="label in WEEKDAYS" :key="label">{{ label }}</span>
      </div>

      <div class="grid">
        <div v-for="p in pad" :key="`pad-${p}`" aria-hidden="true" />
        <div v-for="day in days" :key="day" class="cell-slot">
          <button
            type="button"
            :ref="(el) => setCellRef(day, el)"
            :tabindex="day === focusedDay ? 0 : -1"
            :aria-pressed="day === selected"
            :aria-label="`${MONTH_NAME} ${day}${day === TODAY_DAY && day !== selected ? ' (today)' : ''}`"
            class="day"
            :class="{ selected: day === selected }"
            :style="{ outlineColor: accent }"
            @click="select(day)"
            @focus="focusedDay = day"
            @keydown="(e) => handleArrow(e, day)"
          >
            <span v-if="day === selected" class="fill" :style="fillStyle(accent)" />
            <span v-else-if="day === TODAY_DAY" class="ring" :style="ringStyle(accent)" />
            <span class="num">{{ day }}</span>
          </button>
        </div>
      </div>
    </div>

    <div class="footer">
      <label class="field">
        <span class="label">Start Time</span>
        <span class="field-shell" :style="fieldStyle(accent, startFocused)">
          <svg v-if="showIcons" viewBox="0 0 24 24" width="14" height="14" fill="none" aria-hidden>
            <circle cx="12" cy="12" r="8.4" :stroke="startFocused ? accent : 'currentColor'" stroke-width="1.75" />
            <path d="M12 7.8V12l3 2.1" :stroke="startFocused ? accent : 'currentColor'" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          <input
            v-model="start"
            type="text"
            autocomplete="off"
            maxlength="16"
            @focus="startFocused = true"
            @blur="startFocused = false"
          />
        </span>
      </label>
      <label class="field">
        <span class="label">End Time</span>
        <span class="field-shell" :style="fieldStyle(accent, endFocused)">
          <svg v-if="showIcons" viewBox="0 0 24 24" width="14" height="14" fill="none" aria-hidden>
            <circle cx="12" cy="12" r="8.4" :stroke="endFocused ? accent : 'currentColor'" stroke-width="1.75" />
            <path d="M12 7.8V12l3 2.1" :stroke="endFocused ? accent : 'currentColor'" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          <input
            v-model="end"
            type="text"
            autocomplete="off"
            maxlength="16"
            @focus="endFocused = true"
            @blur="endFocused = false"
          />
        </span>
      </label>
    </div>
  </div>
</template>

<style scoped>
.appointment-range-card {
  width: 100%;
  max-width: 320px;
  border-radius: 1rem;
  border: 1px solid;
  padding: 1.25rem;
  color: currentColor;
  box-sizing: border-box;
}
.weekdays {
  margin-bottom: 0.5rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(128 128 128 / 0.7);
}
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 0.25rem;
}
.cell-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0;
}
.day {
  position: relative;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: currentColor;
  opacity: 0.82;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.day:hover {
  background: rgb(128 128 128 / 0.12);
}
.day:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}
.day.selected {
  color: #fff;
  opacity: 1;
}
.day.selected:hover {
  background: transparent;
}
.fill,
.ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  z-index: 0;
}
.num {
  position: relative;
  z-index: 1;
}
.footer {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid rgb(128 128 128 / 0.16);
  padding-top: 1rem;
}
.field {
  flex: 1;
  min-width: 132px;
}
.label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(128 128 128 / 0.75);
}
.field-shell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid;
  padding: 0.5rem 0.875rem;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}
.field-shell input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  outline: none;
}
</style>

Nearby