'use client';

import { useState, useMemo } from 'react';
import { motion } from 'framer-motion';
import {
  Search,
  MapPin,
  X,
  Navigation,
  Store,
  ShieldCheck,
} from 'lucide-react';
import { AGENTS, Agent } from '@/data/agents';

// ── Agent Card Component ───────────────────────────────────────────────
function AgentCard({ agent, index }: { agent: Agent; index: number }) {
  const typeLabel = 'Distributor Resmi';

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.05, duration: 0.4 }}
      className="group relative bg-white/60 backdrop-blur-xl border border-white/50 rounded-[20px] md:rounded-3xl p-5 sm:p-8 hover:border-yellow-400 hover:shadow-xl transition-all duration-300 flex flex-col overflow-hidden shadow-[0_8px_32px_0_rgba(31,38,135,0.05)]"
    >
      {/* Header: Badge & Status */}
      <div className="flex items-start justify-between mb-4 md:mb-6">
        <div className="flex flex-col gap-1.5 md:gap-2">
          <span className="inline-flex items-center justify-center px-2.5 py-1 md:px-3 md:py-1.5 rounded-lg text-[9px] md:text-[10px] font-bold uppercase tracking-widest bg-yellow-500/10 text-yellow-700 border border-yellow-500/30 shadow-sm">
            {typeLabel}
          </span>
          <span className="inline-flex items-center gap-1 text-[9px] md:text-[10px] font-bold text-emerald-600">
            <ShieldCheck className="w-3 h-3" /> Terverifikasi
          </span>
        </div>
      </div>

      {/* Body: Info */}
      <div className="flex-1 mb-2 md:mb-3">
        <h3 className="text-lg sm:text-xl font-black text-gray-900 mb-2 md:mb-3 tracking-tight group-hover:text-yellow-600 transition-colors leading-tight line-clamp-2">
          {agent.name}
        </h3>
        <div className="space-y-2.5">
          <div className="flex items-start gap-2 md:gap-2.5">
            <MapPin className="w-3.5 h-3.5 md:w-4 md:h-4 text-gray-500 shrink-0 mt-0.5" />
            <div>
              <p className="text-xs md:text-sm font-bold text-gray-500 mt-0.5">
                {agent.city}
              </p>
              <p className="text-[10px] md:text-xs font-medium text-gray-600 leading-relaxed">
                {agent.address}
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Footer: Actions */}
      {/* <div className="mt-auto pt-4 md:pt-5 border-t border-gray-200/50 flex gap-2 md:gap-3">
        <a
          href={`https://maps.google.com/?q=${encodeURIComponent(
            `${agent.name} ${agent.address} ${agent.city}`
          )}`}
          target="_blank"
          rel="noopener noreferrer"
          className="w-full py-2 md:py-3 rounded-lg md:rounded-xl bg-[#FFD738] hover:bg-yellow-400 text-[#1C1D1F] text-[10px] md:text-xs font-bold flex items-center justify-center gap-1.5 md:gap-2 transition-all shadow-md shadow-[#FFD738]/20"
        >
          <Navigation className="w-3.5 h-3.5 md:w-4 md:h-4" /> Buka Peta
        </a>
      </div> */}
    </motion.div>
  );
}

// ── Main Page ──────────────────────────────────────────────────────────
export default function AgentsPage() {
  const [searchAgent, setSearchAgent] = useState('');

  const isLoading = false;

  // Logika Filtering & Searching
  const filteredAgents = useMemo(() => {
    return AGENTS.filter((agent) => {
      // Filter by Search Query (Name, City, or Address)
      if (searchAgent) {
        const query = searchAgent.toLowerCase();
        return (
          agent.name.toLowerCase().includes(query) ||
          agent.city.toLowerCase().includes(query) ||
          agent.address.toLowerCase().includes(query)
        );
      }
      return true;
    });
  }, [searchAgent]);

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 relative overflow-hidden pb-16 md:pb-52">
      {/* Global Background for Glassmorphism */}
      <div className="fixed inset-0 z-[-1] pointer-events-none">
        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-yellow-300/30 rounded-full blur-[120px] -translate-y-1/3 translate-x-1/3 opacity-50" />
        <div className="absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-300/30 rounded-full blur-[120px] opacity-50" />
      </div>

      <div className="relative z-10 max-w-6xl mx-auto pt-24 md:pt-32 px-4 sm:px-6">
        {/* ── Header ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-8 md:mb-10 text-center"
        >
          <div className="w-12 h-12 md:w-16 md:h-16 bg-yellow-50 border border-yellow-200 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-4 md:mb-6 shadow-sm">
            <Store className="w-6 h-6 md:w-8 md:h-8 text-yellow-600" />
          </div>
          <h1 className="text-3xl sm:text-5xl font-black text-gray-900 tracking-tight leading-none mb-3 md:mb-4">
            Jaringan <span className="text-yellow-600">Distributor</span> Resmi
          </h1>
          <p className="text-[13px] sm:text-base font-medium text-gray-600 max-w-xl mx-auto leading-relaxed">
            Temukan lokasi distributor resmi Garam Cap Kapal terdekat di kota
            Anda.
          </p>
        </motion.div>

        {/* ── Search & Filter Box ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white/60 backdrop-blur-xl border border-white/50 rounded-[20px] md:rounded-3xl p-4 sm:p-8 shadow-sm max-w-3xl mx-auto mb-8 md:mb-12"
        >
          {/* Custom SearchBar */}
          <div className="relative bg-white/40 border border-white/50 rounded-2xl focus-within:border-yellow-400 focus-within:ring-1 focus-within:ring-yellow-400 transition-all shadow-sm">
            <Search className="absolute left-4 md:left-5 top-1/2 -translate-y-1/2 w-4 h-4 md:w-5 md:h-5 text-gray-500" />
            <input
              type="text"
              placeholder="Cari nama agen, kota..."
              value={searchAgent}
              onChange={(e) => setSearchAgent(e.target.value)}
              className="w-full pl-11 pr-10 py-3 md:pl-14 md:pr-12 md:py-4 bg-transparent text-gray-900 text-sm md:text-base font-medium placeholder:text-gray-500 focus:outline-none tracking-wide"
            />
            {searchAgent && (
              <button
                onClick={() => setSearchAgent('')}
                className="absolute right-3 md:right-4 top-1/2 -translate-y-1/2 p-1 md:p-1.5 bg-gray-200/50 text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-colors rounded-full"
              >
                <X className="w-3 h-3 md:w-4 md:h-4" />
              </button>
            )}
          </div>
        </motion.div>

        {/* ── Content Area ── */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
        >
          {/* Result Count Indicator */}
          {!isLoading && (
            <p className="text-[10px] md:text-xs font-bold text-gray-500 tracking-wide mb-4 md:mb-6 text-center sm:text-left">
              Menampilkan{' '}
              <span className="text-gray-900">{filteredAgents.length}</span>{' '}
              distributor
              {searchAgent && (
                <span>
                  {' '}
                  untuk{' '}
                  <span className="text-yellow-600">
                    &quot;{searchAgent}&quot;
                  </span>
                </span>
              )}
            </p>
          )}

          {isLoading ? (
            <div className="text-center py-12">
              <div className="w-8 h-8 border-4 border-yellow-200 border-t-yellow-500 rounded-full animate-spin mx-auto" />
            </div>
          ) : filteredAgents.length === 0 ? (
            <div className="bg-white/60 backdrop-blur-md border border-white/50 rounded-3xl py-16 md:py-24 flex flex-col items-center justify-center text-center shadow-sm px-4">
              <div className="w-16 h-16 md:w-20 md:h-20 bg-white/50 rounded-full flex items-center justify-center mb-4 md:mb-6 border border-white/50 shadow-inner">
                <MapPin className="w-8 h-8 md:w-10 md:h-10 text-gray-500" />
              </div>
              <h3 className="font-black text-gray-900 text-xl md:text-2xl tracking-tight mb-2">
                Tidak Ada Distributor Ditemukan
              </h3>
              <p className="text-[13px] md:text-sm font-medium text-gray-600 max-w-md">
                Sistem belum menemukan distributor yang cocok dengan pencarian
                Anda. Coba gunakan kata kunci kota besar terdekat.
              </p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
              {filteredAgents.map((agent, index) => (
                <AgentCard key={agent.id} agent={agent} index={index} />
              ))}
            </div>
          )}
        </motion.div>

        {/* ── Footer Tips ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="mt-8 md:mt-12 bg-yellow-500/5 border border-yellow-500/20 rounded-[20px] md:rounded-3xl p-5 sm:p-8 flex flex-col sm:flex-row items-center sm:items-start gap-4 md:gap-5 text-center sm:text-left shadow-sm max-w-4xl mx-auto"
        >
          <div className="p-2.5 md:p-3 bg-yellow-100 rounded-xl md:rounded-2xl shrink-0">
            <Navigation className="w-5 h-5 md:w-6 md:h-6 text-yellow-600" />
          </div>
          <div>
            <h4 className="text-sm md:text-base font-bold text-gray-900 tracking-wide mb-1 md:mb-1.5">
              Tips Berkunjung
            </h4>
            <p className="text-[11px] md:text-sm text-gray-600 font-medium leading-relaxed">
              Pastikan Anda mengonfirmasi ketersediaan stok, harga terbaru, dan
              jam operasional sebelum berkunjung secara langsung ke lokasi
              distributor.
            </p>
          </div>
        </motion.div>
      </div>
    </div>
  );
}