web-campaignpool/components/dialog/videotron.tsx

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { ChevronDown, ChevronUp } from "lucide-react";

// daftar kategori utama
const mainCategories = ["Mabes", "Polda", "PTIK", "LOGistik"];

// daftar Polda
const poldaList = [
  "Polda Aceh",
  "Polda Jawa Timur",
  "Polda Papua",
  "Polda Sumatra Utara",
  "Polda Sumatra Barat",
  "Polda Riau",
  "Polda Kep. Riau",
  "Polda Jambi",
  "Polda Jawa Tengah",
  "Polda Metro Jaya",
  "Polda Jawa Barat",
  "Polda Banten",
  "Polda D.I Yogyakarta",
  "Polda Sumatra Selatan",
  "Polda Kep. Bangka Belitung",
  "Polda Bengkulu",
  "Polda Lampung",
];

export default function DialogVideotron({
  isOpen,
  onClose,
}: {
  isOpen: boolean;
  onClose: () => void;
}) {
  const [searchTerm, setSearchTerm] = useState("");
  const [expanded, setExpanded] = useState(true);
  const [selectedCategories, setSelectedCategories] = useState<string[]>([
    "Mabes",
    "Polda",
    "PTIK",
    "LOGistik",
  ]);
  const [selectedPolda, setSelectedPolda] = useState<string[]>([]);

  const toggleExpand = () => setExpanded(!expanded);

  const toggleCategory = (cat: string) => {
    setSelectedCategories((prev) =>
      prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
    );
  };

  const toggleSelectAllCategories = () => {
    if (selectedCategories.length === mainCategories.length) {
      setSelectedCategories([]);
    } else {
      setSelectedCategories([...mainCategories]);
    }
  };

  const togglePolda = (polda: string) => {
    setSelectedPolda((prev) =>
      prev.includes(polda) ? prev.filter((p) => p !== polda) : [...prev, polda]
    );
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="w-full max-w-3xl sm:max-h-[90vh] overflow-hidden flex flex-col">
        <DialogHeader>
          <DialogTitle>Pilih Videotron</DialogTitle>
        </DialogHeader>

        {/* SEARCH */}
        <div className="relative mb-4">
          <input
            type="text"
            placeholder="Cari Videotron..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-10 pr-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500"
          />
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="w-4 h-4 absolute left-3 top-3 text-gray-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 104.5 4.5a7.5 7.5 0 0012.15 12.15z"
            />
          </svg>
        </div>

        {/* KATEGORI */}
        <p className="text-sm font-medium mb-1">Pilih Media Sosial</p>
        <div className="flex flex-wrap gap-3 mb-3">
          <label className="flex items-center gap-2 font-medium cursor-pointer">
            <input
              type="checkbox"
              checked={selectedCategories.length === mainCategories.length}
              onChange={toggleSelectAllCategories}
              className="accent-blue-600"
            />
            Semua
          </label>

          {mainCategories.map((cat) => (
            <label key={cat} className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={selectedCategories.includes(cat)}
                onChange={() => toggleCategory(cat)}
                className="accent-blue-600"
              />
              {cat}
            </label>
          ))}
        </div>

        {/* PILIH POLDA */}
        <div className="border rounded-md p-2 overflow-y-auto flex-1">
          <button
            onClick={toggleExpand}
            className="flex justify-between items-center w-full p-2 font-medium hover:bg-gray-50 rounded-md"
          >
            <span>Pilih Polda</span>
            {expanded ? (
              <ChevronUp className="w-4 h-4" />
            ) : (
              <ChevronDown className="w-4 h-4" />
            )}
          </button>

          {expanded && (
            <div className="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-2">
              {poldaList.map((polda) => (
                <label
                  key={polda}
                  className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50 cursor-pointer"
                >
                  <input
                    type="checkbox"
                    checked={selectedPolda.includes(polda)}
                    onChange={() => togglePolda(polda)}
                    className="accent-blue-600"
                  />
                  {polda}
                </label>
              ))}
            </div>
          )}
        </div>

        {/* TAG TERPILIH */}
        {selectedCategories.length + selectedPolda.length > 0 && (
          <div className="mt-3">
            <p className="text-sm font-medium mb-2">
              {selectedCategories.length + selectedPolda.length} Videotron
              dipilih
            </p>

            <div className="flex flex-wrap gap-2 max-h-[100px] overflow-y-auto border rounded-md p-2 bg-gray-50">
              {selectedCategories.map((item) => (
                <div
                  key={item}
                  className="flex items-center gap-2 px-3 py-1 bg-white rounded-full text-sm border"
                >
                  {item}
                  <button
                    onClick={() => toggleCategory(item)}
                    className="text-gray-500 hover:text-gray-700"
                  >
                    ✕
                  </button>
                </div>
              ))}

              {selectedPolda.map((polda) => (
                <div
                  key={polda}
                  className="flex items-center gap-2 px-3 py-1 bg-white rounded-full text-sm border"
                >
                  {polda}
                  <button
                    onClick={() => togglePolda(polda)}
                    className="text-gray-500 hover:text-gray-700"
                  >
                    ✕
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        <DialogFooter className="mt-4">
          <Button variant="outline" onClick={onClose}>
            Batal
          </Button>
          <Button onClick={onClose}>Pilih</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}