import React, { useState } from 'react';
import { MapPin, Navigation, Phone, Clock, Search, Globe } from 'lucide-react';

interface StoreLocation {
  id: string;
  name: string;
  address: string;
  phone: string;
  hours: string;
  mapEmbedUrl: string;
  directionsUrl: string;
}

const STORES: StoreLocation[] = [
  {
    id: 'mumbai',
    name: 'Mumbai Flagship Bookstore',
    address: 'Building 12, Kalina Industrial Area, Santacruz East, Mumbai, Maharashtra 400098',
    phone: '+91 22 2654 3210',
    hours: '10:00 AM - 08:30 PM (Daily)',
    mapEmbedUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3771.1896791550974!2d72.8624128!3d19.0773648!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c8ef4c54ad3d%3A0x6b1fcd35e463a54d!2sSantacruz%20East%2C%20Mumbai%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1700000000000',
    directionsUrl: 'https://maps.google.com/?q=Santacruz+East+Mumbai',
  },
  {
    id: 'bengaluru',
    name: 'Bengaluru Heritage Hub',
    address: '42, Brigade Road, Ashok Nagar, Bengaluru, Karnataka 560001',
    phone: '+91 80 2234 5678',
    hours: '09:30 AM - 09:00 PM (Daily)',
    mapEmbedUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3887.97341857999!2d77.6074128!3d12.973648!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae16790a6e0c03%3A0xe21264c126d4be0d!2sBrigade%20Rd%2C%20Bengaluru%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1700000000001',
    directionsUrl: 'https://maps.google.com/?q=Brigade+Road+Bengaluru',
  },
  {
    id: 'varanasi',
    name: 'Varanasi Vedic Manuscripts Center',
    address: 'Kashi Vishwanath Corridor Gate 2, Lahurabir, Varanasi, Uttar Pradesh 221001',
    phone: '+91 542 244 5678',
    hours: '08:00 AM - 09:30 PM (Daily)',
    mapEmbedUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3606.8123491550974!2d83.0073648!3d25.3173648!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x398e2df8b1d9bf5b%3A0x6739aa03b71bb357!2sKashi%20Vishwanath+Temple+Varanasi!5e0!3m2!1sen!2sin!4v1700000000002',
    directionsUrl: 'https://maps.google.com/?q=Kashi+Vishwanath+Temple+Varanasi',
  },
];

export default function StoreLocatorMap() {
  const [selectedStore, setSelectedStore] = useState<StoreLocation>(STORES[0]);

  return (
    <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-lg p-6 sm:p-8 space-y-6">
      <div className="border-b border-zinc-100 dark:border-zinc-800 pb-4">
        <h2 className="text-xl font-extrabold flex items-center gap-2 text-zinc-900 dark:text-zinc-100">
          <MapPin className="w-5.5 h-5.5 text-[#701a08]" /> Visit Our Physical Bookstores
        </h2>
        <p className="text-xs text-zinc-500 mt-1">
          Explore regional collection shelves, Vedic scripts, and rare Sanskrit printings.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Left column: List of stores */}
        <div className="space-y-4">
          {STORES.map((store) => {
            const isSelected = selectedStore.id === store.id;
            return (
              <div
                key={store.id}
                onClick={() => setSelectedStore(store)}
                className={`p-5 rounded-2xl border cursor-pointer transition-all space-y-3 ${
                  isSelected
                    ? 'border-[#701a08] bg-rose-50/40 dark:bg-rose-950/20 text-[#701a08] shadow-xs'
                    : 'border-zinc-200 dark:border-zinc-800 hover:border-zinc-300'
                }`}
              >
                <div className="flex justify-between items-start">
                  <h4 className="font-extrabold text-sm text-zinc-900 dark:text-zinc-100">{store.name}</h4>
                  {isSelected && <span className="px-2 py-0.5 rounded bg-[#701a08] text-white text-[9px] font-bold uppercase">Active</span>}
                </div>

                <p className="text-zinc-500 text-[11px] leading-relaxed">{store.address}</p>

                <div className="space-y-1.5 text-[10px] font-bold text-zinc-400">
                  <div className="flex items-center gap-1.5">
                    <Phone className="w-3.5 h-3.5 text-[#701a08]" />
                    <span>{store.phone}</span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <Clock className="w-3.5 h-3.5 text-[#701a08]" />
                    <span>{store.hours}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Right column: Interactive Map and Details */}
        <div className="lg:col-span-2 space-y-4">
          <div className="rounded-2xl overflow-hidden border border-zinc-200 dark:border-zinc-800 h-[320px] bg-zinc-100 dark:bg-zinc-800 shadow-inner">
            <iframe
              src={selectedStore.mapEmbedUrl}
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen={true}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>

          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 rounded-xl bg-zinc-50 dark:bg-zinc-800/40 border border-zinc-200 dark:border-zinc-800 text-xs">
            <div className="space-y-1">
              <span className="font-extrabold text-zinc-800 dark:text-zinc-200">Directions & GPS routing coordinates</span>
              <p className="text-[11px] text-zinc-500">Open navigation inside Google Maps App to navigate directly.</p>
            </div>
            <a
              href={selectedStore.directionsUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="px-4 py-2 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white text-[11px] font-extrabold shadow-sm flex items-center justify-center gap-1.5 self-start sm:self-center transition-colors"
            >
              <Navigation className="w-3.5 h-3.5" /> Navigate Store
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}