CRM_Montzar/apps/web/src/components/JalaliDateInput.vue

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
import {
  addJalaliMonths,
  dateToJalali,
  formatJalaliNumeric,
  formatLocalDateInput,
  formatLocalDateTimeInput,
  jalaliMonthLength,
  jalaliMonthName,
  jalaliToDate,
  parseLocalInput,
  toFaDigits,
} from '@/lib/jalali';
import UiIcon from '@/components/UiIcon.vue';

const model = defineModel<string>({ default: '' });
const props = withDefaults(
  defineProps<{
    mode?: 'date' | 'datetime' | 'time';
    id?: string;
    required?: boolean;
    disabled?: boolean;
    placeholder?: string;
    clearable?: boolean;
    icon?: 'calendar' | 'clock' | 'bell';
  }>(),
  {
    mode: 'date',
    required: false,
    disabled: false,
    clearable: true,
    icon: undefined,
  },
);

const WEEKDAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'] as const;

const open = ref(false);
const triggerRef = ref<HTMLButtonElement | null>(null);
const panelRef = ref<HTMLElement | null>(null);
const top = ref(0);
const left = ref(0);
const todayJ = dateToJalali(new Date());
const cursor = ref<{ jy: number; jm: number }>({ jy: todayJ.jy, jm: todayJ.jm });
const draftHour = ref(9);
const draftMinute = ref(0);

type Cell = {
  key: string;
  jy: number;
  jm: number;
  jd: number;
  inMonth: boolean;
  isToday: boolean;
  isSelected: boolean;
};

const parsed = computed(() => (props.mode === 'time' ? null : parseLocalInput(model.value)));

const triggerIcon = computed(() => {
  if (props.icon) return props.icon;
  if (props.mode === 'time') return 'clock';
  if (props.icon === 'bell') return 'bell';
  return 'calendar';
});

const display = computed(() => {
  if (props.mode === 'time') {
    const match = /^(\d{1,2}):(\d{2})$/.exec(model.value);
    if (!match) return '';
    return `${toFaDigits(match[1].padStart(2, '0'))}:${toFaDigits(match[2])}`;
  }
  if (!parsed.value) return '';
  const date = formatJalaliNumeric(parsed.value);
  if (props.mode === 'date') return date;
  const hh = String(parsed.value.getHours()).padStart(2, '0');
  const mm = String(parsed.value.getMinutes()).padStart(2, '0');
  return `${date}  ${toFaDigits(hh)}:${toFaDigits(mm)}`;
});

const emptyLabel = computed(
  () =>
    props.placeholder ||
    (props.mode === 'datetime'
      ? 'انتخاب تاریخ و ساعت'
      : props.mode === 'time'
        ? 'انتخاب ساعت'
        : 'انتخاب تاریخ'),
);

const monthTitle = computed(
  () => `${jalaliMonthName(cursor.value.jm)} ${toFaDigits(cursor.value.jy)}`,
);

const hours = Array.from({ length: 24 }, (_, i) => i);
const minuteMarks = Array.from({ length: 12 }, (_, i) => i * 5);
const minutes = computed(() => {
  if (!minuteMarks.includes(draftMinute.value)) {
    return [...minuteMarks, draftMinute.value].sort((a, b) => a - b);
  }
  return minuteMarks;
});

const draftTimeLabel = computed(
  () =>
    `${toFaDigits(String(draftHour.value).padStart(2, '0'))}:${toFaDigits(String(draftMinute.value).padStart(2, '0'))}`,
);

function dialPoint(index: number, total: number, radius: number) {
  const angle = (index / total) * 2 * Math.PI - Math.PI / 2;
  return {
    left: `calc(50% + ${Math.cos(angle) * radius}px)`,
    top: `calc(50% + ${Math.sin(angle) * radius}px)`,
  };
}

function hourDialStyle(hour: number) {
  // حلقه داخلی ۰–۱۱، حلقه بیرونی ۱۲–۲۳
  const ring = hour < 12 ? 46 : 72;
  const index = hour % 12;
  return dialPoint(index, 12, ring);
}

function minuteDialStyle(minute: number) {
  const index = minuteMarks.includes(minute)
    ? minuteMarks.indexOf(minute)
    : Math.round(minute / 5) % 12;
  return dialPoint(index, 12, 64);
}

function setHour(hour: number) {
  draftHour.value = hour;
  applyTime();
}

function setMinute(minute: number) {
  draftMinute.value = minute;
  applyTime();
}

const cells = computed<Cell[]>(() => {
  const { jy, jm } = cursor.value;
  const first = jalaliToDate(jy, jm, 1);
  const firstDow = (first.getDay() + 1) % 7;
  const today = dateToJalali(new Date());
  const selected = parsed.value ? dateToJalali(parsed.value) : null;
  const out: Cell[] = [];

  const prev = addJalaliMonths(jy, jm, -1);
  const prevLen = jalaliMonthLength(prev.jy, prev.jm);
  for (let i = 0; i < firstDow; i += 1) {
    const jd = prevLen - firstDow + i + 1;
    out.push(makeCell(prev.jy, prev.jm, jd, false, today, selected));
  }

  const len = jalaliMonthLength(jy, jm);
  for (let jd = 1; jd <= len; jd += 1) {
    out.push(makeCell(jy, jm, jd, true, today, selected));
  }

  const next = addJalaliMonths(jy, jm, 1);
  let n = 1;
  while (out.length % 7 !== 0) {
    out.push(makeCell(next.jy, next.jm, n, false, today, selected));
    n += 1;
  }
  return out;
});

function makeCell(
  jy: number,
  jm: number,
  jd: number,
  inMonth: boolean,
  today: { jy: number; jm: number; jd: number },
  selected: { jy: number; jm: number; jd: number } | null,
): Cell {
  return {
    key: `${jy}-${jm}-${jd}`,
    jy,
    jm,
    jd,
    inMonth,
    isToday: today.jy === jy && today.jm === jm && today.jd === jd,
    isSelected: Boolean(selected && selected.jy === jy && selected.jm === jm && selected.jd === jd),
  };
}

function emitDate(d: Date) {
  model.value = props.mode === 'datetime' ? formatLocalDateTimeInput(d) : formatLocalDateInput(d);
}

function emitTime() {
  const pad = (n: number) => String(n).padStart(2, '0');
  model.value = `${pad(draftHour.value)}:${pad(draftMinute.value)}`;
}

function syncDraftFrom(d: Date | null) {
  if (props.mode === 'time') {
    const match = /^(\d{1,2}):(\d{2})$/.exec(model.value);
    draftHour.value = match ? Number(match[1]) : 10;
    draftMinute.value = match ? Number(match[2]) : 30;
    return;
  }
  const source = d ?? new Date();
  const j = dateToJalali(source);
  cursor.value = { jy: j.jy, jm: j.jm };
  draftHour.value = props.mode === 'datetime' ? source.getHours() : 9;
  draftMinute.value = props.mode === 'datetime' ? source.getMinutes() : 0;
}

function place() {
  const trigger = triggerRef.value;
  const panel = panelRef.value;
  if (!trigger) return;
  const rect = trigger.getBoundingClientRect();
  const width = panel?.offsetWidth || (props.mode === 'time' ? 340 : 320);
  const height = panel?.offsetHeight || (props.mode === 'time' ? 420 : 360);
  let nextLeft = rect.left;
  if (getComputedStyle(document.documentElement).direction === 'rtl') {
    nextLeft = rect.right - width;
  }
  nextLeft = Math.min(Math.max(8, nextLeft), window.innerWidth - width - 8);
  let nextTop = rect.bottom + 8;
  if (nextTop + height > window.innerHeight - 8) {
    nextTop = Math.max(8, rect.top - height - 8);
  }
  left.value = nextLeft;
  top.value = nextTop;
}

function onWindowChange() {
  if (open.value) place();
}

async function show() {
  if (props.disabled) return;
  syncDraftFrom(parsed.value);
  open.value = true;
  await nextTick();
  place();
  await nextTick();
  place();
}

function hide() {
  open.value = false;
}

function toggle() {
  if (open.value) hide();
  else void show();
}

function goMonth(delta: number) {
  const next = addJalaliMonths(cursor.value.jy, cursor.value.jm, delta);
  cursor.value = next;
  void nextTick(place);
}

function pickDay(cell: Cell) {
  if (!cell.inMonth) {
    cursor.value = { jy: cell.jy, jm: cell.jm };
  }
  const d = jalaliToDate(cell.jy, cell.jm, cell.jd);
  if (props.mode === 'datetime') {
    d.setHours(draftHour.value, draftMinute.value, 0, 0);
    emitDate(d);
    return;
  }
  emitDate(d);
  hide();
}

function applyTime() {
  if (props.mode === 'time') {
    emitTime();
    return;
  }
  const source = parsed.value ?? jalaliToDate(cursor.value.jy, cursor.value.jm, 1);
  const j = dateToJalali(source);
  const d = jalaliToDate(j.jy, j.jm, j.jd);
  d.setHours(draftHour.value, draftMinute.value, 0, 0);
  emitDate(d);
}

function pickToday() {
  const d = new Date();
  if (props.mode === 'time') {
    draftHour.value = d.getHours();
    draftMinute.value = d.getMinutes();
    emitTime();
    return;
  }
  if (props.mode === 'date') {
    d.setHours(0, 0, 0, 0);
  }
  syncDraftFrom(d);
  emitDate(d);
  if (props.mode === 'date') hide();
}

function clear() {
  model.value = '';
  hide();
}

function onDocPointer(ev: PointerEvent) {
  const target = ev.target as Node | null;
  if (!target) return;
  if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) return;
  hide();
}

function onKeydown(ev: KeyboardEvent) {
  if (ev.key === 'Escape' && open.value) {
    ev.stopPropagation();
    ev.preventDefault();
    hide();
  }
}

watch(open, (value) => {
  if (value) {
    window.addEventListener('resize', onWindowChange);
    window.addEventListener('scroll', onWindowChange, true);
    document.addEventListener('pointerdown', onDocPointer, true);
    window.addEventListener('keydown', onKeydown, true);
    return;
  }
  window.removeEventListener('resize', onWindowChange);
  window.removeEventListener('scroll', onWindowChange, true);
  document.removeEventListener('pointerdown', onDocPointer, true);
  window.removeEventListener('keydown', onKeydown, true);
});

watch(
  () => model.value,
  () => {
    if (props.mode === 'time') syncDraftFrom(null);
  },
  { immediate: true },
);

onBeforeUnmount(() => {
  window.removeEventListener('resize', onWindowChange);
  window.removeEventListener('scroll', onWindowChange, true);
  document.removeEventListener('pointerdown', onDocPointer, true);
  window.removeEventListener('keydown', onKeydown, true);
});
</script>

<template>
  <div class="wrap" :class="{ disabled, 'time-only': mode === 'time' }">
    <button
      :id="id"
      ref="triggerRef"
      class="trigger"
      :class="{ 'clock-trigger': mode === 'time' }"
      type="button"
      :disabled="disabled"
      :aria-expanded="open"
      :aria-required="required || undefined"
      @click="toggle"
    >
      <template v-if="mode === 'time'">
        <span class="clock-face" aria-hidden="true">
          <i
            class="hand hour-hand"
            :style="{
              transform: `rotate(${(draftHour % 12) * 30 + draftMinute * 0.5}deg)`,
            }"
          />
          <i
            class="hand minute-hand"
            :style="{ transform: `rotate(${draftMinute * 6}deg)` }"
          />
          <i class="hub" />
        </span>
        <span class="clock-text" :class="{ empty: !display }">
          {{ display || emptyLabel }}
        </span>
      </template>
      <template v-else>
        <span :class="{ empty: !display }">{{ display || emptyLabel }}</span>
        <UiIcon :name="triggerIcon" :size="18" />
      </template>
    </button>

    <Teleport to="body">
      <div
        v-if="open"
        id="jalali-picker"
        ref="panelRef"
        class="panel"
        :class="{ 'panel-time': mode === 'time' }"
        role="dialog"
        :style="{ top: `${top}px`, left: `${left}px` }"
      >
        <header v-if="mode !== 'time'" class="nav">
          <button type="button" class="nav-btn" aria-label="ماه بعد" @click="goMonth(1)">
            <UiIcon name="chevron" :size="16" />
          </button>
          <strong>{{ monthTitle }}</strong>
          <button type="button" class="nav-btn next" aria-label="ماه قبل" @click="goMonth(-1)">
            <UiIcon name="chevron" :size="16" />
          </button>
        </header>

        <template v-if="mode !== 'time'">
          <div class="week">
            <span v-for="day in WEEKDAYS" :key="day">{{ day }}</span>
          </div>
          <div class="grid">
            <button
              v-for="cell in cells"
              :key="cell.key"
              type="button"
              class="day"
              :class="{ mute: !cell.inMonth, today: cell.isToday, on: cell.isSelected }"
              @click="pickDay(cell)"
            >
              {{ toFaDigits(cell.jd) }}
            </button>
          </div>
        </template>

        <div v-if="mode === 'datetime' || mode === 'time'" class="time-dials">
          <p v-if="mode === 'time'" class="time-title">{{ draftTimeLabel }}</p>
          <div class="dials">
            <div class="dial-block">
              <span class="dial-label">ساعت</span>
              <div class="dial" role="listbox" aria-label="ساعت">
                <span class="dial-center">{{ toFaDigits(String(draftHour).padStart(2, '0')) }}</span>
                <button
                  v-for="h in hours"
                  :key="`h-${h}`"
                  type="button"
                  class="tick"
                  :class="{ on: draftHour === h, outer: h >= 12 }"
                  :style="hourDialStyle(h)"
                  @click="setHour(h)"
                >
                  {{ toFaDigits(h) }}
                </button>
              </div>
            </div>
            <div class="dial-block">
              <span class="dial-label">دقیقه</span>
              <div class="dial" role="listbox" aria-label="دقیقه">
                <span class="dial-center">{{ toFaDigits(String(draftMinute).padStart(2, '0')) }}</span>
                <button
                  v-for="m in minutes"
                  :key="`m-${m}`"
                  type="button"
                  class="tick"
                  :class="{ on: draftMinute === m }"
                  :style="minuteDialStyle(m)"
                  @click="setMinute(m)"
                >
                  {{ toFaDigits(String(m).padStart(2, '0')) }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <footer class="foot">
          <button type="button" class="link" @click="pickToday">
            {{ mode === 'time' ? 'الان' : 'امروز' }}
          </button>
          <button
            v-if="clearable && !required && model"
            type="button"
            class="link"
            @click="clear"
          >
            پاک کردن
          </button>
          <button type="button" class="done" @click="hide">تأیید</button>
        </footer>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.clock-trigger {
  justify-content: flex-start;
  gap: 0.8rem;
  min-height: 52px;
  border-radius: 16px;
  padding: 0.45rem 0.85rem 0.45rem 0.45rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fffd 100%);
}

.clock-face {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    radial-gradient(circle at center, #fff 0 38%, transparent 39%),
    conic-gradient(from 0deg, #ecfdf5, #ccfbf1, #ecfdf5);
  border: 2px solid #99f6e4;
  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.08);
}

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: center bottom;
  border-radius: 99px;
  background: #0f766e;
}

.hour-hand {
  width: 2.5px;
  height: 11px;
  margin-inline-start: -1.25px;
}

.minute-hand {
  width: 2px;
  height: 15px;
  margin-inline-start: -1px;
  background: #14b8a6;
}

.hub {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #0f766e;
}

.clock-text {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  color: #0f172a;
}

.trigger:focus {
  outline: 2px solid var(--accent-soft, #ccfbf1);
  border-color: var(--accent, #0d9488);
}

.trigger span {
  min-width: 0;
}

.trigger .empty {
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.92rem;
}

.trigger :deep(.ico) {
  color: #0d9488;
  flex-shrink: 0;
}

.disabled .trigger {
  opacity: 0.55;
  cursor: not-allowed;
}

.panel {
  position: fixed;
  z-index: 120;
  width: min(20.5rem, calc(100vw - 16px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  padding: 0.75rem 0.8rem 0.7rem;
  font-family: IRANSans, Tahoma, sans-serif;
}

.panel-time {
  width: min(22.5rem, calc(100vw - 16px));
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.nav strong {
  font-size: 0.92rem;
}

.nav-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #0f766e;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.nav-btn.next :deep(.ico) {
  transform: scaleX(-1);
}

.week,
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.week span {
  text-align: center;
  color: #94a3b8;
  font-size: 0.72rem;
  padding-bottom: 0.25rem;
}

.day {
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #0f172a;
  font: inherit;
  cursor: pointer;
}

.day.mute {
  color: #cbd5e1;
}

.day.today {
  box-shadow: inset 0 0 0 1px #99f6e4;
}

.day.on,
.day:hover {
  background: #0d9488;
  color: #fff;
}

.day.mute:hover {
  background: #f1f5f9;
  color: #64748b;
}

.time-dials {
  margin-top: 0.55rem;
  display: grid;
  gap: 0.65rem;
}

.time-title {
  margin: 0;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f766e;
  letter-spacing: 0.04em;
}

.dials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.dial-block {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}

.dial-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 700;
}

.dial {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 28%, transparent 29%),
    radial-gradient(circle at center, #f0fdfa 0 70%, #ecfeff 100%);
  border: 2px solid #99f6e4;
  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.06);
}

.dial-center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0d9488;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  z-index: 2;
  box-shadow: 0 6px 14px rgba(13, 148, 136, 0.28);
}

.tick {
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
}

.tick.outer {
  font-size: 0.68rem;
  color: #64748b;
}

.tick:hover {
  background: #ccfbf1;
  color: #0f766e;
}

.tick.on {
  background: #14b8a6;
  color: #fff;
  box-shadow: 0 4px 10px rgba(20, 184, 166, 0.35);
}

.foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.link,
.done {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.link {
  color: #0f766e;
  font-size: 0.8rem;
  font-weight: 700;
}

.done {
  margin-inline-start: auto;
  background: #14b8a6;
  color: #fff;
  border-radius: 10px;
  padding: 0.4rem 0.8rem;
  font-weight: 800;
  font-size: 0.8rem;
}

@media (max-width: 420px) {
  .dials {
    grid-template-columns: 1fr;
  }

  .dial {
    width: 160px;
    height: 160px;
  }
}
</style>