import apiFetch from "@/lib/apiFetch";
import { Badge, Button, Card, Flex, Group, Stack, Text, Title, Tooltip } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useNavigate } from "react-router-dom";
import useSWR from "swr";

export default function DashboardLastData() {
   const navigate = useNavigate();
   const { data, mutate, isLoading } = useSWR("last-update", async () => {
      const res = await apiFetch.api.dashboard["last-update"].get();
      return res.data
   });

   useShallowEffect(() => {
      mutate();
   }, []);


   return (
      <Flex justify="flex-start" gap="md">
         <Card
            radius="lg"
            p="xl"
            withBorder
            w={"50%"}
            style={{
               background:
                  "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
               borderColor: "rgba(100,100,100,0.2)",
               boxShadow: "0 0 25px rgba(0,255,200,0.08)",
            }}
         >
            <Stack gap="sm">
               <Flex align="center" pb={"sm"} justify="space-between" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
                  <Title order={4} c="gray.0">
                     Last update pengaduan
                  </Title>
                  <Button variant="subtle" size="xs" radius="md" onClick={() => navigate(`/scr/dashboard/pengaduan/list`)}>View All</Button>
               </Flex>
               <Stack gap="sm" mt="md" align="stretch" justify="center">
                  {
                     data && Array.isArray(data.pengaduan) && data.pengaduan.length > 0 ? data.pengaduan.map((item: any, index: number) => (
                        <PengaduanSection
                           key={index}
                           id={item.id}
                           nomer={item.noPengaduan}
                           judul={item.title}
                           status={item.status}
                           updated={item.updatedAt}
                           kategori="pengaduan"
                        />
                     )) : <Text c="dimmed" ta={"center"} >Tidak ada data</Text>
                  }
               </Stack>
            </Stack>
         </Card>

         <Card
            radius="lg"
            p="xl"
            withBorder
            w={"50%"}
            style={{
               background:
                  "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
               borderColor: "rgba(100,100,100,0.2)",
               boxShadow: "0 0 25px rgba(0,255,200,0.08)",
            }}
         >
            <Stack gap="sm">
               <Flex align="center" pb={"sm"} justify="space-between" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
                  <Title order={4} c="gray.0">
                     Last update pelayanan surat
                  </Title>
                  <Button variant="subtle" size="xs" radius="md" onClick={() => navigate(`/scr/dashboard/pelayanan-surat/list-pelayanan`)}>View All</Button>
               </Flex>
               <Stack gap="sm" mt="md" align="stretch" justify="center">
                  {
                     data && Array.isArray(data.pelayanan) && data.pelayanan.length > 0 ? data.pelayanan.map((item: any, index: number) => (
                        <PengaduanSection
                           key={index}
                           id={item.id}
                           nomer={item.noPengajuan}
                           judul={item.title}
                           status={item.status}
                           updated={item.updatedAt}
                           kategori="pelayanan"
                        />
                     )) : <Text c="dimmed" ta={"center"} >Tidak ada data</Text>
                  }
               </Stack>
            </Stack>
         </Card>
      </Flex>
   );
}

function PengaduanSection({ id, nomer, judul, status, updated, kategori }: { id: string, nomer: string, judul: string, status: string, updated: string, kategori: 'pengaduan' | 'pelayanan' }) {
   const navigate = useNavigate();

   return (
      <Stack
         gap="xs"
         onClick={() => navigate(kategori == "pelayanan" ? `/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${id}` : `/scr/dashboard/pengaduan/detail?id=${id}`)}
      >
         <Flex align="center" pb={"sm"} justify="space-between" gap="md" style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
            <Flex direction={"column"}>
               <Text size="md" c="gray.2" lineClamp={1}>
                  {judul}
               </Text>
               <Group>
                  <Text size="sm" c="dimmed">
                     #{nomer} ∙ {updated}
                  </Text>
               </Group>
            </Flex>
            <Tooltip label={status}>
               <Badge size="xs" circle color={
                  status === "diterima"
                     ? "green"
                     : status === "ditolak"
                        ? "red"
                        : status === "selesai"
                           ? "blue"
                           : status === "dikerjakan"
                              ? "gray"
                              : "yellow"
               } />
            </Tooltip>
         </Flex>
      </Stack>
   )
}