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

const props = defineProps({
    // Veri: [{ label: 'Pzt', value: 5 }, ...]
    data: { type: Array, default: () => [] },
    width: { type: Number, default: 320 },
    height: { type: Number, default: 64 },
    color: { type: String, default: '#6366f1' }, // indigo-500
    fillColor: { type: String, default: 'rgba(99, 102, 241, 0.15)' },
    showGrid: { type: Boolean, default: true },
    showDots: { type: Boolean, default: true },
    showLabels: { type: Boolean, default: false },
    // chart tipi: 'line' | 'bar' | 'area'
    type: { type: String, default: 'area' },
})

const paddingX = 8
const paddingY = 6
const tooltipIdx = ref(null)

const max = computed(() => {
    if (!props.data.length) return 1
    return Math.max(...props.data.map(d => d.value || 0), 1)
})

const points = computed(() => {
    if (!props.data.length) return []
    const w = props.width - paddingX * 2
    const h = props.height - paddingY * 2
    const step = props.data.length > 1 ? w / (props.data.length - 1) : 0
    return props.data.map((d, i) => ({
        x: paddingX + i * step,
        y: paddingY + h - ((d.value || 0) / max.value) * h,
        value: d.value || 0,
        label: d.label,
    }))
})

const linePath = computed(() => {
    if (!points.value.length) return ''
    return points.value.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ')
})

const areaPath = computed(() => {
    if (!points.value.length) return ''
    const bottom = props.height - paddingY
    const start = points.value[0]
    const end = points.value[points.value.length - 1]
    return `M ${start.x} ${bottom} ` +
           points.value.map((p, i) => `${i === 0 ? 'L' : 'L'} ${p.x} ${p.y}`).join(' ') +
           ` L ${end.x} ${bottom} Z`
})

const barWidth = computed(() => {
    if (!points.value.length) return 0
    return Math.max(4, (props.width - paddingX * 2) / points.value.length - 4)
})
</script>

<template>
    <div class="relative">
        <svg :width="width" :height="height" class="overflow-visible">
            <!-- Grid lines -->
            <g v-if="showGrid" stroke="currentColor" class="text-slate-200 dark:text-slate-700" stroke-width="0.5" stroke-dasharray="2,2">
                <line v-for="i in 3" :key="i" :x1="paddingX" :y1="paddingY + ((height - paddingY * 2) / 3) * (i - 1)" :x2="width - paddingX" :y2="paddingY + ((height - paddingY * 2) / 3) * (i - 1)" />
            </g>

            <!-- Area (filled) -->
            <path v-if="type === 'area'" :d="areaPath" :fill="fillColor" />

            <!-- Bars -->
            <g v-if="type === 'bar'">
                <rect
                    v-for="(p, i) in points"
                    :key="i"
                    :x="p.x - barWidth / 2"
                    :y="p.y"
                    :width="barWidth"
                    :height="height - paddingY - p.y"
                    :fill="color"
                    :opacity="tooltipIdx === i ? 1 : 0.75"
                    rx="2"
                    @mouseenter="tooltipIdx = i"
                    @mouseleave="tooltipIdx = null"
                    class="cursor-pointer transition-opacity"
                />
            </g>

            <!-- Line (over area) -->
            <path v-if="type !== 'bar'" :d="linePath" :stroke="color" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />

            <!-- Dots -->
            <g v-if="showDots && type !== 'bar'">
                <circle
                    v-for="(p, i) in points"
                    :key="i"
                    :cx="p.x"
                    :cy="p.y"
                    :r="tooltipIdx === i ? 5 : 3"
                    :fill="tooltipIdx === i ? color : 'white'"
                    :stroke="color"
                    stroke-width="2"
                    @mouseenter="tooltipIdx = i"
                    @mouseleave="tooltipIdx = null"
                    class="cursor-pointer transition-all"
                />
            </g>

            <!-- X-axis labels -->
            <g v-if="showLabels" class="text-[9px] fill-slate-400">
                <text v-for="(p, i) in points" :key="i" :x="p.x" :y="height - 0" text-anchor="middle">{{ p.label }}</text>
            </g>
        </svg>

        <!-- Tooltip -->
        <div
            v-if="tooltipIdx !== null && points[tooltipIdx]"
            class="pointer-events-none absolute -top-8 z-10 rounded bg-slate-900 px-2 py-1 text-[10px] font-medium text-white shadow-lg dark:bg-slate-100 dark:text-slate-900"
            :style="`left: ${points[tooltipIdx].x - 20}px;`"
        >
            {{ points[tooltipIdx].label }}: <b>{{ points[tooltipIdx].value }}</b>
        </div>
    </div>
</template>
