import { useState } from "react";
import { Link } from "react-router-dom";
import {
  Search,
  MapPin,
  Building2,
  Clock,
  CheckCircle,
  AlertCircle,
  Filter
} from "lucide-react";

const dataSPPG = [
  {
    id: 1,
    nama: "SPPG Padang Utara",
    alamat: "Jl. Pendidikan No. 12 Padang",
    kecamatan: "Padang Utara",
    status: "Aktif",
    distribusi: "Sedang berjalan",
    jumlahSekolah: 8,
    jumlahPenerima: 1240
  },
  {
    id: 2,
    nama: "SPPG Koto Tangah",
    alamat: "Jl. Raya Koto Tangah No. 8",
    kecamatan: "Koto Tangah",
    status: "Aktif",
    distribusi: "Selesai",
    jumlahSekolah: 12,
    jumlahPenerima: 1860
  },
  {
    id: 3,
    nama: "SPPG Lubuk Begalung",
    alamat: "Jl. Veteran No. 22 Padang",
    kecamatan: "Lubuk Begalung",
    status: "Pemantauan",
    distribusi: "Belum dimulai",
    jumlahSekolah: 6,
    jumlahPenerima: 920
  },
  {
    id: 4,
    nama: "SPPG Padang Timur",
    alamat: "Jl. Dr. Sutomo No. 17 Padang",
    kecamatan: "Padang Timur",
    status: "Aktif",
    distribusi: "Sedang berjalan",
    jumlahSekolah: 10,
    jumlahPenerima: 1500
  }
];

export default function DaftarSPPGPublik() {
  const [keyword, setKeyword] = useState("");
  const [filterStatus, setFilterStatus] = useState("Semua");

  const hasilFilter = dataSPPG.filter((item) => {
    const cocokKeyword =
      item.nama.toLowerCase().includes(keyword.toLowerCase()) ||
      item.alamat.toLowerCase().includes(keyword.toLowerCase()) ||
      item.kecamatan.toLowerCase().includes(keyword.toLowerCase());

    const cocokStatus =
      filterStatus === "Semua" || item.status === filterStatus;

    return cocokKeyword && cocokStatus;
  });

  const getStatusStyle = (status) => {
    if (status === "Aktif") {
      return "bg-green-500/10 text-green-600";
    }

    if (status === "Pemantauan") {
      return "bg-yellow-500/10 text-yellow-600";
    }

    return "bg-red-500/10 text-red-600";
  };

  const getDistribusiIcon = (distribusi) => {
    if (distribusi === "Selesai") {
      return <CheckCircle className="h-4 w-4 text-green-600" />;
    }

    if (distribusi === "Sedang berjalan") {
      return <Clock className="h-4 w-4 text-blue-600" />;
    }

    return <AlertCircle className="h-4 w-4 text-yellow-600" />;
  };

  return (
    <div className="min-h-screen bg-muted/30 px-4 py-6 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl space-y-6">
        <div className="rounded-2xl border bg-card p-6 shadow-sm">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
              <p className="text-sm font-medium text-primary">
                Portal Masyarakat
              </p>
              <h1 className="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
                Daftar SPPG Publik
              </h1>
              <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
                Halaman ini menampilkan informasi Satuan Pelayanan Pemenuhan
                Gizi yang dapat dipantau oleh masyarakat secara terbuka.
              </p>
            </div>

            <Link
              to="/masyarakat/laporan"
              className="inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm transition hover:bg-primary/90"
            >
              Buat Laporan
            </Link>
          </div>
        </div>

        <div className="rounded-2xl border bg-card p-5 shadow-sm">
          <div className="grid gap-4 lg:grid-cols-[1fr_220px]">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <input
                type="text"
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                placeholder="Cari nama SPPG, alamat, atau kecamatan..."
                className="w-full rounded-xl border bg-background py-2.5 pl-10 pr-4 text-sm outline-none transition focus:border-primary"
              />
            </div>

            <div className="relative">
              <Filter className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <select
                value={filterStatus}
                onChange={(e) => setFilterStatus(e.target.value)}
                className="w-full appearance-none rounded-xl border bg-background py-2.5 pl-10 pr-4 text-sm outline-none transition focus:border-primary"
              >
                <option value="Semua">Semua Status</option>
                <option value="Aktif">Aktif</option>
                <option value="Pemantauan">Pemantauan</option>
                <option value="Tidak Aktif">Tidak Aktif</option>
              </select>
            </div>
          </div>
        </div>

        <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
          {hasilFilter.map((item) => (
            <div
              key={item.id}
              className="rounded-2xl border bg-card p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-md"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="rounded-xl bg-primary/10 p-3 text-primary">
                  <Building2 className="h-5 w-5" />
                </div>

                <span
                  className={`rounded-full px-3 py-1 text-xs font-semibold ${getStatusStyle(
                    item.status
                  )}`}
                >
                  {item.status}
                </span>
              </div>

              <div className="mt-4">
                <h2 className="text-lg font-bold text-foreground">
                  {item.nama}
                </h2>

                <div className="mt-2 flex items-start gap-2 text-sm text-muted-foreground">
                  <MapPin className="mt-0.5 h-4 w-4 shrink-0" />
                  <span>{item.alamat}</span>
                </div>

                <p className="mt-2 text-sm text-muted-foreground">
                  Kecamatan {item.kecamatan}
                </p>
              </div>

              <div className="mt-5 grid grid-cols-2 gap-3">
                <div className="rounded-xl bg-muted/40 p-3">
                  <p className="text-xs text-muted-foreground">
                    Sekolah Terlayani
                  </p>
                  <p className="mt-1 text-lg font-bold">
                    {item.jumlahSekolah}
                  </p>
                </div>

                <div className="rounded-xl bg-muted/40 p-3">
                  <p className="text-xs text-muted-foreground">
                    Penerima Manfaat
                  </p>
                  <p className="mt-1 text-lg font-bold">
                    {item.jumlahPenerima.toLocaleString("id-ID")}
                  </p>
                </div>
              </div>

              <div className="mt-5 flex items-center gap-2 rounded-xl border bg-background px-3 py-2.5 text-sm">
                {getDistribusiIcon(item.distribusi)}
                <span className="text-muted-foreground">Distribusi:</span>
                <span className="font-semibold text-foreground">
                  {item.distribusi}
                </span>
              </div>

              <div className="mt-5 flex gap-3">
                <Link
                  to={`/masyarakat/sppg/${item.id}`}
                  className="flex-1 rounded-xl bg-primary px-4 py-2.5 text-center text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
                >
                  Detail
                </Link>

                <Link
                  to="/masyarakat/laporan"
                  className="flex-1 rounded-xl border bg-background px-4 py-2.5 text-center text-sm font-semibold transition hover:bg-muted"
                >
                  Laporkan
                </Link>
              </div>
            </div>
          ))}
        </div>

        {hasilFilter.length === 0 && (
          <div className="rounded-2xl border bg-card p-8 text-center shadow-sm">
            <p className="font-semibold text-foreground">
              Data SPPG tidak ditemukan
            </p>
            <p className="mt-1 text-sm text-muted-foreground">
              Coba gunakan kata kunci atau filter status yang berbeda.
            </p>
          </div>
        )}
      </div>
    </div>
  );
}