import DesaSetting from "@/components/DesaSetting";
import KategoriPelayananSurat from "@/components/KategoriPelayananSurat";
import KategoriPengaduan from "@/components/KategoriPengaduan";
import ProfileUser from "@/components/ProfileUser";
import UserSetting from "@/components/UserSetting";
import {
  Button,
  Card,
  Container,
  Divider,
  Flex,
  Grid,
  NavLink,
  Stack,
  Table,
  Title,
} from "@mantine/core";
import {
  IconBuildingBank,
  IconCategory2,
  IconMailSpark,
  IconUserCog,
  IconUsersGroup,
} 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={<IconUserCog size={16} stroke={1.5} />}
              active={type === "profile" || !type}
            />
            <NavLink
              href={`?type=user`}
              label="User"
              leftSection={<IconUsersGroup size={16} stroke={1.5} />}
              active={type === "user"}
            />
            <NavLink
              href={`?type=cat-pengaduan`}
              label="Kategori Pengaduan"
              leftSection={<IconCategory2 size={16} stroke={1.5} />}
              active={type === "cat-pengaduan"}
            />
            <NavLink
              href={`?type=cat-pelayanan`}
              label="Kategori Pelayanan Surat"
              leftSection={<IconMailSpark size={16} stroke={1.5} />}
              active={type === "cat-pelayanan"}
            />
            <NavLink
              href={`?type=desa`}
              label="Desa"
              leftSection={<IconBuildingBank 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" ? (
              <KategoriPengaduan />
            ) : type === "cat-pelayanan" ? (
              <KategoriPelayananSurat />
            ) : type === "desa" ? (
              <DesaSetting />
            ) : type === "user" ? (
              <UserSetting />
            ) : (
              <ProfileUser />
            )}
          </Card>
        </Grid.Col>
      </Grid>
    </Container>
  );
}