/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import colors from '@/con/colors';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { IconChartBar, IconUsers } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';

function LayoutTabsIKM({ children }: { children: React.ReactNode }) {
    const router = useRouter()
    const pathname = usePathname()
    const tabs = [
        {
            label: "Grafik Kepuasan Masyarakat",
            description: "Lihat dan kelola Grafik Kepuasan Masyarakat",
            value: "grafikkepuasannamasyarakat",
            href: "/admin/ppid/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat",
            icon: <IconChartBar size={18} stroke={1.8} />
        },
        {
            label: "Responden",
            description: "Kelola dan tinjau data responden",
            value: "responden",
            href: "/admin/ppid/indeks-kepuasan-masyarakat/responden",
            icon: <IconUsers size={18} stroke={1.8} />
        },
    ];
    const curentTab = tabs.find(tab => tab.href === pathname)
    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);

    const handleTabChange = (value: string | null) => {
        const tab = tabs.find(t => t.value === value)
        if (tab) {
            router.push(tab.href)
        }
        setActiveTab(value)
    }

    useEffect(() => {
        const match = tabs.find(tab => tab.href === pathname)
        if (match) {
            setActiveTab(match.value)
        }
    }, [pathname])

    return (
        <Stack gap="lg">
            <Title order={2} style={{ fontWeight: 700, color: "#1a1a1a" }}>
                Indeks Kepuasan Masyarakat
            </Title>
            <Tabs
                color={colors["blue-button"]}
                variant="pills"
                value={activeTab}
                onChange={handleTabChange}
                radius="lg"
                keepMounted={false}
            >
                <ScrollArea type="auto" offsetScrollbars>
                    <TabsList
                        p="sm"
                        style={{
                            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
                            borderRadius: "1rem",
                            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
                            display: "flex",
                            flexWrap: "nowrap",
                            gap: "0.5rem",
                            paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
                        }}
                    >
                        {tabs.map((e, i) => (
                            <Tooltip
                                key={i}
                                label={e.description}
                                withArrow
                                position="bottom"
                                transitionProps={{ transition: 'pop', duration: 200 }}
                            >
                                <TabsTab
                                    value={e.value}
                                    leftSection={e.icon}
                                    style={{
                                        fontWeight: 500,
                                        fontSize: "0.9rem",
                                        transition: "all 0.2s ease",
                                    }}
                                >
                                    {e.label}
                                </TabsTab>
                            </Tooltip>
                        ))}
                    </TabsList>
                </ScrollArea>
                {tabs.map((e, i) => (
                    <TabsPanel key={i} value={e.value} mt="md">
                        {/* Konten dummy, bisa diganti tergantung routing */}
                        <></>
                    </TabsPanel>
                ))}
            </Tabs>
            {children}
        </Stack>
    );
}

export default LayoutTabsIKM;