/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState } from 'react';
import { Property, PropertyType, Booking, UserAccount } from '../types';
import { 
  Plus, 
  MapPin, 
  PlusCircle, 
  Trash2, 
  Edit2, 
  CheckCircle, 
  AlertTriangle, 
  Layers, 
  Coins, 
  Hourglass, 
  Compass, 
  ShieldAlert, 
  Sparkles,
  Zap,
  Power,
  Wrench,
  Check,
  Building,
  Image,
  Calendar,
  IndianRupee,
  LogOut,
  QrCode,
  Camera,
  Scan
} from 'lucide-react';

interface OwnerDashboardProps {
  currentOwner: UserAccount;
  properties: Property[];
  bookings: Booking[];
  onAddProperty: (newProp: Property) => void;
  onUpdateProperty: (updatedProp: Property) => void;
  onDeleteProperty: (id: string) => void;
  onUpdateBooking: (updatedProp: Booking) => void;
  onLogout: () => void;
}

const PRESET_MOCK_IMAGES = [
  { url: '/src/assets/images/ev_station_urban_1782131537641.jpg', label: 'Urban EV Station Hub' },
  { url: '/src/assets/images/smart_parking_lot_1782131555542.jpg', label: 'Modern Smart Garage' },
  { url: 'https://images.unsplash.com/photo-1563720223185-11003d516935?auto=format&fit=crop&q=80&w=800', label: 'Industrial EV Plaza' },
  { url: 'https://images.unsplash.com/photo-1506521781263-d8422e82f27a?auto=format&fit=crop&q=80&w=800', label: 'Underground Standard Deck' }
];

export default function OwnerDashboard({
  currentOwner,
  properties,
  bookings,
  onAddProperty,
  onUpdateProperty,
  onDeleteProperty,
  onUpdateBooking,
  onLogout
}: OwnerDashboardProps) {
  
  // Filter owned properties
  const myProps = properties.filter(p => p.ownerId === currentOwner.id);
  
  // Filter bookings for properties belonging to this owner
  const myPropIds = myProps.map(p => p.id);
  const myBookings = bookings.filter(b => myPropIds.includes(b.propertyId));

  // State
  const [tab, setTab] = useState<'listings' | 'new-listing' | 'bookings'>('listings');
  const [editingPropId, setEditingPropId] = useState<string | null>(null);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  // Scanning / QR Verification States
  const [showScannerModal, setShowScannerModal] = useState(false);
  const [scannedCodeInput, setScannedCodeInput] = useState('');
  const [selectedSimulatedBookingId, setSelectedSimulatedBookingId] = useState('');
  const [isSimulatingScan, setIsSimulatingScan] = useState(false);
  const [verificationFeedback, setVerificationFeedback] = useState<{
    type: 'success' | 'error';
    message: string;
    booking?: Booking;
  } | null>(null);
  const [scanTab, setScanTab] = useState<'camera' | 'manual'>('camera');

  const triggerBeep = (isSuccess: boolean) => {
    try {
      const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
      if (!AudioCtx) return;
      const ctx = new AudioCtx();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      
      osc.connect(gain);
      gain.connect(ctx.destination);
      
      if (isSuccess) {
        osc.type = 'sine';
        osc.frequency.setValueAtTime(880, ctx.currentTime);
        gain.gain.setValueAtTime(0.1, ctx.currentTime);
        osc.start();
        osc.stop(ctx.currentTime + 0.15);
      } else {
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(150, ctx.currentTime);
        gain.gain.setValueAtTime(0.15, ctx.currentTime);
        osc.start();
        osc.stop(ctx.currentTime + 0.35);
      }
    } catch (e) {
      // audio context standard safeguard
    }
  };

  const handleVerifyCheckIn = (code: string) => {
    setError('');
    const cleanCode = code.trim().toUpperCase();
    if (!cleanCode) return;

    // Check across all bookings for validation
    const targetBooking = bookings.find(b => b.id.toUpperCase().trim() === cleanCode);
    
    if (!targetBooking) {
      setVerificationFeedback({
        type: 'error',
        message: `Booking verification failed. Ticket code "${cleanCode}" was not found in our reservation database.`
      });
      triggerBeep(false);
      return;
    }

    if (targetBooking.status === 'Cancelled') {
      setVerificationFeedback({
        type: 'error',
        message: `Booking verification failed! Passcode ${targetBooking.id} has already been cancelled by the customer, and the payment is routed for refund.`,
        booking: targetBooking
      });
      triggerBeep(false);
      return;
    }

    if (targetBooking.status === 'Completed') {
      setVerificationFeedback({
        type: 'error',
        message: `Booking ${targetBooking.id} has already been verified and checked into ${targetBooking.propertyTitle}!`,
        booking: targetBooking
      });
      triggerBeep(false);
      return;
    }

    // Success check-in!
    const updatedBooking: Booking = {
      ...targetBooking,
      status: 'Completed'
    };
    onUpdateBooking(updatedBooking);
    setVerificationFeedback({
      type: 'success',
      message: `Arrival Cleared! Customer ${targetBooking.userName} registered scan verification for vehicle ${targetBooking.vehicleNumber} at ${targetBooking.propertyTitle}.`,
      booking: updatedBooking
    });
    triggerBeep(true);
  };

  // Form Fields for Add/Edit
  const [title, setTitle] = useState('');
  const [type, setType] = useState<PropertyType>('both');
  const [photo, setPhoto] = useState(PRESET_MOCK_IMAGES[0].url);
  const [fare, setFare] = useState<number>(50);
  const [totalSlots, setTotalSlots] = useState<number>(10);
  const [address, setAddress] = useState('');
  const [city, setCity] = useState('Sasaram');
  const [description, setDescription] = useState('');
  const [lat, setLat] = useState<number>(24.9540);
  const [lng, setLng] = useState<number>(84.0142);
  
  // Amenities checklist
  const [amenities, setAmenities] = useState<string[]>(['CCTV Surveillance', '24/7 Access']);
  const [chargerTypes, setChargerTypes] = useState<string[]>(['CCS2 (Fast)', 'Type 2 AC']);
  const [hasPowerBackup, setHasPowerBackup] = useState<boolean>(true);

  const toggleAmenity = (name: string) => {
    if (amenities.includes(name)) {
      setAmenities(amenities.filter(a => a !== name));
    } else {
      setAmenities([...amenities, name]);
    }
  };

  const toggleCharger = (name: string) => {
    if (chargerTypes.includes(name)) {
      setChargerTypes(chargerTypes.filter(c => c !== name));
    } else {
      setChargerTypes([...chargerTypes, name]);
    }
  };

  // Pre-fill fields for editing
  const handleStartEdit = (prop: Property) => {
    setEditingPropId(prop.id);
    setTitle(prop.title);
    setType(prop.type);
    setPhoto(prop.photo);
    setFare(prop.fare);
    setTotalSlots(prop.totalSlots);
    setAddress(prop.location.address);
    setCity(prop.location.city);
    setDescription(prop.description);
    setLat(prop.location.lat);
    setLng(prop.location.lng);
    setAmenities(prop.amenities || []);
    setChargerTypes(prop.chargerTypes || []);
    setHasPowerBackup(prop.hasPowerBackup);
    
    setTab('new-listing');
    setError('');
  };

  const handleResetForm = () => {
    setEditingPropId(null);
    setTitle('');
    setType('both');
    setPhoto(PRESET_MOCK_IMAGES[0].url);
    setFare(50);
    setTotalSlots(10);
    setAddress('');
    setCity('Sasaram');
    setDescription('');
    setLat(24.9540 + (Math.random() - 0.5) * 0.08); // Random offset around center
    setLng(84.0142 + (Math.random() - 0.5) * 0.08);
    setAmenities(['CCTV Surveillance', '24/7 Access']);
    setChargerTypes(['CCS2 (Fast)']);
    setHasPowerBackup(true);
    setError('');
  };

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setSuccess('');

    if (!title.trim() || !address.trim() || !description.trim()) {
      setError('Please provide title, full street address, and description of the space.');
      return;
    }

    if (fare <= 0 || totalSlots <= 0) {
      setError('Fare and Slots amount must be practical values greater than zero.');
      return;
    }

    if (editingPropId) {
      // Find old approved state
      const oldProp = properties.find(p => p.id === editingPropId);
      const isApprovedState = oldProp ? oldProp.isApproved : false; // Keep approval or request re-approval

      const updated: Property = {
        id: editingPropId,
        title: title.trim(),
        type,
        photo,
        fare,
        rating: oldProp?.rating || 4.5,
        totalSlots,
        availableSlots: totalSlots, // reset availability to simplicity
        location: {
          lat,
          lng,
          address: address.trim(),
          city
        },
        description: description.trim(),
        amenities,
        chargerTypes: type !== 'parking' ? chargerTypes : [],
        hasPowerBackup,
        ownerId: currentOwner.id,
        isApproved: isApprovedState // Maintain approved or wait for admin check
      };

      onUpdateProperty(updated);
      setSuccess('Your property hub info was successfully updated!');
      setTab('listings');
      setEditingPropId(null);
    } else {
      // Create new listing
      const newProp: Property = {
        id: `prop-owner-${Math.random().toString(36).substring(2, 9)}`,
        title: title.trim(),
        type,
        photo,
        fare,
        rating: 4.5,
        totalSlots,
        availableSlots: totalSlots,
        location: {
          lat: 24.9540 + (Math.random() - 0.5) * 0.08, // Bihar random coordinate spreads
          lng: 84.0142 + (Math.random() - 0.5) * 0.08,
          address: address.trim(),
          city
        },
        description: description.trim(),
        amenities,
        chargerTypes: type !== 'parking' ? chargerTypes : [],
        hasPowerBackup,
        ownerId: currentOwner.id,
        isApproved: false // Starts as FALSE! Must be accepted on the administrator dashboard.
      };

      onAddProperty(newProp);
      setSuccess('Listing submitted! Once the App Admin approves, it will be visible to drivers.');
      setTab('listings');
    }

    handleResetForm();
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans">
      
      {/* Top Owner Header bar */}
      <header className="bg-slate-900 border-b border-slate-800 px-6 py-4 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
          
          <div className="flex items-center gap-2.5">
            <div className="bg-emerald-600/10 text-emerald-400 p-2 border border-emerald-500/20 rounded-xl">
              <Building className="w-5 h-5" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-sm font-black text-white">{currentOwner.name}</h1>
                <span className="text-[9px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-1.5 py-0.5 rounded font-bold uppercase tracking-wider">
                  Partner Member
                </span>
              </div>
              <p className="text-[10px] text-slate-400">Manage listings, adjust slots, view customer reservation books</p>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={() => { handleResetForm(); setTab('new-listing'); }}
              className="px-4 py-2 bg-emerald-600 text-white font-bold rounded-xl text-xs hover:bg-emerald-500 transition-all flex items-center gap-1 shrink-0"
            >
              <PlusCircle className="w-4 h-4" />
              <span>List New Hub</span>
            </button>

            <button
              onClick={onLogout}
              className="p-2 bg-slate-800 hover:bg-slate-700 hover:text-rose-400 text-slate-300 rounded-xl transition-all border border-slate-700/60"
              title="Logout Partner Portal"
            >
              <LogOut className="w-4 h-4" />
            </button>
          </div>

        </div>
      </header>

      {/* Internal Navigation Subtabs */}
      <div className="border-b border-slate-800/60 bg-slate-900/40 py-2.5 px-6">
        <div className="max-w-7xl mx-auto flex gap-4 text-xs font-bold">
          <button
            onClick={() => setTab('listings')}
            className={`pb-1 px-1 border-b-2 transition-all ${
              tab === 'listings' 
                ? 'border-emerald-500 text-emerald-400 font-extrabold' 
                : 'border-transparent text-slate-400 hover:text-slate-200'
            }`}
          >
            My Listing Spots ({myProps.length})
          </button>

          <button
            onClick={() => setTab('new-listing')}
            className={`pb-1 px-1 border-b-2 transition-all ${
              tab === 'new-listing' 
                ? 'border-emerald-500 text-emerald-400 font-extrabold' 
                : 'border-transparent text-slate-400 hover:text-slate-200'
            }`}
          >
            {editingPropId ? '🛠️ Modify Hub Space' : '➕ Register Space'}
          </button>

          <button
            onClick={() => setTab('bookings')}
            className={`pb-1 px-1 border-b-2 transition-all ${
              tab === 'bookings' 
                ? 'border-emerald-500 text-emerald-400 font-extrabold' 
                : 'border-transparent text-slate-400 hover:text-slate-200'
            }`}
          >
            Customer Bookings ({myBookings.length})
          </button>
        </div>
      </div>

      <main className="max-w-7xl mx-auto px-6 py-8">
        
        {/* Success / Error notification */}
        {success && (
          <div className="mb-6 p-4 bg-emerald-950/40 border border-emerald-800 text-emerald-300 rounded-xl text-xs flex items-center gap-2">
            <Check className="w-4 h-4 text-emerald-400" />
            <span>{success}</span>
          </div>
        )}

        {error && (
          <div className="mb-6 p-4 bg-rose-950/40 border border-rose-800 text-rose-300 rounded-xl text-xs flex items-center gap-2">
            <AlertTriangle className="w-4 h-4 text-rose-400" />
            <span>{error}</span>
          </div>
        )}

        {/* Tab 1: Listings overview */}
        {tab === 'listings' && (
          <div className="space-y-6">
            
            {myProps.length === 0 ? (
              <div className="bg-slate-900/60 border border-slate-800 p-12 rounded-3xl text-center max-w-lg mx-auto space-y-4">
                <Building className="w-12 h-12 text-slate-600 mx-auto" />
                <h3 className="font-extrabold text-white text-lg">No Properties Registered Yet</h3>
                <p className="text-slate-400 text-xs">
                  Begin earning passive income from vehicle charging and empty car park spaces in Bihar by registering a property listing now!
                </p>
                <button
                  onClick={() => setTab('new-listing')}
                  className="px-5 py-2.5 bg-emerald-600 text-white text-xs font-bold rounded-lg hover:bg-emerald-500 transition-all inline-flex items-center gap-1.5"
                >
                  <Plus className="w-4 h-4" />
                  <span>Setup Your First Listing</span>
                </button>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {myProps.map(prop => (
                  <div key={prop.id} className="bg-slate-900 border border-slate-800/80 rounded-2xl overflow-hidden hover:border-slate-700 transition-all flex flex-col relative">
                    
                    {/* Approval Sticker badge */}
                    <div className="absolute top-3 left-3 z-10">
                      {prop.isApproved ? (
                        <div className="bg-emerald-500 text-slate-950 px-2.5 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1 shadow-md">
                          <Check className="w-3.5 h-3.5 stroke-[3]" />
                          <span>Live & Approved</span>
                        </div>
                      ) : (
                        <div className="bg-amber-500 text-slate-950 px-2.5 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1 shadow-md animate-pulse">
                          <Hourglass className="w-3.5 h-3.5 stroke-[3]" />
                          <span>Awaiting App Admin Approval</span>
                        </div>
                      )}
                    </div>

                    {/* Property Image & Details */}
                    <div className="h-44 relative bg-slate-950">
                      <img 
                        src={prop.photo} 
                        alt={prop.title}
                        className="w-full h-full object-cover opacity-80"
                        onError={(e) => {
                          // Failover default
                          (e.target as HTMLImageElement).src = 'https://images.unsplash.com/photo-1542282088-72c9c27ed0cd?auto=format&fit=crop&q=80&w=800';
                        }} 
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent" />
                    </div>

                    <div className="p-5 flex-1 flex flex-col justify-between space-y-4">
                      
                      <div className="space-y-2">
                        <div className="flex justify-between items-start">
                          <h4 className="font-extrabold text-white text-base tracking-tight leading-snug">{prop.title}</h4>
                        </div>
                        <p className="text-slate-400 text-xs flex items-center gap-1 font-medium">
                          <MapPin className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
                          <span className="truncate">{prop.location.address}</span>
                        </p>
                      </div>

                      {/* Info grid */}
                      <div className="grid grid-cols-2 gap-2 text-center text-xs pb-3 border-b border-slate-800/60">
                        <div className="bg-slate-950/60 p-2 rounded-xl">
                          <span className="text-[9px] block text-slate-500 font-bold uppercase tracking-wider">Hourly Fare</span>
                          <span className="text-white font-black">₹{prop.fare}/hr</span>
                        </div>
                        <div className="bg-slate-950/60 p-2 rounded-xl">
                          <span className="text-[9px] block text-slate-500 font-bold uppercase tracking-wider">Total Slots</span>
                          <span className="text-white font-black">{prop.totalSlots} Slots</span>
                        </div>
                      </div>

                      <div className="space-y-1.5 pt-1">
                        <div className="flex justify-between text-[11px] text-slate-400 font-bold">
                          <span>Configuration:</span>
                          <span className="text-emerald-400 capitalize">{prop.type} Base</span>
                        </div>
                        {prop.chargerTypes && prop.chargerTypes.length > 0 && (
                          <div className="flex flex-wrap gap-1 leading-none">
                            {prop.chargerTypes.map((c, i) => (
                              <span key={i} className="text-[9px] bg-slate-950 text-emerald-400 border border-emerald-950 px-1.5 py-0.5 rounded font-mono">
                                🔧 {c}
                              </span>
                            ))}
                          </div>
                        )}
                      </div>

                      {/* Action controllers */}
                      <div className="flex gap-2.5 pt-2">
                        <button
                          onClick={() => handleStartEdit(prop)}
                          className="flex-1 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold text-xs rounded-xl transition-all flex items-center justify-center gap-1 border border-slate-700/50"
                        >
                          <Edit2 className="w-3.5 h-3.5 text-emerald-400" />
                          <span>Modify Spot</span>
                        </button>
                        
                        <button
                          onClick={() => {
                            if (window.confirm('Delete this Bihar hub listing permanently from database? This step cannot be rolled-back.')) {
                              onDeleteProperty(prop.id);
                              setSuccess('The property list slot has been purged successfully.');
                            }
                          }}
                          className="px-3 py-2 bg-slate-900 hover:bg-rose-950 hover:text-rose-400 text-slate-400 rounded-xl transition-all border border-slate-800/65"
                          title="Delete Listing"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>

                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* Tab 2: New/Edit Property listing Form */}
        {tab === 'new-listing' && (
          <div className="max-w-2xl mx-auto bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 space-y-6">
            
            <div className="border-b border-slate-800 pb-4">
              <h2 className="text-xl font-black text-white flex items-center gap-2">
                <span>{editingPropId ? '🛠️ Modify Hub Registered Details' : '➕ Register New Bihar Property/Charger Bay'}</span>
              </h2>
              <p className="text-xs text-slate-400">Provide accurate details to attract maximum local drivers searching for charging slots.</p>
            </div>

            <form onSubmit={handleFormSubmit} className="space-y-5 text-xs">
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-1.5 col-span-1 sm:col-span-2">
                  <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider">Spot Name / Title</label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. Sasaram Central Elite Parking & Fast Charge Center"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    className="w-full p-2.5 bg-slate-950 border border-slate-800 text-slate-100 rounded-xl focus:border-emerald-500 outline-none"
                  />
                </div>

                <div className="space-y-1.5">
                  <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider">Hub Purpose / Type</label>
                  <select
                    value={type}
                    onChange={(e) => setType(e.target.value as PropertyType)}
                    className="w-full p-2.5 bg-slate-950 border border-slate-800 text-slate-100 rounded-xl focus:border-emerald-500 outline-none font-bold"
                  >
                    <option value="both">Both Charging and parking slots</option>
                    <option value="charging">Charging Station only</option>
                    <option value="parking">Parking Garage only</option>
                  </select>
                </div>

                <div className="space-y-1.5">
                  <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider">Hourly Charge fee (₹ Rupees)</label>
                  <div className="relative">
                    <span className="absolute left-3 top-2.5 text-slate-400 font-bold">₹</span>
                    <input
                      type="number"
                      required
                      min={5}
                      value={fare}
                      onChange={(e) => setFare(Number(e.target.value))}
                      className="w-full pl-7 pr-3 py-2.5 bg-slate-950 border border-slate-800 text-slate-100 rounded-xl focus:border-emerald-500 outline-none font-bold"
                    />
                  </div>
                </div>

                <div className="space-y-1.5">
                  <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider">Total Slots Configured</label>
                  <input
                    type="number"
                    required
                    min={1}
                    value={totalSlots}
                    onChange={(e) => setTotalSlots(Number(e.target.value))}
                    className="w-full p-2.5 bg-slate-950 border border-slate-800 text-slate-100 rounded-xl focus:border-emerald-500 outline-none font-bold"
                  />
                </div>

                <div className="space-y-1.5">
                  <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider">City Location</label>
                  <input
                    type="text"
                    required
                    value={city}
                    onChange={(e) => setCity(e.target.value)}
                    className="w-full p-2.5 bg-slate-950 border border-slate-800 text-slate-100 rounded-xl focus:border-emerald-500 outline-none font-bold"
                  />
                </div>

                <div className="space-y-1.5 col-span-1 sm:col-span-2">
                  <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider">Full Street Address (Bihar Region)</label>
                  <input
                    type="text"
                    required
                    placeholder="e.g. Lane No. 34, Opp. Bank of Baroda, FC Road, Shivaji Nagar"
                    value={address}
                    onChange={(e) => setAddress(e.target.value)}
                    className="w-full p-2.5 bg-slate-950 border border-slate-800 text-slate-100 rounded-xl focus:border-emerald-500 outline-none"
                  />
                </div>
              </div>

              {/* Photo selection switcher presets */}
              <div className="space-y-2 bg-slate-950/40 p-3.5 rounded-2xl border border-slate-800/80">
                <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider flex items-center gap-1">
                  <Image className="w-3.5 h-3.5 text-emerald-400" />
                  <span>Choose Visual Banner preset</span>
                </label>
                <div className="grid grid-cols-2 gap-2">
                  {PRESET_MOCK_IMAGES.map((img, i) => (
                    <button
                      key={i}
                      type="button"
                      onClick={() => setPhoto(img.url)}
                      className={`p-1.5 rounded-lg border text-left flex items-center gap-1.5 transition-all outline-none text-[10px]
                        ${photo === img.url 
                          ? 'border-emerald-500 bg-emerald-900/15 text-emerald-400' 
                          : 'border-slate-800 bg-slate-900/60 text-slate-400 hover:border-slate-700'}`}
                    >
                      <div className="w-8 h-8 rounded bg-slate-800 overflow-hidden shrink-0">
                        <img src={img.url} alt="" className="w-full h-full object-cover" />
                      </div>
                      <span className="truncate font-bold">{img.label}</span>
                    </button>
                  ))}
                </div>
                
                <div className="pt-1.5">
                  <span className="text-[9px] text-slate-500 font-mono italic">Or specify custom picture address link path:</span>
                  <input
                    type="text"
                    value={photo}
                    onChange={(e) => setPhoto(e.target.value)}
                    className="w-full mt-1 p-2 bg-slate-950 border border-slate-800 text-slate-200 rounded-lg text-[10px] font-mono outline-none"
                  />
                </div>
              </div>

              {/* Description */}
              <div className="space-y-1.5">
                <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider">Public Description</label>
                <textarea
                  required
                  rows={3}
                  placeholder="Tell customers about location landmarks, parking floor maps, waiting facilities, tea options, etc..."
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  className="w-full p-2.5 bg-slate-950 border border-slate-800 text-slate-100 rounded-xl focus:border-emerald-500 outline-none leading-relaxed"
                />
              </div>

              {/* Amenities */}
              <div className="space-y-2">
                <label className="block text-[10px] uppercase font-bold text-slate-400 tracking-wider">Include Features & Amenities</label>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
                  {['CCTV Surveillance', '24/7 Gate Guard', 'Restroom', 'Free Wi-Fi Cafe', 'Solar Powered Roof', 'Covered Indoor Garage', 'Elevator Access', 'Wheelchair Ramp'].map((amenity) => (
                    <button
                      key={amenity}
                      type="button"
                      onClick={() => toggleAmenity(amenity)}
                      className={`p-2 rounded-xl text-left border flex items-center justify-between transition-all outline-none
                        ${amenities.includes(amenity)
                          ? 'border-emerald-500/80 bg-emerald-500/10 text-emerald-400' 
                          : 'border-slate-800 bg-slate-950 text-slate-400 hover:border-slate-800'}`}
                    >
                      <span className="font-bold truncate">{amenity}</span>
                      {amenities.includes(amenity) && <Check className="w-3.5 h-3.5 text-emerald-400 shrink-0" />}
                    </button>
                  ))}
                </div>
              </div>

              {/* Power Backup switch */}
              <div className="bg-slate-950/40 p-3.5 border border-slate-800/80 rounded-2xl flex items-center justify-between">
                <div>
                  <span className="font-extrabold text-white block">Power Backup Diesel Generators</span>
                  <span className="text-[10px] text-slate-400">Enable this if your Bihar station has an active diesel backup system to safeguard constant current output during load shedding.</span>
                </div>
                <button
                  type="button"
                  onClick={() => setHasPowerBackup(!hasPowerBackup)}
                  className={`px-4 py-1.5 rounded-full font-bold text-[10px] uppercase transition-all
                    ${hasPowerBackup 
                      ? 'bg-emerald-500 text-slate-950' 
                      : 'bg-slate-800 text-slate-400 border border-slate-700'}`}
                >
                  {hasPowerBackup ? 'Active Generator' : 'No Backup'}
                </button>
              </div>

              {/* Charger configurations option (Only visible if not parking-only) */}
              {type !== 'parking' && (
                <div className="space-y-2 border border-slate-800/80 p-4 bg-slate-950/30 rounded-2xl">
                  <label className="block text-[10px] uppercase font-bold text-emerald-400 tracking-wider">🔧 Supported Charger Ports</label>
                  <p className="text-[10px] text-slate-400 mb-2">Check the specific power plugins and ports installed at this location:</p>
                  
                  <div className="grid grid-cols-2 gap-2">
                    {['CCS2 (50kW Fast)', 'CCS2 (150kW Dual-Gun)', 'Type 2 AC (22kW)', 'GB/T DC Port', 'LEV Plug (3-Pin Normal)', 'Tesla Plugs Charger'].map((charger) => (
                      <button
                        key={charger}
                        type="button"
                        onClick={() => toggleCharger(charger)}
                        className={`p-2 rounded-lg text-left border flex items-center justify-between transition-all outline-none text-[11px]
                          ${chargerTypes.includes(charger)
                            ? 'border-emerald-500/80 bg-emerald-500/10 text-emerald-400 font-extrabold' 
                            : 'border-slate-800 bg-slate-950/50 text-slate-400'}`}
                      >
                        <span>{charger}</span>
                        {chargerTypes.includes(charger) && <Check className="w-3.5 h-3.5 text-emerald-400 shrink-0" />}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {/* Action buttons */}
              <div className="flex gap-3 pt-4 border-t border-slate-800">
                <button
                  type="button"
                  onClick={handleResetForm}
                  className="flex-1 py-3 bg-slate-800 hover:bg-slate-700 font-bold rounded-xl text-slate-300 transition-all"
                >
                  Reset Form
                </button>

                <button
                  type="submit"
                  className="flex-1 py-3 bg-emerald-600 hover:bg-emerald-500 font-black text-white rounded-xl transition-all shadow-md shadow-emerald-950 text-sm"
                >
                  {editingPropId ? '🛠️ Save Updates' : '📡 Submit to Admin Board'}
                </button>
              </div>

            </form>
          </div>
        )}

        {/* Tab 3: Customer Reservation log bookings */}
        {tab === 'bookings' && (
          <div className="space-y-6">
            
            {/* High-tech Gatekeeper Scan Desk Console card */}
            <div className="bg-slate-900 border border-emerald-500/30 rounded-2xl p-5 shadow-lg relative overflow-hidden flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
              <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/5 rounded-full blur-2xl -mr-16 -mt-16 pointer-events-none"></div>
              
              <div className="space-y-1.5 z-10">
                <div className="flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse inline-block"></span>
                  <span className="text-[10px] text-slate-400 font-bold uppercase tracking-widest font-mono">Gatekeeper Check-In Desk</span>
                </div>
                <h3 className="text-base md:text-lg font-black text-white tracking-tight flex items-center gap-1.5">
                  <Camera className="w-5 h-5 text-emerald-400" /> Verify Drive-In Arrival via QR Code
                </h3>
                <p className="text-xs text-slate-400 max-w-xl">
                  Quickly inspect entry permits and charging credentials on-arrival. Use the live simulation camera to scan the driver's phone receipt QR code or type their license ticket.
                </p>
              </div>

              <div className="shrink-0 z-10 flex gap-2 w-full md:w-auto">
                <button
                  type="button"
                  onClick={() => {
                    setVerificationFeedback(null);
                    setScannedCodeInput('');
                    setSelectedSimulatedBookingId('');
                    setShowScannerModal(true);
                  }}
                  className="w-full md:w-auto px-5 py-3 bg-emerald-500 text-slate-950 hover:bg-emerald-400 font-extrabold text-xs rounded-xl shadow-lg shadow-emerald-950/40 tracking-tight flex items-center justify-center gap-2 transition-all outline-none"
                >
                  <Scan className="w-4 h-4 animate-pulse stroke-[2.5]" />
                  <span>Launch QR Scanner Console</span>
                </button>
              </div>
            </div>

            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
              <h3 className="text-base font-black text-white">Registered Customer Slots</h3>
              <div className="flex items-center gap-2">
                <span className="bg-slate-800 text-slate-300 font-bold text-[10px] px-2 py-0.5 rounded-full">
                  Confirmed: {myBookings.filter(b => b.status === 'Confirmed').length}
                </span>
                <span className="bg-emerald-950/60 text-emerald-400 border border-emerald-500/20 font-bold text-[10px] px-2 py-0.5 rounded-full">
                  Completed: {myBookings.filter(b => b.status === 'Completed').length}
                </span>
              </div>
            </div>

            {myBookings.length === 0 ? (
              <div className="bg-slate-900/60 border border-slate-800 p-12 rounded-2xl text-center max-w-sm mx-auto space-y-2">
                <Calendar className="w-8 h-8 text-slate-600 mx-auto" />
                <span className="font-extrabold text-white text-sm block">No Booking History Found</span>
                <p className="text-slate-400 text-xs">Once verified Bihar drivers reserve slots on your locations, their digital receipts will stream here instantly.</p>
              </div>
            ) : (
              <div className="space-y-3">
                {myBookings.map((bk) => (
                  <div key={bk.id} className="bg-slate-900 border border-slate-800 rounded-2xl p-4 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                    
                    <div className="space-y-1.5 flex-1">
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="text-sm font-black text-white">{bk.userName}</span>
                        <span className="text-[10px] text-slate-400">({bk.userEmail})</span>
                        <span className="text-[10px] bg-slate-800 border border-slate-700/80 px-2 py-0.5 rounded text-amber-400 font-bold font-mono">
                          {bk.vehicleNumber}
                        </span>
                      </div>
                      
                      <p className="text-xs text-slate-300 font-medium font-mono">
                        📍 Property: <span className="font-sans font-bold text-teal-400">{bk.propertyTitle}</span>
                      </p>

                      <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-[10px] pt-1">
                        <span className="text-slate-400">📅 Date: <strong className="text-slate-200">{bk.bookingDate}</strong></span>
                        <span className="text-slate-400">⏰ Clock: <strong className="text-slate-200">{bk.timeSlot}</strong></span>
                        <span className="text-slate-400">🚗 Type: <strong className="text-slate-200">{bk.vehicleType}</strong></span>
                        <span className="text-slate-400">🕒 duration: <strong className="text-slate-200">{bk.totalHours} hrs</strong></span>
                      </div>

                      {/* Display QR ID and state */}
                      <div className="flex items-center gap-2 pt-1">
                        <span className="text-[9px] font-bold text-slate-500 uppercase tracking-wider font-mono">Permit Code:</span>
                        <span className="text-[10px] font-mono font-bold text-emerald-400 bg-emerald-950/80 border border-emerald-900/60 px-1.5 py-0.2 rounded">
                          {bk.id}
                        </span>
                      </div>
                    </div>

                    <div className="flex md:flex-col items-end gap-2 shrink-0 border-t md:border-t-0 border-slate-800 pt-3 md:pt-0 w-full md:w-auto">
                      <div className="flex items-center gap-1.5">
                        <span className="text-xs text-slate-400">Earnings:</span>
                        <span className="text-sm font-black text-emerald-400 flex items-center"><IndianRupee className="w-3.5 h-3.5" />{bk.totalFare}</span>
                      </div>

                      <div className="flex flex-wrap gap-2 items-center justify-end">
                        <span className={`text-[9px] px-2 py-0.5 rounded font-black uppercase border
                          ${bk.paymentStatus === 'Paid' 
                            ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400' 
                            : 'bg-amber-500/10 border-amber-500/30 text-amber-400'}`}>
                          Payment: {bk.paymentMethod === 'COD' ? 'Arrival COD' : 'Online Paid'} ({bk.paymentMethod})
                        </span>

                        <span className={`text-[9px] px-2 py-0.5 rounded font-black uppercase border
                          ${bk.status === 'Completed' 
                            ? 'bg-emerald-500/20 border-emerald-500/30 text-emerald-400' 
                            : 'bg-indigo-500/10 border-indigo-500/30 text-indigo-400'}`}>
                          {bk.status === 'Completed' ? '✓ Checked In' : bk.status}
                        </span>
                      </div>

                      {/* Quick Arrival CheckIn button action */}
                      {bk.status === 'Confirmed' && (
                        <button
                          type="button"
                          onClick={() => {
                            setVerificationFeedback(null);
                            setScannedCodeInput(bk.id);
                            setSelectedSimulatedBookingId(bk.id);
                            setShowScannerModal(true);
                            // Directly fire check in or prompt simulation
                          }}
                          className="mt-1.5 text-[10px] font-black bg-slate-800 hover:bg-emerald-600 hover:text-slate-950 text-emerald-400 px-2.5 py-1 rounded transition-colors border border-slate-700 hover:border-emerald-500 flex items-center gap-1 font-mono uppercase tracking-tight"
                        >
                          <QrCode className="w-3.5 h-3.5 shrink-0" />
                          <span>Scan Check-In</span>
                        </button>
                      )}
                    </div>

                  </div>
                ))}
              </div>
            )}

            <div className="bg-slate-900/40 p-4 border border-dashed border-slate-800 rounded-2xl flex items-start gap-3 mt-4 text-[11px] text-slate-400">
              <ShieldAlert className="w-4 h-4 text-emerald-400 shrink-0" />
              <span>Earnings payouts are processed automatically each Sunday afternoon. Make sure your business bank details are kept up-to-date in your physical owner contract agreements.</span>
            </div>
          </div>
        )}

      </main>

      {/* ================= HIGH TECH QR ARRIVAL SCANNER MODAL ================= */}
      {showScannerModal && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/90 flex items-center justify-center p-4 backdrop-blur-sm">
          <div className="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full overflow-hidden shadow-2xl relative text-left">
            
            {/* Modal Header */}
            <div className="border-b border-slate-800 px-6 py-4 flex items-center justify-between bg-slate-950/60">
              <div className="flex items-center gap-2">
                <div className="bg-emerald-500/10 p-1.5 rounded-lg border border-emerald-500/25">
                  <Scan className="w-5 h-5 text-emerald-400 animate-pulse" />
                </div>
                <div>
                  <h3 className="text-sm font-black text-white">QR Code Gatekeeping Scanner</h3>
                  <p className="text-[10px] text-slate-400">Owner Terminal & Arrival Verifier</p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => {
                  setShowScannerModal(false);
                  setVerificationFeedback(null);
                }}
                className="p-1 px-2 text-slate-400 hover:text-slate-200 hover:bg-slate-800 rounded-lg text-sm font-bold font-mono transition-colors"
              >
                ✕ Close
              </button>
            </div>

            <div className="p-6 space-y-6">
              
              {/* Scan Mode Subtabs: Camera vs Manual keypad */}
              <div className="grid grid-cols-2 gap-1 bg-slate-950 p-1 rounded-xl select-none text-[11px] font-bold border border-slate-855">
                <button
                  type="button"
                  onClick={() => {
                    setScanTab('camera');
                    setVerificationFeedback(null);
                  }}
                  className={`py-2 rounded-lg text-center transition-all ${
                    scanTab === 'camera' 
                      ? 'bg-slate-800 text-white border border-slate-700/60' 
                      : 'text-slate-500 hover:text-slate-300'
                  }`}
                >
                  🎥 Live Camera Simulation
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setScanTab('manual');
                    setVerificationFeedback(null);
                  }}
                  className={`py-2 rounded-lg text-center transition-all ${
                    scanTab === 'manual' 
                      ? 'bg-slate-800 text-white border border-slate-700/60' 
                      : 'text-slate-500 hover:text-slate-300'
                  }`}
                >
                  ⌨️ Manual Keypad Permit
                </button>
              </div>

              {verificationFeedback ? (
                /* Verification Result Screen (Feedback) */
                <div className="space-y-4">
                  {verificationFeedback.type === 'success' ? (
                    <div className="p-5 bg-emerald-950/20 border border-emerald-500/30 rounded-2xl text-center space-y-3.5">
                      <div className="w-14 h-14 bg-emerald-500 text-slate-950 font-extrabold rounded-full flex items-center justify-center mx-auto text-xl shadow-lg shadow-emerald-500/20">
                        ✓
                      </div>
                      <div className="space-y-1">
                        <h4 className="font-bold text-emerald-400 text-sm">Arrival Code Verified Successfully</h4>
                        <p className="text-[11px] text-slate-300 leading-relaxed font-sans mt-1.5 px-2">
                          {verificationFeedback.message}
                        </p>
                      </div>

                      {verificationFeedback.booking && (
                        <div className="bg-slate-950/90 border border-slate-800/80 p-3.5 rounded-xl text-left text-xs font-mono space-y-2.5">
                          <div className="border-b border-slate-850 pb-2 flex justify-between items-center text-[10px] text-slate-400">
                            <span>TICKET RECEIPT DETAILS:</span>
                            <span className="font-extrabold text-emerald-400 uppercase">Status: Checked In</span>
                          </div>
                          
                          <div className="grid grid-cols-2 gap-3">
                            <div>
                              <span className="text-[9px] text-slate-500 block leading-none">DRIVER NAME</span>
                              <span className="text-slate-200 font-bold font-sans mt-1 block">{verificationFeedback.booking.userName}</span>
                            </div>
                            <div>
                              <span className="text-[9px] text-slate-500 block leading-none">VEHICLE PLATE</span>
                              <span className="text-amber-400 font-black mt-1 block">{verificationFeedback.booking.vehicleNumber}</span>
                            </div>
                            <div>
                              <span className="text-[9px] text-slate-500 block leading-none">TIME SLOT BOOKED</span>
                              <span className="text-slate-200 mt-1 block">{verificationFeedback.booking.timeSlot}</span>
                            </div>
                            <div>
                              <span className="text-[9px] text-slate-500 block leading-none">TOTAL FARE PAID</span>
                              <span className="text-emerald-400 font-black mt-1 block">₹{verificationFeedback.booking.totalFare}</span>
                            </div>
                          </div>
                        </div>
                      )}

                      <button
                        type="button"
                        onClick={() => {
                          setVerificationFeedback(null);
                          setScannedCodeInput('');
                          setSelectedSimulatedBookingId('');
                        }}
                        className="w-full py-2.5 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-black text-xs rounded-xl transition-all font-mono uppercase tracking-tight"
                      >
                        ← Scan Next Vehicle
                      </button>
                    </div>
                  ) : (
                    <div className="p-5 bg-rose-950/20 border border-rose-500/30 rounded-2xl text-center space-y-3.5">
                      <div className="w-14 h-14 bg-rose-500 text-slate-950 font-extrabold rounded-full flex items-center justify-center mx-auto text-xl shadow-lg shadow-rose-500/20">
                        ✕
                      </div>
                      <div className="space-y-1">
                        <h4 className="font-bold text-rose-400 text-sm">Security Error & Validation Denial</h4>
                        <p className="text-[11px] text-slate-300 leading-relaxed font-sans mt-1.5 px-2">
                          {verificationFeedback.message}
                        </p>
                      </div>

                      <button
                        type="button"
                        onClick={() => {
                          setVerificationFeedback(null);
                          setScannedCodeInput('');
                        }}
                        className="w-full py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-200 font-black text-xs rounded-xl transition-colors font-mono uppercase tracking-tight"
                      >
                        Try Scanning Again
                      </button>
                    </div>
                  )}
                </div>
              ) : (
                /* Interactive Input Tabs */
                <div className="space-y-5">
                  {scanTab === 'camera' ? (
                    <div className="space-y-4">
                      
                      {/* Stylized camera viewport simulation */}
                      <div className="relative bg-slate-950 rounded-2xl aspect-video overflow-hidden border border-slate-800 flex flex-col justify-center items-center">
                        
                        {/* Shimmer Scan Line Animation */}
                        <div className="absolute inset-x-0 h-0.5 bg-emerald-500 shadow-[0_0_10px_#10b981] animate-bounce top-1/4 pointer-events-none z-10"></div>
                        
                        {/* Target Grid corner markers */}
                        <div className="absolute top-8 left-8 w-6 h-6 border-t-4 border-l-4 border-emerald-400 rounded-tl-md pointer-events-none"></div>
                        <div className="absolute top-8 right-8 w-6 h-6 border-t-4 border-r-4 border-emerald-400 rounded-tr-md pointer-events-none"></div>
                        <div className="absolute bottom-8 left-8 w-6 h-6 border-b-4 border-l-4 border-emerald-400 rounded-bl-md pointer-events-none"></div>
                        <div className="absolute bottom-8 right-8 w-6 h-6 border-b-4 border-r-4 border-emerald-400 rounded-br-md pointer-events-none"></div>

                        {isSimulatingScan ? (
                          <div className="text-center space-y-3 z-10">
                            <span className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-emerald-500 border-t-transparent"></span>
                            <span className="block text-xs font-black font-mono text-emerald-400 tracking-wider animate-pulse uppercase">READING QR PLUG CODE...</span>
                          </div>
                        ) : (
                          <div className="text-center space-y-2 z-10 pointer-events-none max-w-xs p-4">
                            <QrCode className="w-10 h-10 text-slate-700 mx-auto" />
                            <span className="block text-xs font-bold text-slate-400">Position Driver's QR Code inside target window</span>
                            <span className="block text-[9px] text-slate-500 font-mono italic">Simulated CCTV Lens #01 - Active</span>
                          </div>
                        )}
                      </div>

                      {/* Selectable triggers to easily test camera scans */}
                      <div className="space-y-2 bg-slate-950 p-4 border border-slate-850 rounded-2xl">
                        <label className="block text-[10px] font-bold uppercase tracking-wider text-slate-400">
                          Select Driver Booking to simulate QR capture
                        </label>
                        <select
                          className="w-full p-2.5 bg-slate-900 border border-slate-800 text-slate-200 rounded-xl text-xs font-semibold focus:outline-none focus:border-emerald-500"
                          value={selectedSimulatedBookingId}
                          onChange={(e) => setSelectedSimulatedBookingId(e.target.value)}
                        >
                          <option value="">-- Choose Active Driver Booking --</option>
                          {bookings.filter(b => b.status === 'Confirmed').length === 0 ? (
                            <option disabled value="">No active Confirmed bookings to scan</option>
                          ) : (
                            bookings.filter(b => b.status === 'Confirmed').map((bk) => (
                              <option key={bk.id} value={bk.id}>
                                {bk.id} • {bk.userName} ({bk.vehicleNumber}) at {bk.propertyTitle}
                              </option>
                            ))
                          )}
                        </select>
                        <p className="text-[9px] text-slate-500">
                          *Since this runs inside standard sandboxed previews, select a receipt to simulate camera scanning rather than showing a static stream.
                        </p>
                      </div>

                      <button
                        type="button"
                        disabled={!selectedSimulatedBookingId || isSimulatingScan}
                        onClick={() => {
                          setIsSimulatingScan(true);
                          setTimeout(() => {
                            setIsSimulatingScan(false);
                            handleVerifyCheckIn(selectedSimulatedBookingId);
                          }, 1600);
                        }}
                        className={`w-full py-3 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-black text-xs rounded-xl transition-all shadow-lg shadow-emerald-950/20 font-mono uppercase tracking-wider flex items-center justify-center gap-2
                          ${(!selectedSimulatedBookingId || isSimulatingScan) ? 'opacity-40 cursor-not-allowed bg-slate-800 text-slate-500' : ''}`}
                      >
                        <Camera className="w-4 h-4" />
                        <span>Simulate Camera QR Scan Capture</span>
                      </button>

                    </div>
                  ) : (
                    <form 
                      onSubmit={(e) => {
                        e.preventDefault();
                        handleVerifyCheckIn(scannedCodeInput);
                      }}
                      className="space-y-4"
                    >
                      <div className="space-y-1.5 text-left">
                        <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                          Enter Driver's unique Permit Passcode
                        </label>
                        <input
                          type="text"
                          required
                          placeholder="e.g. CP-628174"
                          value={scannedCodeInput}
                          onChange={(e) => setScannedCodeInput(e.target.value)}
                          className="w-full p-3 bg-slate-950 border border-slate-800 text-amber-400 rounded-xl text-center text-sm font-bold font-mono tracking-widest outline-none uppercase focus:border-amber-500"
                        />
                        <p className="text-[9px] text-slate-500 text-left">
                          Type in the alphanumeric passcode located printed right underneath the transaction QR receipt.
                        </p>
                      </div>

                      <button
                        type="submit"
                        className="w-full py-3 bg-emerald-600 hover:bg-emerald-500 text-white font-black text-xs rounded-xl font-mono uppercase tracking-wider flex items-center justify-center gap-1.5"
                      >
                        <CheckCircle className="w-4 h-4" />
                        <span>Verify alphanumeric permit</span>
                      </button>
                    </form>
                  )}
                </div>
              )}

            </div>
          </div>
        </div>
      )}

    </div>
  );
}

