'use client'
import colors from "@/con/colors";
import { ActionIcon, Box, Button, Container, Divider, Flex, Group, Image, List, ListItem, Modal, Paper, SimpleGrid, Stack, Stepper, StepperCompleted, StepperStep, Text, TextInput } from "@mantine/core";
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp, IconSearch } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import BackButton from "./_com/BackButto";
import { useDisclosure } from "@mantine/hooks";

const data = [
    {
        id: 1,
        name: "Surat Keterangan Domisili Organisasi",
        link: "/darmasaba/desa/layanan/domisili"
    },
    {
        id: 2,
        name: "Surat Keterangan Penghasilan",
        link: "/darmasaba/desa/layanan/penghasilan"
    },
    {
        id: 3,
        name: "Surat Keterangan Tidak Mampu",
        link: "/darmasaba/desa/layanan/tidakmampu"
    },
    {
        id: 4,
        name: "Surat Keterangan Kelahiran",
        link: "/darmasaba/desa/layanan/kelahiran"
    },
    {
        id: 5,
        name: "Surat Keterangan Usaha",
        link: "/darmasaba/desa/layanan/usaha"
    },
    {
        id: 6,
        name: "Surat Keterangan Kematian",
        link: "/darmasaba/desa/layanan/kematian"
    },
    {
        id: 7,
        name: "Surat Keterangan Tempat Usaha",
        link: "/darmasaba/desa/layanan/tempatusaha"
    },
    {
        id: 8,
        name: "Surat Keterangan Belum Kawin",
        link: "/darmasaba/desa/layanan/belumkawin"
    },
    {
        id: 9,
        name: "Surat Keterangan Kelakuan Baik",
        link: "/darmasaba/desa/layanan/skck"
    },
    {
        id: 10,
        name: "Surat Keterangan Beda Biodata Diri",
        link: "/darmasaba/desa/layanan/biodata"
    },
    {
        id: 11,
        name: "Surat Keterangan Yatim Piatu",
        link: "/darmasaba/desa/layanan/yatim"
    }

]
export default function Page() {
    const [opened, { open, close }] = useDisclosure(false);
    const router = useRouter()
    const [active, setActive] = useState(1);
    const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
    const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
    return (
        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"}>
            <Container w={{ base: "100%", md: "50%" }} >
                <BackButton />
                <Stack align="center" gap={0}>
                    {/* Bagian Layanan */}
                    <Text fz={"3.4rem"} fw={"bold"}>
                        Layanan Desa Darmasaba
                    </Text>
                    <Text
                    >
                        Informasi dan Pelayanan Administrasi Digital
                    </Text>
                    <TextInput
                        py={20}
                        w={{ base: "70%", md: "50%" }}
                        placeholder="Cari Layanan"
                        leftSection={<IconSearch size={20} />}

                    />
                </Stack>
                {/* Bagian Pelayanan Surat Keterangan */}
                <Box py={10}>
                    <Text fz={"h4"} fw={"bold"}>Pelayanan Surat Keterangan</Text>
                </Box>
                <SimpleGrid
                    py={20}
                    cols={{
                        base: 1,
                        sm: 1
                    }}
                >
                    {data.map((v, k) => {
                        return (
                            <Paper
                                key={k}

                                radius={16}
                                pos={"relative"}
                            >
                                <Stack gap={0} p={"lg"} pos={"relative"}>
                                    <Flex justify={"space-between"} align={"center"} px={10}>
                                        <Box>
                                            <Flex p={"lg"} align={"center"} gap={"lg"}>
                                                <Paper p={10} bg={colors.Bg} radius={"100%"}>
                                                    <Image src="/api/img/icondocument.png" alt="" w={30} h={30} />
                                                </Paper>
                                                <Text size={"1.5rem"}>{v.name}</Text>
                                            </Flex>
                                        </Box>
                                        <ActionIcon size={"lg"} variant="transparent" onClick={open}>
                                            <Image src="/api/img/arrowicon.png" alt="" w={30} h={30} />
                                        </ActionIcon>
                                    </Flex>
                                    {/* <Group justify="center">
                                        <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
                                            onClick={() => router.push(v.link)}>
                                            Detail
                                        </Button>
                                    </Group> */}
                                </Stack>
                            </Paper>
                        )
                    })}
                <Modal opened={opened} onClose={close} size={"xl"} title="Persyaratan">
                    <Text fz={"sm"}>Test</Text>
                </Modal>
                </SimpleGrid>
                {/* Bagian Pelayanan Perizinan Berusaha */}
                <Box py={15}>
                    <Text fz={"h4"} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
                </Box>
                <Text py={10} ta={"justify"} fz={"sm"}>Penyelenggaraan Perizinan Berusaha Berbasis Risiko melalui Sistem Online Single Submission (OSS)
                    merupakan pelaksanaan Undang-Undang Nomor 11 Tahun 2020 Tentang Cipta Kerja. OSS Berbasis Risiko wajib digunakan oleh Pelaku Usaha,
                    Kementerian/Lembaga, Pemerintah Daerah, Administrator Kawasan Ekonomi Khusus (KEK), dan Badan Pengusahaan Kawasan Perdagangan Bebas
                    Pelabuhan Bebas (KPBPB).Berdasarkan Peraturan Pemerintah Nomor 5 Tahun 2021 terdapat 1.702 kegiatan usaha yang terdiri atas 1.349
                    Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang sudah diimplementasikan dalam Sistem OSS Berbasis Risiko.</Text>
                <Text py={10} fz={"sm"}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
                <Box p={"xl"} w={{ base: "100%", md: "100%" }} >
                    <Stepper active={active} onStepClick={setActive} orientation="vertical"
                        styles={{
                            separator: {
                                marginLeft: 25
                            },

                            step: {
                                padding: '12px 0'
                            }
                        }}>
                        <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
                            Pendaftaran akun pada portal OSS
                        </StepperStep>
                        <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
                            Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
                        </StepperStep>
                        <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI ">
                            Memilih KBLI dengan jenis usaha yang akan didaftarkan
                        </StepperStep>
                        <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
                            Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
                        </StepperStep>
                        <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
                            Proses verifikasi dan persetujuan oleh instansi terkait
                        </StepperStep>
                        <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
                            Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
                        </StepperStep>
                        <StepperCompleted>
                            Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
                        </StepperCompleted>
                    </Stepper>

                    <Group justify="center" mt="xl">
                        <Button variant="default" onClick={prevStep}>Back</Button>
                        <Button onClick={nextStep}>Next step</Button>
                    </Group>
                    <Text py={35} ta={"justify"} fz={"sm"}>Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
                        seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
                        resmi OSS <a href={"https://oss.go.id/"}>(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
                </Box>
                {/* Bagian Pelayanan Telunjuk Sakti Desa */}
                <Box py={15}>
                    <Text fz={"h4"} fw={"bold"}>Pelayanan Telunjuk Sakti Desa</Text>
                </Box>
                <Text fz={"sm"} py={10}>Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. layanan telunjuk sakti Desa meliputi :</Text>
                <List type="ordered" pb={20}>
                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kelahiran (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KELAHIRAN_(dengan%20contoh%20Formulir).pdf">Akta Kelahiran</a>)</ListItem>
                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Perkawinan (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20PERKAWINAN_(dengan%20contoh%20Formulir).pdf">Akta Perkawinan</a>)</ListItem>
                    <ListItem fz={"sm"}>Telunjuk Sakti Desa Akta Kematian (Petunjuk Pengajuan pada link berikut : Download <a href="https://darmasaba.desa.id/storage/files/PERSYARATAN%20DAN%20ALUR%20PENGAJUAN%20AKTA%20KEMATIAN_(dengan%20contoh%20Formulir).pdf">Akata Kematian</a>)</ListItem>
                </List>
                {/* Bagian Pelayanan Telunjuk Sakti Desa */}
                <Box py={15}>
                    <Text fz={"h4"} fw={"bold"}>Pelayanan Penduduk Non-Permanent</Text>
                </Box>
                <Text pb={20} fz={"sm"} ta={"justify"}>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</Text>
                <Divider />
                <Flex justify={"space-between"} py={20}>
                    <Text fz={"sm"}>25 May 2021 . Darmasaba</Text>
                    <Box>
                        <Flex gap={"lg"}>
                            <ActionIcon variant='transparent'>
                                <IconBrandFacebook color={"gray"} size={"30"} />
                            </ActionIcon>
                            <ActionIcon variant='transparent'>
                                <IconBrandInstagram color={"gray"} size={"30"} />
                            </ActionIcon>
                            <ActionIcon variant='transparent'>
                                <IconBrandTwitter color={"gray"} size={"30"} />
                            </ActionIcon>
                            <ActionIcon variant='transparent'>
                                <IconBrandWhatsapp color={"gray"} size={"30"} />
                            </ActionIcon>
                        </Flex>
                    </Box>
                </Flex>
                <Divider pb={50} />
            </Container>
        </Stack>
    )
}
function ModalDetail() {

}