import { Link } from "react-router-dom";
import VisitorStats from "../components/VisitorStats";
import {
  Search,
  MapPin,
  AlertTriangle,
  ClipboardList,
  Utensils,
  Building2,
  BarChart3,
  MessageSquare,
  ShieldCheck,
  Clock,
  ArrowRight,
  Megaphone,
} from "lucide-react";

const statistik = [
  { label: "SPPG Terpantau", value: "24", icon: Building2, desc: "Dapur MBG aktif dalam sistem" },
  { label: "Distribusi Hari Ini", value: "18", icon: Utensils, desc: "Distribusi makanan sedang berjalan" },
  { label: "Laporan Diproses", value: "7", icon: ClipboardList, desc: "Aduan masyarakat ditindaklanjuti" },
  { label: "Validasi Selesai", value: "91%", icon: ShieldCheck, desc: "Data sudah diverifikasi" },
];

const sppgTerdekat = [
  { id: 1, nama: "SPPG Padang Utara", alamat: "Jl. Pendidikan No. 12 Padang", status: "Aktif", distribusi: "Sedang Berjalan", jarak: "1.2 km" },
  { id: 2, nama: "SPPG Koto Tangah", alamat: "Jl. Raya Koto Tangah No. 8", status: "Aktif", distribusi: "Selesai", jarak: "2.8 km" },
  { id: 3, nama: "SPPG Lubuk Begalung", alamat: "Jl. Veteran No. 22 Padang", status: "Pemantauan", distribusi: "Belum Dimulai", jarak: "4.1 km" },
];

const laporanTerbaru = [
  { id: 1, judul: "Keterlambatan distribusi makanan", lokasi: "SDN 05 Padang Utara", status: "Diproses", waktu: "Hari ini" },
  { id: 2, judul: "Kemasan makanan kurang rapi", lokasi: "SMPN 12 Padang", status: "Ditinjau", waktu: "Kemarin" },
];

export default function Beranda() {
  return (
    <div className="min-h-screen bg-slate-50">
      <section className="px-4 pt-4 sm:px-6 lg:px-8">
        <div className="relative mx-auto max-w-7xl overflow-hidden rounded-[2.25rem] border border-white/10 bg-gradient-to-br from-[#23486b] via-[#2450d3] to-[#1b8d93] text-white shadow-[0_20px_70px_rgba(2,8,23,0.22)]">
          <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)] bg-[size:70px_70px] opacity-45" />
          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.16),transparent_28%),radial-gradient(circle_at_top_right,rgba(96,165,250,0.18),transparent_24%),radial-gradient(circle_at_bottom_right,rgba(45,212,191,0.16),transparent_28%)]" />

          <div className="relative z-10 grid gap-10 px-5 py-10 sm:px-8 sm:py-12 lg:grid-cols-[1.1fr_0.9fr] lg:px-12 lg:py-16">
            <div className="flex flex-col justify-center text-center lg:text-left">
              <div className="mx-auto mb-6 inline-flex w-fit items-center gap-2 rounded-full border border-white/15 bg-white/10 px-5 py-2 text-sm font-bold uppercase tracking-[0.16em] text-blue-50 shadow-lg backdrop-blur-md lg:mx-0">
                <Megaphone className="h-4 w-4 text-cyan-200" />
                Portal Publik
              </div>

              <h1 className="max-w-full whitespace-nowrap text-3xl font-black leading-[1.05] tracking-tight text-white drop-shadow-[0_4px_16px_rgba(0,0,0,0.25)] sm:text-4xl lg:text-5xl xl:text-6xl">
                <span className="text-white">Selamat Datang di </span>
                <span className="bg-gradient-to-r from-cyan-200 via-sky-100 to-teal-200 bg-clip-text text-transparent">
                  OPEN PLATE
                </span>
              </h1>

              <p className="mx-auto mt-5 max-w-3xl text-base leading-relaxed text-blue-50/90 sm:text-lg lg:mx-0 lg:text-xl">
                Pantau informasi SPPG, distribusi makanan bergizi, transparansi data, dan sampaikan laporan masyarakat melalui sistem OPEN PLATE MBG secara mudah dan terarah.
              </p>

              <div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row lg:justify-start">
                <Link to="/daftar-sppg" className="inline-flex items-center justify-center gap-3 rounded-full bg-white px-6 py-3 text-base font-bold text-[#1f4ecb] shadow-lg transition hover:-translate-y-0.5 hover:bg-blue-50">
                  <Search className="h-5 w-5" />
                  Cari SPPG
                </Link>

                <Link to="/pengaduan" className="inline-flex items-center justify-center gap-3 rounded-full border border-white/25 bg-white/10 px-6 py-3 text-base font-bold text-white shadow-lg backdrop-blur-md transition hover:-translate-y-0.5 hover:bg-white/20">
                  <AlertTriangle className="h-5 w-5" />
                  Buat Pengaduan
                </Link>
              </div>
            </div>

            <div className="flex items-center justify-center lg:justify-end">
              <div className="w-full max-w-xl rounded-[2rem] border border-white/15 bg-white/10 p-6 shadow-2xl backdrop-blur-xl">
                <div className="mb-6 flex items-start gap-4">
                  <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-white/15 text-cyan-100">
                    <Utensils className="h-8 w-8" />
                  </div>

                  <div>
                    <h2 className="text-2xl font-black text-white">Status MBG Hari Ini</h2>
                    <p className="mt-1 text-base text-blue-100/85">Ringkasan distribusi dan laporan publik.</p>
                  </div>
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <div className="rounded-3xl border border-white/10 bg-white/12 p-6 backdrop-blur-md transition hover:bg-white/15">
                    <p className="text-4xl font-black leading-none text-white">18</p>
                    <p className="mt-3 text-sm font-medium text-blue-100/80 sm:text-base">Distribusi aktif</p>
                  </div>
                  <div className="rounded-3xl border border-white/10 bg-white/12 p-6 backdrop-blur-md transition hover:bg-white/15">
                    <p className="text-4xl font-black leading-none text-white">7</p>
                    <p className="mt-3 text-sm font-medium text-blue-100/80 sm:text-base">Laporan masuk</p>
                  </div>
                  <div className="rounded-3xl border border-white/10 bg-white/12 p-6 backdrop-blur-md transition hover:bg-white/15">
                    <p className="text-4xl font-black leading-none text-white">24</p>
                    <p className="mt-3 text-sm font-medium text-blue-100/80 sm:text-base">SPPG terdata</p>
                  </div>
                  <div className="rounded-3xl border border-white/10 bg-white/12 p-6 backdrop-blur-md transition hover:bg-white/15">
                    <p className="text-4xl font-black leading-none text-white">91%</p>
                    <p className="mt-3 text-sm font-medium text-blue-100/80 sm:text-base">Tervalidasi</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <main className="mx-auto max-w-7xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
        <VisitorStats mode="compact" title="Statistik Pengunjung OPEN PLATE" />

        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {statistik.map((item) => {
            const Icon = item.icon;
            return (
              <div key={item.label} className="rounded-3xl border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-200/70 transition hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-200/80">
                <div className="mb-4 flex items-center justify-between">
                  <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-50 text-blue-700">
                    <Icon className="h-6 w-6" />
                  </div>
                  <span className="rounded-full bg-cyan-50 px-3 py-1 text-xs font-bold text-cyan-700">Live</span>
                </div>
                <h2 className="text-3xl font-black text-slate-900">{item.value}</h2>
                <p className="mt-1 font-bold text-slate-700">{item.label}</p>
                <p className="mt-1 text-sm text-slate-500">{item.desc}</p>
              </div>
            );
          })}
        </div>

        <div className="grid gap-6 lg:grid-cols-[1.4fr_0.8fr]">
          <section className="rounded-3xl border border-slate-200/80 bg-white p-6 shadow-sm shadow-slate-200/70">
            <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <h2 className="text-xl font-black text-slate-900">SPPG Terdekat</h2>
                <p className="mt-1 text-sm text-slate-500">Informasi SPPG yang dapat dipantau oleh masyarakat.</p>
              </div>
              <Link to="/daftar-sppg" className="inline-flex items-center gap-2 text-sm font-bold text-blue-700 hover:underline">
                Lihat semua
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>

            <div className="space-y-4">
              {sppgTerdekat.map((item) => (
                <div key={item.id} className="rounded-3xl border border-slate-200/80 bg-slate-50 p-4 transition hover:-translate-y-0.5 hover:bg-blue-50/60 hover:shadow-md">
                  <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                      <div className="flex items-center gap-3">
                        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-blue-100 text-blue-700">
                          <Building2 className="h-5 w-5" />
                        </div>
                        <div>
                          <h3 className="font-black text-slate-900">{item.nama}</h3>
                          <p className="text-xs font-semibold text-slate-500">Jarak sekitar {item.jarak}</p>
                        </div>
                      </div>
                      <div className="mt-3 flex items-start gap-2 text-sm text-slate-600">
                        <MapPin className="mt-0.5 h-4 w-4 flex-shrink-0 text-blue-700" />
                        <span>{item.alamat}</span>
                      </div>
                      <div className="mt-2 flex items-center gap-2 text-sm text-slate-600">
                        <Clock className="h-4 w-4 text-cyan-700" />
                        <span>Distribusi: {item.distribusi}</span>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 sm:flex-col sm:items-end">
                      <span className="rounded-full bg-green-100 px-3 py-1 text-xs font-bold text-green-700">{item.status}</span>
                      <Link to={`/detail-sppg/${item.id}`} className="rounded-xl border border-blue-100 bg-white px-3 py-2 text-xs font-bold text-blue-700 shadow-sm transition hover:bg-blue-700 hover:text-white">
                        Detail
                      </Link>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section className="rounded-3xl border border-slate-200/80 bg-white p-6 shadow-sm shadow-slate-200/70">
            <div className="mb-5">
              <h2 className="text-xl font-black text-slate-900">Laporan Terbaru</h2>
              <p className="mt-1 text-sm text-slate-500">Laporan masyarakat yang sedang dipantau.</p>
            </div>
            <div className="space-y-4">
              {laporanTerbaru.map((item) => (
                <div key={item.id} className="rounded-3xl border border-slate-200 bg-slate-50 p-4">
                  <div className="flex items-start gap-3">
                    <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-2xl bg-yellow-100 text-yellow-700">
                      <AlertTriangle className="h-5 w-5" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <h3 className="text-sm font-black text-slate-900">{item.judul}</h3>
                      <p className="mt-1 text-xs text-slate-500">{item.lokasi}</p>
                      <div className="mt-3 flex items-center justify-between gap-2">
                        <span className="rounded-full bg-yellow-100 px-3 py-1 text-xs font-bold text-yellow-700">{item.status}</span>
                        <span className="text-xs font-semibold text-slate-400">{item.waktu}</span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <Link to="/pengaduan" className="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-blue-700 px-4 py-3 text-sm font-bold text-white transition hover:bg-blue-800">
              <MessageSquare className="h-4 w-4" />
              Buat Pengaduan Baru
            </Link>
          </section>
        </div>
      </main>
    </div>
  );
}
