<script setup>
import { computed, ref } from 'vue'
import GuideTooltip from './GuideTooltip.vue'

const props = defineProps({
  overviewCards: {
    type: Array,
    required: true,
  },
  weeklyRecords: {
    type: Array,
    required: true,
  },
  recentRecords: {
    type: Array,
    required: true,
  },
  rangeStart: {
    type: String,
    required: true,
  },
  rangeEnd: {
    type: String,
    required: true,
  },
  bestDay: {
    type: Object,
    default: null,
  },
  selectedDateLabel: {
    type: String,
    required: true,
  },
})

const emit = defineEmits(['update:range-start', 'update:range-end', 'quick-range'])

const flowScrollerRef = ref(null)
const flowDragState = ref(null)
const hoveredFlowRecord = ref(null)
const flowTooltipPosition = ref({ x: 0, y: 0 })

const flowGapClass = computed(() => {
  if (props.weeklyRecords.length > 14) {
    return 'gap-1'
  }

  return 'gap-3'
})

const flowItemStyle = computed(() => {
  const count = props.weeklyRecords.length

  if (count <= 0) {
    return {}
  }

  const gap = count > 14 ? 4 : 12
  const minWidth = count <= 7 ? 76 : count <= 14 ? 46 : 18

  if (count <= 31) {
    return {
      flex: '0 0 auto',
      width: `max(${minWidth}px, calc((100% - ${(count - 1) * gap}px) / ${count}))`,
    }
  }

  return {
    flex: '0 0 auto',
    width: '18px',
  }
})

const flowBarWidth = computed(() => {
  if (props.weeklyRecords.length <= 7) {
    return '48px'
  }

  if (props.weeklyRecords.length <= 14) {
    return '30px'
  }

  return '12px'
})

const shouldShowFlowTime = computed(() => props.weeklyRecords.length <= 14)

function shouldShowFlowLabel(index) {
  const count = props.weeklyRecords.length

  if (count <= 14) {
    return true
  }

  const interval = Math.ceil(count / 8)
  return index === 0 || index === count - 1 || index % interval === 0
}

function updateFlowTooltipPosition(event) {
  const tooltipWidth = 176
  const tooltipHeight = 86
  const margin = 12
  const viewportWidth = window.innerWidth || tooltipWidth
  const safeX = Math.min(
    Math.max(event.clientX, margin + tooltipWidth / 2),
    viewportWidth - margin - tooltipWidth / 2,
  )
  const safeY = Math.max(event.clientY - 18, margin + tooltipHeight)

  flowTooltipPosition.value = {
    x: safeX,
    y: safeY,
  }
}

function showFlowTooltip(record, event) {
  hoveredFlowRecord.value = record
  updateFlowTooltipPosition(event)
}

function moveFlowTooltip(event) {
  if (!hoveredFlowRecord.value) {
    return
  }

  updateFlowTooltipPosition(event)
}

function hideFlowTooltip() {
  hoveredFlowRecord.value = null
}

function startFlowDrag(event) {
  if (!flowScrollerRef.value || event.button !== 0) {
    return
  }

  flowDragState.value = {
    pointerId: event.pointerId,
    startX: event.clientX,
    scrollLeft: flowScrollerRef.value.scrollLeft,
  }
  flowScrollerRef.value.setPointerCapture?.(event.pointerId)
}

function moveFlowDrag(event) {
  if (!flowDragState.value || !flowScrollerRef.value) {
    return
  }

  event.preventDefault()
  flowScrollerRef.value.scrollLeft =
    flowDragState.value.scrollLeft - (event.clientX - flowDragState.value.startX)
}

function stopFlowDrag(event) {
  if (!flowDragState.value) {
    return
  }

  flowScrollerRef.value?.releasePointerCapture?.(event.pointerId)
  flowDragState.value = null
}
</script>

<template>
  <section class="grid gap-6">
    <article class="rounded-[28px] border border-stone-200 bg-white/86 p-5">
      <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">RANGE</p>
          <h2 class="mt-2 text-2xl font-semibold tracking-[-0.05em] text-stone-900">
            원하는 기간 기준으로 통계 보기
          </h2>
          <div class="mt-4 flex flex-wrap gap-2">
            <button
              type="button"
              class="rounded-full border border-stone-200 bg-white px-4 py-2 text-[11px] font-bold tracking-[0.12em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
              @click="emit('quick-range', 7)"
            >
              최근 1주
            </button>
            <button
              type="button"
              class="rounded-full border border-stone-200 bg-white px-4 py-2 text-[11px] font-bold tracking-[0.12em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
              @click="emit('quick-range', 30)"
            >
              최근 1달
            </button>
          </div>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
          <label class="flex flex-col gap-2 text-[11px] font-bold tracking-[0.14em] text-stone-500">
            START DATE
            <input
              :value="rangeStart"
              type="date"
              class="rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-400"
              @input="emit('update:range-start', $event.target.value)"
            />
          </label>
          <label class="flex flex-col gap-2 text-[11px] font-bold tracking-[0.14em] text-stone-500">
            END DATE
            <input
              :value="rangeEnd"
              type="date"
              class="rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-400"
              @input="emit('update:range-end', $event.target.value)"
            />
          </label>
        </div>
      </div>
    </article>

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      <article
        v-for="card in overviewCards"
        :key="card.label"
        class="rounded-[28px] border border-stone-200 bg-white/86 p-5"
      >
        <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">{{ card.label }}</p>
        <p class="mt-4 text-[34px] font-semibold tracking-[-0.06em] text-stone-900">{{ card.value }}</p>
        <p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">{{ card.caption }}</p>
      </article>
    </div>

    <div class="grid items-start gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(320px,0.7fr)]">
      <article class="rounded-[28px] border border-stone-200 bg-white/86 p-6">
        <div class="flex items-end justify-between gap-4">
          <div>
            <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">RANGE FLOW</p>
            <h2 class="mt-2 text-2xl font-semibold tracking-[-0.05em] text-stone-900">
              선택 기간의 날짜별 집중 흐름
            </h2>
            <p class="mt-2 text-[12px] font-semibold leading-5 text-stone-500">
              기록이 있는 날짜만 날짜순으로 표시합니다.
            </p>
          </div>
          <p class="text-[11px] font-semibold tracking-[0.06em] text-stone-500">
            기준 날짜: {{ selectedDateLabel }}
          </p>
        </div>

        <div
          ref="flowScrollerRef"
          class="mt-8 flex h-[268px] select-none items-stretch overflow-x-auto overscroll-x-contain border-b border-stone-200 pb-4 cursor-grab active:cursor-grabbing"
          :class="flowGapClass"
          @pointerdown="startFlowDrag"
          @pointermove="moveFlowDrag"
          @pointerup="stopFlowDrag"
          @pointercancel="stopFlowDrag"
          @pointerleave="stopFlowDrag"
        >
          <div
            v-for="(record, index) in weeklyRecords"
            :key="record.key"
            class="relative flex flex-col items-center justify-end gap-3"
            :style="flowItemStyle"
            @mouseenter="showFlowTooltip(record, $event)"
            @mousemove="moveFlowTooltip"
            @mouseleave="hideFlowTooltip"
          >
            <div class="flex h-44 items-end">
              <div
                class="rounded-t-full bg-stone-900/90 transition-all"
                :style="{ width: flowBarWidth, height: `${record.barHeight}%` }"
              />
            </div>
            <div class="h-14 text-center">
              <template v-if="shouldShowFlowLabel(index)">
                <p class="select-none text-[11px] font-bold tracking-[0.12em] text-stone-500">{{ record.dateLabel }}</p>
                <p class="mt-1 select-none text-[10px] font-bold tracking-[0.12em] text-stone-400">{{ record.weekday }}</p>
              </template>
              <p
                v-if="shouldShowFlowTime"
                class="mt-1 select-none text-[11px] font-semibold text-stone-800"
              >
                {{ record.focusedTime }}
              </p>
            </div>
          </div>
          <p
            v-if="weeklyRecords.length === 0"
            class="flex min-h-[180px] w-full items-center justify-center rounded-2xl border border-dashed border-stone-300 text-sm font-semibold text-stone-500"
          >
            선택 기간에 기록이 없습니다.
          </p>
        </div>
        <div
          v-if="hoveredFlowRecord"
          class="pointer-events-none fixed z-[80] w-44 -translate-x-1/2 -translate-y-full rounded-2xl border border-stone-200 bg-white px-3 py-2 text-left shadow-[0_16px_40px_rgba(28,25,23,0.14)]"
          :style="{ left: `${flowTooltipPosition.x}px`, top: `${flowTooltipPosition.y}px` }"
        >
          <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">
            {{ hoveredFlowRecord.dateLabel }} {{ hoveredFlowRecord.weekday }}
          </p>
          <p class="mt-1 text-[11px] font-semibold text-stone-900">
            FOCUSED {{ hoveredFlowRecord.focusedTime }}
          </p>
          <p class="mt-1 text-[10px] font-semibold tracking-[0.04em] text-stone-500">
            TASKS {{ hoveredFlowRecord.completedTasks }} / {{ hoveredFlowRecord.totalTasks }}
          </p>
        </div>
      </article>

      <div class="grid gap-6">
        <article class="rounded-[28px] border border-stone-200 bg-white/86 p-6">
          <div class="flex items-center gap-2">
            <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">BEST DAY</p>
            <GuideTooltip
              title="Best Day"
              description="선택 범위 안에서 FOCUSED TIME이 가장 큰 날짜를 보여줍니다."
              :dismissible="false"
            />
          </div>
          <div v-if="bestDay" class="mt-4">
            <h2 class="text-2xl font-semibold tracking-[-0.05em] text-stone-900">
              {{ bestDay.dateLabel }}
            </h2>
            <p class="mt-3 text-[13px] font-semibold leading-6 text-stone-700">
              {{ bestDay.summary }}
            </p>
          </div>
          <p v-else class="mt-4 text-[13px] font-semibold leading-6 text-stone-600">
            아직 통계를 보여줄 기록이 충분하지 않습니다.
          </p>
        </article>
      </div>
    </div>

    <article class="rounded-[28px] border border-stone-200 bg-white/86 p-6">
      <div class="flex items-center gap-2">
        <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">RECENT RECORDS</p>
        <GuideTooltip
          title="Recent Records"
          description="선택 범위 안의 기록을 날짜 내림차순으로 최대 5개까지 보여줍니다."
          :dismissible="false"
        />
      </div>
      <div class="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-5">
        <div
          v-for="record in recentRecords"
          :key="record.key"
          class="rounded-2xl border border-stone-200 bg-stone-50/80 p-4"
        >
          <div class="flex h-full flex-col justify-between gap-4">
            <div>
              <p class="text-[12px] font-bold tracking-[0.08em] text-stone-900">{{ record.dateLabel }}</p>
              <p class="mt-2 text-[11px] font-semibold leading-5 text-stone-600">
                {{ record.comment || '코멘트 없음' }}
              </p>
            </div>
            <div>
              <p class="text-sm font-semibold tracking-[-0.03em] text-stone-900">{{ record.focusedTime }}</p>
              <p class="mt-1 text-[11px] font-semibold text-stone-500">완료율 {{ record.completionRate }}%</p>
            </div>
          </div>
        </div>
        <p
          v-if="recentRecords.length === 0"
          class="rounded-2xl border border-dashed border-stone-300 px-4 py-8 text-sm font-semibold text-stone-500"
        >
          선택 기간에 최근 기록이 없습니다.
        </p>
      </div>
    </article>
  </section>
</template>
