'use client'
import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
import colors from '@/con/colors';
import { Box, Button, Center, Divider, Grid, GridCol, Group, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';

function Page() {
  const router = useRouter();
  const allList = useProxy(profileLandingPageState.pejabatDesa);

  useShallowEffect(() => {
    allList.findUnique.load("edit");
  }, []);

  if (!allList.findUnique.data) {
    return (
      <Stack align="center" justify="center" py="xl">
        <Skeleton radius="md" height={800} />
      </Stack>
    );
  }

  const dataArray = Array.isArray(allList.findUnique.data)
    ? allList.findUnique.data
    : [allList.findUnique.data];

  return (
    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
      <Stack gap="md">
        <Group justify="space-between">
          <Title order={3} c={colors['blue-button']}>Preview Pejabat Desa</Title>
          <Button
            style={{ fontSize: 15, fontWeight: "bold" }}
            c="green"
            variant="light"
            radius="md"
            onClick={() => router.push(`/admin/landing-page/profil/pejabat-desa/${allList.findUnique.data?.id}`)}
          >
            Edit
          </Button>
        </Group>
        {dataArray.map((item) => (
          <Paper key={item.id} p="xl" bg={'white'} withBorder radius="md" shadow="xs">
            <Box px={{ base: "sm", md: 100 }}>
              <Grid>
                <GridCol span={12}>
                  <Center>
                    <Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" loading="lazy" />
                  </Center>
                </GridCol>
                <GridCol span={12}>
                  <Text ta="center" fz={{ base: "1.2rem", md: "1.8rem" }} fw="bold" c={colors['blue-button']}>
                    Profil Pimpinan Badan Publik Desa Darmasaba
                  </Text>
                </GridCol>
              </Grid>
            </Box>
            <Divider my="md" color={colors['blue-button']} />
            <Box px={{ base: 0, md: 50 }} pb="xl">
              <Paper withBorder bg={"#fff"} radius="md" shadow="xs" p="lg">
                <Stack gap={0}>
                  <Center>
                    <Image
                      pt={{ base: 0, md: 60 }}
                      src={item.image?.link || "/perbekel.png"}
                      w={{ base: 150, md: 350 }}
                      alt="Foto Profil Pejabat"
                      radius="md"
                      onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
                      loading='lazy'
                    />
                  </Center>
                  <Paper
                    bg={colors['blue-button']}
                    py="md"
                    px="sm"
                    radius="md"
                    className="glass3"
                    style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
                  >
                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1rem", md: "1.6rem" }}>
                      {item.name}
                    </Text>
                  </Paper>
                </Stack>
              </Paper>
              <Box mt="lg">
                <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Jabatan</Text>
                <Text fz={{ base: "1rem", md: "1.4rem" }} ta="left" c={colors['blue-button']}>
                  {item.position}
                </Text>
              </Box>
            </Box>
          </Paper>
        ))}
      </Stack>
    </Paper>
  );
}

export default Page;
