"use client";

import { useParams, useRouter } from "next/navigation";
import { useEffect, useMemo } from "react";
import useSWR from "swr";
import { Check, Download, Eye, Printer, X } from "lucide-react";
import { toast } from "sonner";
import { apiSend, fetcher } from "@/lib/api";
import { cetakHtml } from "@/lib/cetak";
import { unduhCsv } from "@/lib/sekretariat";
import { SimpleCrud, type CrudColumn, type CrudField, type CrudRow } from "@/components/admin/simple-crud";
import { SettingsForm, type SettingField } from "@/components/admin/settings-form";
import { StatCard } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const KATEGORI_FIELDS: CrudField[] = [
  { name: "nama", label: "Nama Kategori", required: true, full: true },
  { name: "slug", label: "Link", required: true, help: "Huruf kecil, tanpa spasi.", full: true },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const WIDGET_FIELDS: CrudField[] = [
  { name: "judul", label: "Judul", required: true },
  {
    name: "jenis",
    label: "Jenis",
    type: "select",
    options: [
      { value: "Teks", label: "Teks" },
      { value: "HTML", label: "HTML" },
      { value: "Menu", label: "Menu" },
      { value: "Statistik", label: "Statistik" },
    ],
    defaultValue: "Teks",
  },
  { name: "konten", label: "Konten", type: "textarea" },
  { name: "urut", label: "Urutan", type: "number", defaultValue: "0" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const WIDGET_COLUMNS: CrudColumn[] = [
  { name: "judul", label: "Judul" },
  { name: "jenis", label: "Jenis" },
  { name: "urut", label: "Urutan" },
  { name: "aktif", label: "Aktif" },
];

const SINERGI_FIELDS: CrudField[] = [
  { name: "nama", label: "Judul", required: true, full: true },
  { name: "gambar", label: "Gambar", help: "URL gambar program." },
  { name: "url", label: "URL", type: "url" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const SINERGI_COLUMNS: CrudColumn[] = [
  { name: "nama", label: "Judul" },
  {
    name: "gambar",
    label: "Gambar",
    render: (row) =>
      row.gambar ? (
        <img
          src={String(row.gambar)}
          alt={String(row.nama ?? "")}
          className="h-10 w-16 rounded-md object-cover"
          onError={(event) => {
            event.currentTarget.style.display = "none";
          }}
        />
      ) : (
        "-"
      ),
  },
  { name: "url", label: "URL", hideOnMobile: true },
  { name: "aktif", label: "Status" },
];

const SINERGI_PENGATURAN: SettingField[] = [
  {
    kunci: "adminweb.sinergi_per_baris",
    label: "Jumlah Gambar Sinergi Program Dalam 1 Baris",
    type: "number",
    defaultValue: "4",
    help: "Jumlah logo program yang ditampilkan pada satu baris slider sinergi.",
  },
];

const SLIDER_PENGATURAN: SettingField[] = [
  {
    kunci: "adminweb.slider_sumber",
    label: "Sumber Gambar Slider",
    type: "select",
    defaultValue: "ARTIKEL",
    options: [
      { value: "ARTIKEL", label: "Artikel Terbaru" },
      { value: "ARTIKEL_PILIHAN", label: "Artikel Terbaru Pilihan" },
      { value: "GALERI", label: "Album Galeri" },
    ],
    help: "10 gambar utama artikel terbaru, atau gambar dalam album galeri, dipakai sebagai slider besar beranda.",
  },
  {
    kunci: "adminweb.slider_jumlah",
    label: "Jumlah Gambar Slider",
    type: "number",
    defaultValue: "5",
    help: "Jumlah gambar slider yang ditampilkan.",
  },
];

const MENU_FIELDS: CrudField[] = [
  { name: "judul", label: "Judul", required: true },
  { name: "url", label: "URL", required: true },
  { name: "parentId", label: "ID Induk", type: "number", help: "Kosongkan untuk menu utama." },
  { name: "urut", label: "Urutan", type: "number", defaultValue: "0" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const MENU_COLUMNS: CrudColumn[] = [
  { name: "judul", label: "Judul" },
  { name: "url", label: "URL" },
  { name: "parentId", label: "Induk" },
  { name: "urut", label: "Urutan" },
  { name: "aktif", label: "Aktif" },
];

const KOMENTAR_FIELDS: CrudField[] = [
  { name: "nama", label: "Nama", required: true },
  { name: "email", label: "Email", type: "email" },
  { name: "telepon", label: "No. HP Pengirim" },
  { name: "isi", label: "Komentar", type: "textarea", required: true },
  { name: "artikelId", label: "ID Artikel", type: "number" },
  {
    name: "status",
    label: "Status",
    type: "select",
    options: [
      { value: "MENUNGGU", label: "Menunggu" },
      { value: "DISETUJUI", label: "Disetujui" },
      { value: "DITOLAK", label: "Ditolak" },
    ],
    defaultValue: "MENUNGGU",
  },
];

const KOMENTAR_COLUMNS: CrudColumn[] = [
  { name: "nama", label: "Pengirim" },
  { name: "isi", label: "Isi Komentar" },
  { name: "telepon", label: "No. HP Pengirim" },
  { name: "email", label: "Email Pengirim" },
  { name: "artikel", label: "Judul Artikel", render: (row) => (row.artikel as { judul?: string } | null)?.judul ?? "-" },
  { name: "status", label: "Status", render: (row) => <Badge variant={row.status === "DISETUJUI" ? "success" : row.status === "DITOLAK" ? "danger" : "warning"}>{String(row.status)}</Badge> },
  { name: "waktu", label: "Dimuat Pada", render: (row) => String(row.waktu ?? "").slice(0, 16).replace("T", " ") },
];

const GALERI_FIELDS: CrudField[] = [
  { name: "nama", label: "Nama Album", required: true, full: true },
  { name: "gambar", label: "Gambar", help: "URL gambar sampul album." },
  { name: "deskripsi", label: "Deskripsi", type: "textarea" },
  { name: "urut", label: "Urutan", type: "number", defaultValue: "0" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const GALERI_COLUMNS: CrudColumn[] = [
  {
    name: "gambar",
    label: "Gambar",
    render: (row) =>
      row.gambar ? (
        <img
          src={String(row.gambar)}
          alt={String(row.nama ?? "")}
          className="h-10 w-16 rounded-md object-cover"
          onError={(event) => {
            event.currentTarget.style.display = "none";
          }}
        />
      ) : (
        "-"
      ),
  },
  { name: "nama", label: "Nama Album" },
  { name: "deskripsi", label: "Deskripsi", hideOnMobile: true },
  {
    name: "dimuatPada",
    label: "Dimuat Pada",
    render: (row) => String(row.dimuatPada ?? "").slice(0, 10),
  },
  { name: "aktif", label: "Status" },
];

const SOSIAL_FIELDS: CrudField[] = [
  { name: "nama", label: "Platform", required: true },
  { name: "url", label: "URL", type: "url" },
  { name: "ikon", label: "Ikon", placeholder: "facebook, instagram, youtube…" },
  { name: "urut", label: "Urutan", type: "number", defaultValue: "0" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const SOSIAL_COLUMNS: CrudColumn[] = [
  { name: "nama", label: "Platform" },
  { name: "url", label: "URL" },
  { name: "urut", label: "Urutan" },
  { name: "aktif", label: "Aktif" },
];

const SLIDER_FIELDS: CrudField[] = [
  { name: "judul", label: "Judul", required: true, full: true },
  { name: "gambar", label: "Gambar", help: "URL gambar slider." },
  { name: "url", label: "URL Tujuan" },
  { name: "urut", label: "Urutan", type: "number", defaultValue: "0" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const SLIDER_COLUMNS: CrudColumn[] = [
  { name: "judul", label: "Judul" },
  { name: "gambar", label: "Gambar" },
  { name: "urut", label: "Urutan" },
  { name: "aktif", label: "Aktif" },
];

const TEKS_FIELDS: CrudField[] = [
  { name: "teks", label: "Teks Berjalan", type: "textarea", required: true },
  { name: "tautan", label: "Tautan", help: "Tautan tujuan saat teks diklik." },
  { name: "urut", label: "Urutan", type: "number", defaultValue: "0" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const TEKS_COLUMNS: CrudColumn[] = [
  { name: "teks", label: "Isi Teks Berjalan" },
  { name: "tautan", label: "Tautan" },
  { name: "aktif", label: "Status" },
];

const PENGUNJUNG_FIELDS: CrudField[] = [
  { name: "tanggal", label: "Tanggal", type: "date", required: true },
  { name: "jumlah", label: "Jumlah Pengunjung", type: "number", required: true },
];

const PENGUNJUNG_COLUMNS: CrudColumn[] = [
  { name: "tanggal", label: "Tanggal", render: (row) => String(row.tanggal ?? "").slice(0, 10) },
  { name: "jumlah", label: "Jumlah Pengunjung (Orang)" },
];

type PengunjungRow = { id: number; tanggal: string; jumlah: number };

function RekapPengunjung() {
  const { data } = useSWR<PengunjungRow[]>("/master/pengunjung-harian?limit=1000", fetcher);
  const rows = data ?? [];

  const rekap = useMemo(() => {
    const hariIni = new Date();
    hariIni.setHours(0, 0, 0, 0);
    const kemarin = new Date(hariIni);
    kemarin.setDate(hariIni.getDate() - 1);
    const awalMinggu = new Date(hariIni);
    awalMinggu.setDate(hariIni.getDate() - ((hariIni.getDay() + 6) % 7));
    const awalBulan = new Date(hariIni.getFullYear(), hariIni.getMonth(), 1);
    const awalTahun = new Date(hariIni.getFullYear(), 0, 1);

    const jumlah = (ambil: (tgl: Date) => boolean) =>
      rows.reduce((total, row) => {
        const tgl = new Date(`${String(row.tanggal).slice(0, 10)}T00:00:00`);
        return ambil(tgl) ? total + (row.jumlah ?? 0) : total;
      }, 0);

    const perTahun = new Map<string, number>();
    for (const row of rows) {
      const tahun = String(row.tanggal).slice(0, 4);
      perTahun.set(tahun, (perTahun.get(tahun) ?? 0) + (row.jumlah ?? 0));
    }
    const daftarTahun = [...perTahun.entries()].sort((a, b) => b[0].localeCompare(a[0]));

    return {
      hariIni: jumlah((tgl) => tgl.getTime() === hariIni.getTime()),
      kemarin: jumlah((tgl) => tgl.getTime() === kemarin.getTime()),
      minggu: jumlah((tgl) => tgl >= awalMinggu && tgl <= hariIni),
      bulan: jumlah((tgl) => tgl >= awalBulan && tgl <= hariIni),
      tahun: jumlah((tgl) => tgl >= awalTahun && tgl <= hariIni),
      daftarTahun,
      total: daftarTahun.reduce((total, [, nilai]) => total + nilai, 0),
    };
  }, [rows]);

  function cetak() {
    const baris = rekap.daftarTahun
      .map(
        ([tahun, nilai], index) =>
          `<tr><td>${index + 1}</td><td>${tahun}</td><td>${nilai}</td></tr>`,
      )
      .join("");
    const isi = `<table border="1" cellspacing="0" cellpadding="6" width="100%"><thead><tr><th>No</th><th>Tahun</th><th>Pengunjung (Orang)</th></tr></thead><tbody>${baris}<tr><td colspan="2">Total</td><td>${rekap.total}</td></tr></tbody></table>`;
    if (!cetakHtml("Statistik Pengunjung Website Setiap Tahun", isi)) {
      toast.error("Izinkan pop-up untuk mencetak");
    }
  }

  function unduh() {
    unduhCsv(
      `pengunjung-per-tahun-${new Date().toISOString().slice(0, 10)}.csv`,
      ["No", "Tahun", "Pengunjung (Orang)"],
      rekap.daftarTahun.map(([tahun, nilai], index) => [index + 1, tahun, nilai]),
    );
    toast.success("Rekap pengunjung diunduh");
  }

  return (
    <Card>
      <CardContent className="space-y-4 p-4 md:p-5">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <div>
            <h2 className="text-sm font-semibold">Statistik Pengunjung Website Setiap Tahun</h2>
            <p className="text-xs text-muted-foreground">Dihitung dari data pengunjung harian.</p>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" size="sm" onClick={cetak}>
              <Printer className="h-4 w-4" /> Cetak
            </Button>
            <Button variant="outline" size="sm" onClick={unduh}>
              <Download className="h-4 w-4" /> Unduh
            </Button>
          </div>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
          <StatCard title="Hari Ini" value={rekap.hariIni} icon={Eye} />
          <StatCard title="Kemarin" value={rekap.kemarin} icon={Eye} tone="sky" />
          <StatCard title="Minggu Ini" value={rekap.minggu} icon={Eye} tone="amber" />
          <StatCard title="Bulan Ini" value={rekap.bulan} icon={Eye} tone="violet" />
          <StatCard title="Tahun Ini" value={rekap.tahun} icon={Eye} />
        </div>

        <div className="overflow-x-auto rounded-lg border border-border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-14">No</TableHead>
                <TableHead>Tahun</TableHead>
                <TableHead>Pengunjung (Orang)</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {rekap.daftarTahun.map(([tahun, nilai], index) => (
                <TableRow key={tahun}>
                  <TableCell className="text-muted-foreground">{index + 1}</TableCell>
                  <TableCell>{tahun}</TableCell>
                  <TableCell className="font-medium">{nilai}</TableCell>
                </TableRow>
              ))}
              {!rekap.daftarTahun.length && (
                <TableRow>
                  <TableCell colSpan={3} className="py-6 text-center text-sm text-muted-foreground">
                    Belum ada data pengunjung.
                  </TableCell>
                </TableRow>
              )}
              <TableRow className="bg-muted/50 font-semibold">
                <TableCell />
                <TableCell>Total</TableCell>
                <TableCell>{rekap.total}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}

export default function AdminWebPage() {
  const params = useParams<{ slug: string }>();
  const router = useRouter();
  const slug = params.slug;

  useEffect(() => {
    if (slug === "tema") router.replace("/admin/pengaturan");
  }, [slug, router]);

  if (slug === "kategori") {
    return (
      <SimpleCrud
        title="Kategori Artikel"
        description="Kelola kategori yang dipakai pada artikel website desa."
        entity="kategori-artikel"
        fields={KATEGORI_FIELDS}
        columns={[
          { name: "nama", label: "Nama Kategori" },
          { name: "aktif", label: "Aktif" },
          { name: "slug", label: "Link" },
        ]}
        searchPlaceholder="Cari kategori…"
        createLabel="Tambah Kategori"
      />
    );
  }

  if (slug === "widget") {
    return (
      <SimpleCrud
        title="Widget"
        description="Widget yang tampil pada sidebar website desa."
        entity="widget"
        fields={WIDGET_FIELDS}
        columns={WIDGET_COLUMNS}
        searchPlaceholder="Cari widget…"
        createLabel="Tambah Widget"
      />
    );
  }

  if (slug === "sinergi") {
    return (
      <div className="space-y-5">
        <SimpleCrud
          title="Sinergi Program"
          description="Program kolaborasi yang ditampilkan pada website desa."
          entity="sinergi-program"
          fields={SINERGI_FIELDS}
          columns={SINERGI_COLUMNS}
          searchPlaceholder="Cari program…"
          createLabel="Tambah Program"
          showNo
          selectable
        />
        <SettingsForm
          grup="admin-web"
          title="Pengaturan Sinergi Program"
          cardTitle="Pengaturan Sinergi Program"
          hideHeader
          fields={SINERGI_PENGATURAN}
        />
      </div>
    );
  }

  if (slug === "menu") {
    return (
      <SimpleCrud
        title="Menu Website"
        description="Susunan menu navigasi website desa."
        entity="menu-web"
        fields={MENU_FIELDS}
        columns={MENU_COLUMNS}
        searchPlaceholder="Cari menu…"
        createLabel="Tambah Menu"
      />
    );
  }

  if (slug === "komentar") {
    return (
      <SimpleCrud
        title="Komentar"
        description="Moderasi komentar pembaca pada artikel website."
        entity="komentar"
        fields={KOMENTAR_FIELDS}
        columns={KOMENTAR_COLUMNS}
        searchPlaceholder="Cari komentar…"
        rowActions={(row: CrudRow, helpers) => (
          <>
            <button
              type="button"
              title="Setujui"
              onClick={async () => {
                await apiSend(`/master/komentar/${row.id}`, "PATCH", { status: "DISETUJUI" });
                toast.success("Komentar disetujui");
                helpers.refresh();
              }}
              className="rounded-md p-1.5 text-emerald-600 hover:bg-emerald-50"
            >
              <Check className="h-4 w-4" />
            </button>
            <button
              type="button"
              title="Tolak"
              onClick={async () => {
                await apiSend(`/master/komentar/${row.id}`, "PATCH", { status: "DITOLAK" });
                toast.success("Komentar ditolak");
                helpers.refresh();
              }}
              className="rounded-md p-1.5 text-red-600 hover:bg-red-50"
            >
              <X className="h-4 w-4" />
            </button>
          </>
        )}
      />
    );
  }

  if (slug === "galeri") {
    return (
      <SimpleCrud
        title="Galeri"
        description="Album foto kegiatan desa."
        entity="galeri-album"
        fields={GALERI_FIELDS}
        columns={GALERI_COLUMNS}
        searchPlaceholder="Cari album…"
        createLabel="Tambah Album"
      />
    );
  }

  if (slug === "media-sosial") {
    return (
      <SimpleCrud
        title="Media Sosial"
        description="Tautan media sosial desa pada website."
        entity="media-sosial"
        fields={SOSIAL_FIELDS}
        columns={SOSIAL_COLUMNS}
        searchPlaceholder="Cari platform…"
        createLabel="Tambah Media Sosial"
      />
    );
  }

  if (slug === "slider") {
    return (
      <div className="space-y-5">
        <SimpleCrud
          title="Slider"
          description="Gambar utama yang tampil bergantian di beranda."
          entity="slider"
          fields={SLIDER_FIELDS}
          columns={SLIDER_COLUMNS}
          searchPlaceholder="Cari slider…"
          createLabel="Tambah Slider"
          showNo
          selectable
        />
        <SettingsForm
          grup="admin-web"
          title="Pengaturan Slider"
          cardTitle="Pengaturan Slider"
          description="Sumber gambar untuk slider besar beranda."
          hideHeader
          fields={SLIDER_PENGATURAN}
        />
      </div>
    );
  }

  if (slug === "teks") {
    return (
      <SimpleCrud
        title="Teks Berjalan"
        description="Teks pengumuman yang berjalan di bagian atas website."
        entity="teks-berjalan"
        fields={TEKS_FIELDS}
        columns={TEKS_COLUMNS}
        searchPlaceholder="Cari teks…"
        createLabel="Tambah Teks"
      />
    );
  }

  if (slug === "pengunjung") {
    return (
      <div className="space-y-5">
        <SimpleCrud
          title="Pengunjung"
          description="Rekap jumlah pengunjung website desa per hari."
          entity="pengunjung-harian"
          fields={PENGUNJUNG_FIELDS}
          columns={PENGUNJUNG_COLUMNS}
          searchPlaceholder="Cari tanggal…"
          searchFields={["tanggal"]}
          createLabel="Tambah Data"
          showNo
          selectable
        />
        <RekapPengunjung />
      </div>
    );
  }

  if (slug === "pengaturan") {
    const tahunOpsional = [
      { value: "", label: "Pilih Tahun" },
      ...Array.from({ length: 8 }, (_, index) => {
        const tahun = String(new Date().getFullYear() + 1 - index);
        return { value: tahun, label: tahun };
      }),
    ];
    return (
      <SettingsForm
        grup="admin-web"
        title="Pengaturan Admin Web"
        description="Identitas dan perilaku website publik desa."
        fields={[
          { kunci: "adminweb.nama_situs", label: "Nama Situs", defaultValue: "Core Mulyadadi" },
          { kunci: "adminweb.deskripsi", label: "Deskripsi Situs", type: "textarea", full: true },
          { kunci: "adminweb.keywords", label: "Kata Kunci", full: true },
          { kunci: "adminweb.footer", label: "Teks Footer", type: "textarea", full: true },
          {
            kunci: "adminweb.berita_per_halaman",
            label: "Web Artikel Per Page",
            type: "number",
            defaultValue: "6",
            help: "Jumlah artikel dalam satu halaman.",
          },
          { kunci: "adminweb.komentar_aktif", label: "Komentar Aktif", type: "checkbox", defaultValue: "1" },
          { kunci: "adminweb.maintenance", label: "Mode Perawatan", type: "checkbox", defaultValue: "0" },
          {
            kunci: "adminweb.artikel_statis",
            label: "Artikel Statis / Halaman",
            type: "select",
            defaultValue: "HALAMAN",
            options: [
              { value: "HALAMAN", label: "Halaman Statis" },
              { value: "AGENDA", label: "Agenda" },
              { value: "KEUANGAN", label: "Keuangan" },
            ],
            help: "Artikel statis / halaman yang akan ditampilkan pada halaman utama.",
          },
          {
            kunci: "adminweb.link_feed",
            label: "Link Feed",
            type: "url",
            full: true,
            placeholder: "https://www.covid19.go.id/feed/",
            help: "Alamat feed yang digunakan.",
          },
          {
            kunci: "adminweb.tahun_apbdes",
            label: "Tahun APBDes",
            type: "select",
            options: tahunOpsional,
            help: "Tahun APBDes yang akan ditampilkan di halaman depan.",
          },
          {
            kunci: "adminweb.apbdes_footer",
            label: "Apbdes Footer",
            type: "checkbox",
            defaultValue: "0",
            help: "Apakah akan tampilkan grafik APBDes di halaman muka",
          },
          {
            kunci: "adminweb.apbdes_footer_all",
            label: "Apbdes Footer All",
            type: "checkbox",
            defaultValue: "0",
            help: "Apakah akan tampilkan grafik APBDes di semua halaman",
          },
          {
            kunci: "adminweb.covid_desa",
            label: "Covid Desa",
            type: "checkbox",
            defaultValue: "0",
            help: "Apakah akan tampilkan status Covid-19 desa di halaman muka",
          },
          {
            kunci: "adminweb.covid_rss",
            label: "Covid RSS",
            type: "checkbox",
            defaultValue: "0",
            help: "Apakah akan tampilkan RSS Covid-19 di halaman muka",
          },
          {
            kunci: "adminweb.daftar_penerima_bantuan",
            label: "Daftar Penerima Bantuan",
            type: "checkbox",
            defaultValue: "0",
            help: "Apakah akan tampilkan daftar penerima bantuan di statistik halaman muka",
          },
          {
            kunci: "adminweb.statistik_3d",
            label: "Statistik Chart 3D",
            type: "checkbox",
            defaultValue: "0",
            help: "Apakah akan tampilkan statistik chart 3D",
          },
          {
            kunci: "adminweb.sembunyikan_nama_bantuan",
            label: "Sembunyikan Nama Penerima Bantuan",
            type: "checkbox",
            defaultValue: "0",
            help: "Nama penerima bantuan disensor pada daftar penerima bantuan penduduk dan keluarga.",
          },
          {
            kunci: "adminweb.sembunyikan_alamat_bantuan",
            label: "Sembunyikan Alamat Penerima Bantuan",
            type: "checkbox",
            defaultValue: "0",
            help: "Alamat penerima bantuan disensor pada daftar penerima bantuan penduduk dan keluarga.",
          },
        ]}
      />
    );
  }

  return (
    <div className="py-10 text-center text-sm text-muted-foreground">
      Halaman admin web tidak ditemukan.
    </div>
  );
}