import apiFetch from "@/lib/apiFetch";
import {
  Anchor,
  Badge,
  Button,
  Card,
  Container,
  Divider,
  Flex,
  Grid,
  Group,
  Image,
  Modal,
  Stack,
  Table,
  Text,
  Textarea,
  Title,
} from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import {
  IconAlignJustified,
  IconCategory,
  IconFileCertificate,
  IconInfoTriangle,
  IconMapPin,
  IconMessageReport,
  IconPhotoScan,
  IconUser,
} from "@tabler/icons-react";
import { useState } from "react";
import { useLocation } from "react-router-dom";
import useSwr from "swr";

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

  return (
    <Container size="xl" py="xl" w={"100%"}>
      <Grid>
        <Grid.Col span={8}>
          <Stack gap={"xl"}>
            <DetailDataPengaduan />
            <DetailDataHistori />
          </Stack>
        </Grid.Col>
        <Grid.Col span={4}>
          <DetailUserPengaduan />
        </Grid.Col>
      </Grid>
    </Container>
  );
}

function DetailDataPengaduan() {
  const [opened, { open, close }] = useDisclosure(false);
  const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
  const [imageSrc, setImageSrc] = useState<string | null>(null);
  const [openedModalImage, { open: openModalImage, close: closeModalImage }] =
    useDisclosure(false);

  async function handleLihatGambar() {
    const res = await apiFetch.api.pengaduan.image.get({
      query: {
        fileName: "57d5ce89-7d18-4244-9f4c-ca21b70adb7e",
      },
    });
    console.error("client", res);
    // const blob = await res.data?.blob();
    // setImageSrc(URL.createObjectURL(blob!));
    // openModalImage();
  }

  return (
    <>
      <Modal
        opened={opened}
        onClose={close}
        title={"Konfirmasi"}
        centered
        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
      >
        <Stack gap="sm">
          {catModal === "tolak" ? (
            <>
              <Text>
                Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
              </Text>

              <Textarea size="md" minRows={5} />
              <Group justify="center" grow>
                <Button variant="light" onClick={close}>
                  Batal
                </Button>
                <Button variant="filled" color="red" onClick={close}>
                  Tolak
                </Button>
              </Group>
            </>
          ) : (
            <>
              <Text>Anda yakin ingin menerima pengaduan ini?</Text>
              <Group justify="center" grow>
                <Button variant="light" onClick={close}>
                  Batal
                </Button>
                <Button variant="filled" color="green" onClick={close}>
                  Terima
                </Button>
              </Group>
            </>
          )}
        </Stack>
      </Modal>

      <Modal
        opened={openedModalImage}
        onClose={closeModalImage}
        title="Gambar Pengaduan"
        centered
        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
      >
        <Image src={imageSrc!} />
      </Modal>

      <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)",
        }}
      >
        <Stack gap={"md"}>
          <Flex align="center" justify="space-between">
            <Group gap="xs">
              <Title order={4} c="gray.2">
                Pengaduan
              </Title>
              <Title order={4} c="dimmed">
                #PGf-2345-33
              </Title>
            </Group>
            <Badge
              size="xl"
              variant="light"
              radius="sm"
              color={"yellow"}
              style={{ textTransform: "none" }}
            >
              antrian
            </Badge>
          </Flex>
          <Divider my={0} />
          <Grid>
            <Grid.Col span={6}>
              <Stack gap="md">
                <Flex direction={"column"} justify="flex-start">
                  <Group gap="xs">
                    <IconAlignJustified size={20} />
                    <Text size="md">Judul</Text>
                  </Group>
                  <Text size="md" c={"white"}>
                    Judul Pengaduan
                  </Text>
                </Flex>
                <Flex direction={"column"} justify="flex-start">
                  <Group gap="xs">
                    <IconMapPin size={20} />
                    <Text size="md">Lokasi</Text>
                  </Group>
                  <Text size="md" c="white">
                    fwef
                  </Text>
                </Flex>
              </Stack>
            </Grid.Col>
            <Grid.Col span={6}>
              <Stack gap="md">
                <Flex direction={"column"} justify="flex-start">
                  <Group gap="xs">
                    <IconCategory size={20} />
                    <Text size="md">Kategori</Text>
                  </Group>
                  <Text size="md" c="white">
                    fwef
                  </Text>
                </Flex>
                <Flex direction={"column"} justify="flex-start">
                  <Group gap="xs">
                    <IconPhotoScan size={20} />
                    <Text size="md">Gambar</Text>
                  </Group>
                  <Anchor href="#" onClick={handleLihatGambar}>
                    Lihat Gambar
                  </Anchor>
                </Flex>
              </Stack>
            </Grid.Col>
            <Grid.Col span={12}>
              <Stack gap="md">
                <Flex direction={"column"} justify="flex-start">
                  <Group gap="xs">
                    <IconAlignJustified size={20} />
                    <Text size="md">Detail</Text>
                  </Group>
                  <Text size="md" c="white">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Illum, corporis iusto. Suscipit veritatis quas, non nobis
                    fuga, laudantium accusantium tempora sint aliquid architecto
                    totam esse eum excepturi nostrum fugiat ut.
                  </Text>
                </Flex>
                <Flex direction={"column"} justify="flex-start">
                  <Group gap="xs">
                    <IconInfoTriangle size={20} />
                    <Text size="md">Keterangan</Text>
                  </Group>
                  <Text size="md" c={"white"}>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. At
                    fugiat eligendi nesciunt dolore? Maiores a cumque vitae
                    suscipit incidunt quos beatae modi, vel, id ullam quae
                    voluptas, deserunt quas placeat.
                  </Text>
                </Flex>
              </Stack>
            </Grid.Col>
            <Grid.Col span={12}>
              <Group justify="center" grow>
                <Button
                  variant="light"
                  onClick={() => {
                    setCatModal("tolak");
                    open();
                  }}
                >
                  Tolak
                </Button>
                <Button
                  variant="filled"
                  onClick={() => {
                    setCatModal("terima");
                    open();
                  }}
                >
                  Terima
                </Button>
              </Group>
            </Grid.Col>
          </Grid>
        </Stack>
      </Card>
    </>
  );
}

function DetailDataHistori() {
  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 (
    <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)",
      }}
    >
      <Stack gap="md">
        <Flex align="center" justify="space-between">
          <Title order={4} c="gray.2">
            Histori Pengaduan
          </Title>
        </Flex>
        <Divider my={0} />
        <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>
    </Card>
  );
}

function DetailUserPengaduan() {
  const [page, setPage] = useState(1);
  const [value, setValue] = useState("");
  const { data, mutate, isLoading } = useSwr("/", () =>
    apiFetch.api.pengaduan.list.get({
      query: {
        status,
        search: value,
        take: "",
        page: "",
      },
    }),
  );

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

  const list = data?.data || [];

  return (
    <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)",
      }}
    >
      <Stack gap="md">
        <Flex align="center" justify="space-between">
          <Flex direction={"column"}>
            <Title order={4} c="gray.2">
              Warga
            </Title>
          </Flex>
        </Flex>
        <Divider my={0} />
        <Stack gap="md">
          <Group justify="space-between">
            <Group gap="xs">
              <IconUser size={20} />
              <Text size="md">Nama</Text>
            </Group>
            <Text size="md" c={"white"}>
              Amalia Dwi Yustiani
            </Text>
          </Group>
          <Group justify="space-between">
            <Group gap="xs">
              <IconMapPin size={20} />
              <Text size="md">Telepon</Text>
            </Group>
            <Text size="md" c="white">
              08123456789
            </Text>
          </Group>
          <Group justify="space-between">
            <Group gap="xs">
              <IconMessageReport size={20} />
              <Text size="md">Jumlah Pengaduan</Text>
            </Group>
            <Text size="md" c="white">
              10
            </Text>
          </Group>
          <Group justify="space-between">
            <Group gap="xs">
              <IconFileCertificate size={20} />
              <Text size="md">Jumlah Pelayanan Surat</Text>
            </Group>
            <Text size="md" c="white">
              10
            </Text>
          </Group>
        </Stack>
      </Stack>
    </Card>
  );
}