/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
import { Box, Button, Paper, Skeleton, Stack, Text, ThemeIcon } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import {
  IconArrowLeft, IconChartLine, IconChristmasTreeFilled, IconClipboard,
  IconHomeEco, IconLeaf, IconRecycle, IconScale,
  IconShieldFilled, IconTent, IconTrash,
  IconTrendingUp, IconTrophy, IconTruck
} from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import React from 'react';
import { useProxy } from 'valtio/utils';

function Page() {
  const stateProgramPenghijauan = useProxy(programPenghijauanState);
  const router = useRouter();
  const params = useParams();

  const iconMap: Record<string, React.FC<any>> = {
    ekowisata: IconLeaf,
    kompetisi: IconTrophy,
    wisata: IconTent,
    ekonomi: IconChartLine,
    sampah: IconRecycle,
    truck: IconTruck,
    scale: IconScale,
    clipboard: IconClipboard,
    trash: IconTrash,
    lingkunganSehat: IconHomeEco,
    sumberOksigen: IconChristmasTreeFilled,
    ekonomiBerkelanjutan: IconTrendingUp,
    mencegahBencana: IconShieldFilled,
  };

  useShallowEffect(() => {
    stateProgramPenghijauan.findUnique.load(params?.id as string);
  }, [params?.id]);

  if (!stateProgramPenghijauan.findUnique.data) {
    return (
      <Stack py="xl" align="center">
        <Skeleton height={300} radius="lg" w="100%" />
        <Text c="dimmed" fz="sm">Sedang memuat detail program...</Text>
      </Stack>
    );
  }

  const data = stateProgramPenghijauan.findUnique.data;
  const IconComponent = data?.icon ? iconMap[data.icon] : null;

  return (
    <Box py="md" px={{  base: 'md', md: 100  }}>
      <Button
        variant="light"
        color="blue"
        onClick={() => router.back()}
        leftSection={<IconArrowLeft size={20} />}
        mb="lg"
        radius="xl"
      >
        Kembali ke daftar
      </Button>

      <Paper
        w={{ base: '100%', md: '75%' }}
        mx="auto"
        p="xl"
        radius="xl"
        shadow="md"
        withBorder
      >
        <Stack gap="md" align="center" ta="center">
          {IconComponent && (
            <ThemeIcon
              size={72}
              radius="xl"
              variant="light"
              color="blue"
              mb="sm"
              style={{ boxShadow: '0 0 15px rgba(0, 123, 255, 0.3)' }}
            >
              <IconComponent size={40} />
            </ThemeIcon>
          )}

          <Text fz="xl" fw={700} c="blue">
            {data?.name || 'Nama program tidak tersedia'}
          </Text>

          <Text fz="lg" fw={600}>
            {data?.judul || 'Judul belum tersedia'}
          </Text>

          <Box w="100%" mt="sm">
            {data?.deskripsi ? (
              <Text
                fz="md"
                lh={1.7}
                ta="justify"
                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
                style={{wordBreak: "break-word", whiteSpace: "normal"}}
              />
            ) : (
              <Text c="dimmed" fz="sm" ta="center">
                Tidak ada deskripsi yang tersedia untuk program ini.
              </Text>
            )}
          </Box>
        </Stack>
      </Paper>
    </Box>
  );
}

export default Page;