import { Button, Card, Container, Divider, Flex, Grid, Group, Input, NavLink, Stack, Table, Title } from "@mantine/core";
import { IconCircleOff, IconGauge, IconHome2 } from "@tabler/icons-react";
import { useLocation } from "react-router-dom";

export default function DetailSettingPage() {
   const { search } = useLocation();
   const query = new URLSearchParams(search);
   const type = query.get("type");

   return (
      <Container size="xl" py="xl" w={"100%"}>
         <Grid>
            <Grid.Col span={3}>
               <Card
                  radius="md"
                  p="lg"
                  withBorder
                  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 20px rgba(0,255,200,0.08)",
                  }}
               >
                  <NavLink
                     href={`?type=profile`}
                     label="Profile"
                     leftSection={<IconHome2 size={16} stroke={1.5} />}
                     active={type === "profile" || !type}
                  />
                  <NavLink
                     href={`?type=cat-pengaduan`}
                     label="Kategori Pengaduan"
                     leftSection={<IconGauge size={16} stroke={1.5} />}
                     active={type === "cat-pengaduan"}
                  />
                  <NavLink
                     href={`?type=cat-pelayanan`}
                     label="Kategori Pelayanan Surat"
                     leftSection={<IconCircleOff size={16} stroke={1.5} />}
                     active={type === "cat-pelayanan"}
                  />
                  <NavLink
                     href={`?type=desa`}
                     label="Desa"
                     leftSection={<IconCircleOff size={16} stroke={1.5} />}
                     active={type === "desa"}
                  />
               </Card>
            </Grid.Col>
            <Grid.Col span={9}>
               <Card
                  radius="md"
                  p="lg"
                  withBorder
                  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 20px rgba(0,255,200,0.08)",
                  }}
               >
                  {type === "cat-pengaduan"
                     ? <KategoriPengaduanPage />
                     : type === "cat-pelayanan"
                        ? <KategoriPengaduanPage />
                        : type === "desa"
                           ? <KategoriPengaduanPage />
                           : <ProfilePage />}
               </Card>
            </Grid.Col>
         </Grid>
      </Container>
   );
}

function ProfilePage() {
   return (
      <Stack gap={"md"}>
         <Flex align="center" justify="space-between">
            <Title order={4} c="gray.2">
               Profile Pengguna
            </Title>
            <Button variant="light">Edit</Button>
         </Flex>
         <Divider my={0} />
         <Stack gap={"md"}>
            <Group gap="xl" grow>
               <Input.Wrapper label="Nama" description="" error="">
                  <Input value={"Amalia Dwi Yustiani"} readOnly />
               </Input.Wrapper>
               <Input.Wrapper label="Phone" description="" error="">
                  <Input value={"08123456789"} readOnly />
               </Input.Wrapper>
            </Group>
            <Group gap="xl" grow>
               <Input.Wrapper label="Email" description="" error="">
                  <Input value={"amaliadwiyustiani@gmail.com"} readOnly />
               </Input.Wrapper>
               <Input.Wrapper label="Role" description="" error="">
                  <Input value={"Admin"} readOnly />
               </Input.Wrapper>
            </Group>
         </Stack>
      </Stack>
   )
}

function KategoriPengaduanPage() {
   const elements = [
      { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
      { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
      { position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
      { position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
      { position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
   ];

   const rows = elements.map((element) => (
      <Table.Tr key={element.name}>
         <Table.Td>{element.position}</Table.Td>
         <Table.Td>{element.name}</Table.Td>
         <Table.Td>{element.symbol}</Table.Td>
         <Table.Td>{element.mass}</Table.Td>
      </Table.Tr>
   ));
   return (
      <Stack gap={"md"}>
         <Flex align="center" justify="space-between">
            <Title order={4} c="gray.2">
               Kategori Pengaduan
            </Title>
            <Button variant="light">Tambah</Button>
         </Flex>
         <Divider my={0} />
         <Stack gap={"md"}>
            <Table>
               <Table.Thead>
                  <Table.Tr>
                     <Table.Th>Tanggal</Table.Th>
                     <Table.Th>Deskripsi</Table.Th>
                     <Table.Th>Status</Table.Th>
                     <Table.Th>User</Table.Th>
                  </Table.Tr>
               </Table.Thead>
               <Table.Tbody>{rows}</Table.Tbody>
            </Table>
         </Stack>
      </Stack>
   )
}