"use client";

import { useMemo, useState } from "react";
import useSWR from "swr";
import { Download, QrCode, RefreshCw } from "lucide-react";
import { fetcher } from "@/lib/api";
import type { Desa } from "@/lib/types";
import { PageHeader } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";

const UKURAN = [
  "125",
  "150",
  "175",
  "200",
  "225",
  "250",
  "320",
  "512",
];

function warnaAman(nilai: string) {
  return /^#[0-9a-fA-F]{6}$/.test(nilai) ? nilai : "#000000";
}

export default function QrCodePage() {
  const { data: desa } = useSWR<Desa>("/desa", fetcher);
  const [data, setData] = useState("https://mulyadadi.desa.id");
  const [size, setSize] = useState("250");
  const [depan, setDepan] = useState("#000000");
  const [belakang, setBelakang] = useState("#ffffff");
  const [logoMode, setLogoMode] = useState("tidak");
  const [logoManual, setLogoManual] = useState("");
  const [tersimpan, setTersimpan] = useState(previewUrl("https://mulyadadi.desa.id", "250", "#000000", "#ffffff", ""));

  function logoAktif() {
    if (logoMode === "manual") return logoManual.trim();
    if (logoMode === "auto" && desa?.logo) {
      return /^https?:\/\//.test(desa.logo) ? desa.logo : `${window.location.origin}${desa.logo}`;
    }
    return "";
  }

  function buat(event?: React.FormEvent<HTMLFormElement>) {
    event?.preventDefault();
    setTersimpan(
      previewUrl(
        data.trim() || "https://mulyadadi.desa.id",
        size,
        warnaAman(depan),
        warnaAman(belakang),
        logoAktif(),
      ),
    );
  }

  function baru() {
    setData("https://mulyadadi.desa.id");
    setSize("250");
    setDepan("#000000");
    setBelakang("#ffffff");
    setLogoMode("tidak");
    setLogoManual("");
    setTersimpan(previewUrl("https://mulyadadi.desa.id", "250", "#000000", "#ffffff", ""));
  }

  const unduh = useMemo(() => {
    const url = new URL(tersimpan, "http://lokal");
    url.searchParams.delete("logo");
    return `${url.pathname}${url.search}&type=png`;
  }, [tersimpan]);

  return (
    <div className="space-y-5">
      <PageHeader
        title="QR Code"
        description="Buat QR Code untuk alamat website, layanan mandiri, atau tautan desa."
      />
      <div className="grid gap-4 lg:grid-cols-[1fr_360px]">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Isi QR Code</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={buat} className="space-y-4">
              <div className="space-y-1.5">
                <Label htmlFor="qr-data">Isi Kode</Label>
                <Input
                  id="qr-data"
                  value={data}
                  onChange={(event) => setData(event.target.value)}
                  placeholder="https://…"
                  required
                />
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-1.5">
                  <Label htmlFor="qr-logo">Sisipkan Logo</Label>
                  <Select
                    id="qr-logo"
                    value={logoMode}
                    onChange={(event) => setLogoMode(event.target.value)}
                  >
                    <option value="tidak">Tidak</option>
                    <option value="auto">Otomatis (Logo Desa)</option>
                    <option value="manual">Manual</option>
                  </Select>
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="qr-size">Ukuran</Label>
                  <Select id="qr-size" value={size} onChange={(event) => setSize(event.target.value)}>
                    {UKURAN.map((ukuran) => (
                      <option key={ukuran} value={ukuran}>
                        {ukuran} px
                      </option>
                    ))}
                  </Select>
                </div>
              </div>
              {logoMode === "manual" && (
                <div className="space-y-1.5">
                  <Label htmlFor="qr-logo-url">URL Logo</Label>
                  <Input
                    id="qr-logo-url"
                    value={logoManual}
                    onChange={(event) => setLogoManual(event.target.value)}
                    placeholder="https://…/logo.png — kosongkan untuk QR polos"
                  />
                </div>
              )}
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-1.5">
                  <Label htmlFor="qr-depan">Warna Depan</Label>
                  <div className="flex gap-2">
                    <input
                      type="color"
                      value={warnaAman(depan)}
                      onChange={(event) => setDepan(event.target.value)}
                      className="h-9 w-12 cursor-pointer rounded-md border border-input bg-background p-1"
                      aria-label="Warna depan"
                    />
                    <Input id="qr-depan" value={depan} onChange={(event) => setDepan(event.target.value)} />
                  </div>
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="qr-belakang">Warna Belakang</Label>
                  <div className="flex gap-2">
                    <input
                      type="color"
                      value={warnaAman(belakang)}
                      onChange={(event) => setBelakang(event.target.value)}
                      className="h-9 w-12 cursor-pointer rounded-md border border-input bg-background p-1"
                      aria-label="Warna belakang"
                    />
                    <Input
                      id="qr-belakang"
                      value={belakang}
                      onChange={(event) => setBelakang(event.target.value)}
                    />
                  </div>
                </div>
              </div>
              <div className="flex flex-wrap gap-2">
                <Button type="submit">
                  <QrCode className="h-4 w-4" /> Buat
                </Button>
                <Button type="button" variant="outline" onClick={baru}>
                  <RefreshCw className="h-4 w-4" /> Baru
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Pratinjau</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-center">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={tersimpan}
              alt="Pratinjau QR Code"
              className="mx-auto h-auto w-full max-w-[280px] rounded-lg border border-border bg-white p-2"
            />
            <div className="flex flex-wrap justify-center gap-2">
              <a href={unduh} download="qrcode.png" className="inline-flex">
                <Button variant="outline" size="sm">
                  <Download className="h-4 w-4" /> Unduh PNG
                </Button>
              </a>
              <a href={tersimpan} download="qrcode.svg" className="inline-flex">
                <Button variant="outline" size="sm">
                  <Download className="h-4 w-4" /> Unduh SVG
                </Button>
              </a>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

function previewUrl(
  data: string,
  size: string,
  depan: string,
  belakang: string,
  logo: string,
) {
  const params = new URLSearchParams({
    data,
    size,
    depan,
    belakang,
  });
  if (logo) params.set("logo", logo);
  return `/api/backend/qrcode?${params.toString()}`;
}