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

import React, { useState, useEffect } from 'react';
import {
  Building2,
  Store,
  Bike,
  Check,
  Copy,
  Plus,
  ArrowRight,
  ArrowLeft,
  ShieldAlert,
  Loader2,
  Mail,
  Phone,
  FileText,
  MapPin,
  Clock,
  Navigation
} from 'lucide-react';
import {
  useFiestaCreateTenant,
  useFiestaCreateLocation,
  useFiestaCreateUser,
  useFiestaRiderShifts,
  useFiestaTenantLocations,
  useFiestaAllTenants
} from '../services/fiestaQueries';
import { FIESTA_TENANT_ID, str as fstr, num as fnum } from '../services/fiestaApi';

export default function AdminConsole({ activeTab: propActiveTab, showHeader = true, onBack, tenantId }: { activeTab?: 'tenant' | 'store' | 'rider', showHeader?: boolean, onBack?: () => void, tenantId?: number }) {
  const [activeTab, setActiveTab] = useState<'tenant' | 'store' | 'rider'>(propActiveTab || 'tenant');

  useEffect(() => {
    if (propActiveTab) {
      setActiveTab(propActiveTab);
    }
  }, [propActiveTab]);

  // Mutations & Queries
  const createTenantMut = useFiestaCreateTenant();
  const createLocationMut = useFiestaCreateLocation();
  const createUserMut = useFiestaCreateUser();
  const shiftsQ = useFiestaRiderShifts();
  const tenantsQ = useFiestaAllTenants({ pagesize: 100 });

  // ----------------------------------------------------
  // Form State: Tenant Onboarding
  // ----------------------------------------------------
  const TENANT_FORM_INITIAL = {
    tenantname: '',
    companyname: '',
    primarycontact: '',
    primaryemail: '',
    address: '',
    suburb: '',
    city: 'Coimbatore',
    state: 'Tamil Nadu',
    postcode: '',
    // Primary outlet — created in the same call as the tenant, so a fresh
    // tenant is never left without a location to actually operate from.
    locationname: '',
    // 1 Food & Dining, 2 Grocery & Daily, 3 Pharmacy, 4 Retail — the same
    // categories categoryName() in fiestaMappers.ts already displays.
    categoryid: 2,
    applocationid: 1,
  };
  const [tenantForm, setTenantForm] = useState(TENANT_FORM_INITIAL);
  const [tenantSuccess, setTenantSuccess] = useState<any>(null);

  // ----------------------------------------------------
  // Form State: Store Onboarding
  // ----------------------------------------------------
  const [storeForm, setStoreForm] = useState({
    tenantid: tenantId || FIESTA_TENANT_ID,
    locationname: '',
    address: '',
    suburb: '',
    city: 'Coimbatore',
    state: 'Tamil Nadu',
    postcode: '',
    contactno: '',
    email: '',
    opentime: '06:00:00',
    closetime: '22:00:00',
    deliverymins: 45,
    deliveryradius: 5000, // in meters
  });

  useEffect(() => {
    if (tenantId) {
      setStoreForm(prev => ({ ...prev, tenantid: tenantId }));
    }
  }, [tenantId]);

  const [storeSuccess, setStoreSuccess] = useState<any>(null);

  const currentTenantObj = (tenantsQ.data || []).find((t) => Number(t.tenantid) === Number(storeForm.tenantid));
  const tenantNameDisplay = currentTenantObj ? `${fstr(currentTenantObj.tenantname)} (#${fstr(currentTenantObj.tenantid)})` : `Tenant #${storeForm.tenantid}`;

  // ----------------------------------------------------
  // Form State: Rider Onboarding
  // ----------------------------------------------------
  const [riderForm, setRiderForm] = useState({
    firstname: '',
    lastname: '',
    email: '',
    contactno: '',
    password: 'Rider@123',
    locationid: 0,
    shiftid: 0,
    vehiclename: '',
    vehiclemodel: '',
    licensenumber: '',
  });
  const [riderSuccess, setRiderSuccess] = useState<any>(null);
  const [copiedSql, setCopiedSql] = useState(false);

  const handleCopySql = () => {
    if (!riderSuccess?.sql) return;
    navigator.clipboard.writeText(riderSuccess.sql);
    setCopiedSql(true);
    setTimeout(() => setCopiedSql(false), 2000);
  };

  // ----------------------------------------------------
  // Submissions
  // ----------------------------------------------------
  const handleTenantSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!tenantForm.tenantname || !tenantForm.companyname || !tenantForm.primarycontact || !tenantForm.primaryemail || !tenantForm.locationname) {
      alert('Kindly fill in all required fields.');
      return;
    }
    try {
      const res = await createTenantMut.mutateAsync({
        ...tenantForm,
        approved: 1,
        status: 'Active',
        // Reuses the tenant's own address for its primary location — a
        // freshly onboarded single-location merchant's outlet address is
        // the same as their registered one.
        tenantlocations: {
          locationname: tenantForm.locationname,
          email: tenantForm.primaryemail,
          contactno: tenantForm.primarycontact,
          address: tenantForm.address,
          suburb: tenantForm.suburb,
          city: tenantForm.city,
          state: tenantForm.state,
          postcode: tenantForm.postcode,
          applocationid: tenantForm.applocationid,
        },
      });
      setTenantSuccess(res);
      alert('Tenant Onboarded successfully!');
    } catch (err: any) {
      alert(err.message || 'Failed to onboard tenant.');
    }
  };

  const handleStoreSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!storeForm.locationname) {
      alert('Location Name is required.');
      return;
    }
    try {
      const res = await createLocationMut.mutateAsync({
        ...storeForm,
        status: 'Active',
        moduleid: 2,
        applocationid: 1,
        partnerid: 1,
        roleid: 4,
      });
      setStoreSuccess(res);
      alert('Store Location created successfully!');
    } catch (err: any) {
      alert(err.message || 'Failed to create store location.');
    }
  };

  const handleRiderSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!riderForm.firstname || !riderForm.email || !riderForm.contactno || !riderForm.locationid) {
      alert('Please fill out the Rider personal details and assign a store.');
      return;
    }
    try {
      // Create base user with roleid = 3 and configid = 6 (Rider config)
      const res = await createUserMut.mutateAsync({
        firstname: riderForm.firstname,
        lastname: riderForm.lastname,
        email: riderForm.email,
        contactno: riderForm.contactno,
        password: riderForm.password,
        roleid: 3,
        configid: 6,
        tenantid: FIESTA_TENANT_ID,
        locationid: Number(riderForm.locationid),
        applocationid: 1,
        status: 'active',
      });

      const newUserId = res.userid || Math.floor(Math.random() * 9000) + 1000;
      const vehicleName = riderForm.vehiclename || 'Standard delivery bike';
      const licenseNum = riderForm.licensenumber || 'TN-37-XX-XXXX';
      const vehicleModel = riderForm.vehiclemodel || 'Electric Scooter';
      const shiftId = Number(riderForm.shiftid) || 0;

      // Generate the SQL script needed to make the rider fully operational in the DB
      const sqlScript = `-- ----------------------------------------------------
-- Administrative SQL Script for Rider Activation
-- User ID: #${newUserId} (${riderForm.firstname})
-- ----------------------------------------------------

-- 1. Insert Vehicle & License Settings into 'ridersettings'
INSERT INTO ridersettings (userid, vehiclename, vehicleinfo, licensenumber, shiftid)
VALUES (${newUserId}, '${vehicleName}', '${vehicleModel}', '${licenseNum}', ${shiftId});

-- 2. Add Rider to Availability Pool & set On-Duty in 'app_userpools'
INSERT INTO app_userpools (userid, onduty, status, lastupdate)
VALUES (${newUserId}, 1, 'Active', NOW());
`;

      setRiderSuccess({
        user: res,
        sql: sqlScript,
        userid: newUserId,
      });

      alert('Rider User created in app_users! SQL Script generated below.');
    } catch (err: any) {
      alert(err.message || 'Failed to create rider user.');
    }
  };

  // Retrieve active locations to assign riders / stores
  const locationsQ = useFiestaTenantLocations(FIESTA_TENANT_ID);
  const locations = locationsQ.data || [];

  if (!showHeader) {
    return (
      <div className="space-y-gutter w-full">
        {/* TAB 1: Tenant Onboarding */}
        {activeTab === 'tenant' && (
          <div className="bg-white border border-slate-200/60 p-6 rounded-2xl shadow-sm space-y-6">
            <div>
              <h3 className="text-lg font-bold text-slate-900">Provision New Merchant Tenant</h3>
              <p className="text-slate-500 text-xs mt-1">
                Onboard a new merchant group. This registers their enterprise, defaults the order serialization, and spawns the primary Administrator account.
              </p>
            </div>

            {tenantSuccess ? (
              <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-6 text-center space-y-4">
                <div className="w-12 h-12 rounded-full bg-emerald-550 text-white flex items-center justify-center mx-auto text-xl font-bold">✓</div>
                <h4 className="font-bold text-emerald-900 text-base">Onboarding Complete!</h4>
                <p className="text-xs text-emerald-700 max-w-md mx-auto">
                  Tenant <strong>{tenantForm.tenantname}</strong> has been provisioned. An administrator account has been dispatched with credentials tied to <strong>{tenantForm.primaryemail}</strong>.
                </p>
                <button
                  type="button"
                  onClick={() => { setTenantSuccess(null); setTenantForm(TENANT_FORM_INITIAL); }}
                  className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider px-5 py-2.5 rounded-lg border-none cursor-pointer"
                >
                  Onboard Another Tenant
                </button>
              </div>
            ) : (
              <form onSubmit={handleTenantSubmit} className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Merchant Name (*)</label>
                    <input
                      type="text"
                      placeholder="e.g. Kaveri Groceries"
                      value={tenantForm.tenantname}
                      onChange={(e) => setTenantForm({ ...tenantForm, tenantname: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      required
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Company Registered Name (*)</label>
                    <input
                      type="text"
                      placeholder="e.g. Kaveri Retail Pvt. Ltd."
                      value={tenantForm.companyname}
                      onChange={(e) => setTenantForm({ ...tenantForm, companyname: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      required
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Primary Phone Number (*)</label>
                    <input
                      type="text"
                      maxLength={10}
                      placeholder="e.g. 9876543210"
                      value={tenantForm.primarycontact}
                      onChange={(e) => setTenantForm({ ...tenantForm, primarycontact: e.target.value.replace(/\D/g, '') })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      required
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Primary Admin Email (*)</label>
                    <input
                      type="email"
                      placeholder="e.g. admin@kaveri.com"
                      value={tenantForm.primaryemail}
                      onChange={(e) => setTenantForm({ ...tenantForm, primaryemail: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      required
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Primary Outlet Name (*)</label>
                    <input
                      type="text"
                      placeholder="e.g. Kaveri Groceries - Main Branch"
                      value={tenantForm.locationname}
                      onChange={(e) => setTenantForm({ ...tenantForm, locationname: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      required
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Business Category</label>
                    <select
                      value={tenantForm.categoryid}
                      onChange={(e) => setTenantForm({ ...tenantForm, categoryid: Number(e.target.value) })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800 cursor-pointer"
                    >
                      <option value={1}>Food & Dining</option>
                      <option value={2}>Grocery & Daily</option>
                      <option value={3}>Pharmacy</option>
                      <option value={4}>Retail</option>
                    </select>
                  </div>
                </div>

                <div className="space-y-1">
                  <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">HQ Street Address</label>
                  <input
                    type="text"
                    placeholder="e.g. 12, Avinashi Road"
                    value={tenantForm.address}
                    onChange={(e) => setTenantForm({ ...tenantForm, address: e.target.value })}
                    className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                  />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Suburb</label>
                    <input
                      type="text"
                      placeholder="e.g. Peelamedu"
                      value={tenantForm.suburb}
                      onChange={(e) => setTenantForm({ ...tenantForm, suburb: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">City</label>
                    <input
                      type="text"
                      value={tenantForm.city}
                      onChange={(e) => setTenantForm({ ...tenantForm, city: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">State</label>
                    <input
                      type="text"
                      value={tenantForm.state}
                      onChange={(e) => setTenantForm({ ...tenantForm, state: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Postcode</label>
                    <input
                      type="text"
                      placeholder="e.g. 641004"
                      value={tenantForm.postcode}
                      onChange={(e) => setTenantForm({ ...tenantForm, postcode: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                    />
                  </div>
                </div>

                <div className="flex justify-end pt-4">
                  <button
                    type="submit"
                    disabled={createTenantMut.isPending}
                    className="bg-purple-650 hover:bg-purple-755 text-white px-6 py-3 rounded-xl text-xs font-bold uppercase tracking-wider flex items-center gap-2 cursor-pointer shadow-sm active:scale-95 transition-all border-none"
                  >
                    {createTenantMut.isPending ? (
                      <>
                        <Loader2 size={14} className="animate-spin" />
                        Provisioning Tenant...
                      </>
                    ) : (
                      <>
                        <Building2 size={14} />
                        Provision Tenant
                      </>
                    )}
                  </button>
                </div>
              </form>
            )}
          </div>
        )}

        {/* TAB 2: Store Onboarding */}
        {activeTab === 'store' && (
          <div className="bg-slate-50/30 border border-slate-200/60 p-7 rounded-2xl shadow-sm space-y-6 animate-in fade-in duration-300">
            <div className="flex justify-between items-start border-b border-slate-100 pb-5">
              <div>
                <h3 className="text-lg font-bold text-slate-900 flex items-center gap-2">
                  <Store className="text-[#662582]" size={20} />
                  Add Store Outlet Location
                </h3>
                <p className="text-slate-550 text-xs mt-1">
                  Commission a new store branch/hub under a tenant. This sets up store parameters, delivery thresholds, and spawns a placeholder branch manager account.
                </p>
              </div>
            </div>

            {storeSuccess ? (
              <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-6 text-center space-y-4 shadow-sm animate-in zoom-in-95 duration-200">
                <div className="w-12 h-12 rounded-full bg-emerald-500 text-white flex items-center justify-center mx-auto text-xl font-bold">✓</div>
                <h4 className="font-bold text-emerald-900 text-base">Store Branch Active!</h4>
                <p className="text-xs text-emerald-700 max-w-md mx-auto">
                  Store <strong>{storeForm.locationname}</strong> has been initialized. A default placeholder manager user has been spawned in inactive mode (requires password setup).
                </p>
                <div className="flex justify-center gap-3">
                  {onBack && (
                    <button
                      type="button"
                      onClick={onBack}
                      className="bg-white border border-slate-200 hover:bg-slate-50 text-slate-600 font-bold text-xs uppercase tracking-wider px-5 py-2.5 rounded-lg cursor-pointer flex items-center gap-1.5 shadow-sm active:scale-95 transition-all"
                    >
                      <ArrowLeft size={13} />
                      Back to Outlets
                    </button>
                  )}
                  <button
                    type="button"
                    onClick={() => { setStoreSuccess(null); setStoreForm({ tenantid: FIESTA_TENANT_ID, locationname: '', address: '', suburb: '', city: 'Coimbatore', state: 'Tamil Nadu', postcode: '', contactno: '', email: '', opentime: '06:00:00', closetime: '22:00:00', deliverymins: 45, deliveryradius: 5000 }); }}
                    className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider px-5 py-2.5 rounded-lg border-none cursor-pointer active:scale-95 transition-all shadow-sm"
                  >
                    Add Another Branch
                  </button>
                </div>
              </div>
            ) : (
              <form onSubmit={handleStoreSubmit} className="space-y-6">
                
                {/* SECTION 1: Identity & Primary Contact */}
                <div className="bg-white border border-slate-200/60 p-5 rounded-2xl space-y-4 shadow-sm">
                  <h4 className="text-xs font-black text-purple-700 uppercase tracking-widest flex items-center gap-1.5 pb-2 border-b border-slate-100/60">
                    <Building2 size={13} /> Owner & Identity
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">Owner Tenant</label>
                      <div className="relative rounded-xl">
                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                          <Building2 size={14} />
                        </div>
                        <input
                          type="text"
                          value={tenantsQ.isLoading ? 'Loading tenant info...' : tenantNameDisplay}
                          readOnly
                          className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-100/75 outline-none font-semibold text-xs text-slate-500 shadow-sm cursor-not-allowed"
                        />
                      </div>
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">Store Outlet Name <span className="text-red-500">*</span></label>
                      <div className="relative rounded-xl">
                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                          <Store size={14} />
                        </div>
                        <input
                          type="text"
                          placeholder="e.g. RS Puram Super Hub"
                          value={storeForm.locationname}
                          onChange={(e) => setStoreForm({ ...storeForm, locationname: e.target.value })}
                          className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 hover:bg-slate-100/60 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                          required
                        />
                      </div>
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">Outlet Email Address</label>
                      <div className="relative rounded-xl">
                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                          <Mail size={14} />
                        </div>
                        <input
                          type="email"
                          placeholder="e.g. rspuram@kaveri.com"
                          value={storeForm.email}
                          onChange={(e) => setStoreForm({ ...storeForm, email: e.target.value })}
                          className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 hover:bg-slate-100/60 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                        />
                      </div>
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">Outlet Contact Number</label>
                      <div className="relative rounded-xl">
                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                          <Phone size={14} />
                        </div>
                        <input
                          type="text"
                          maxLength={10}
                          placeholder="e.g. 9876543222"
                          value={storeForm.contactno}
                          onChange={(e) => setStoreForm({ ...storeForm, contactno: e.target.value.replace(/\D/g, '') })}
                          className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 hover:bg-slate-100/60 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                {/* SECTION 2: Location & Address */}
                <div className="bg-white border border-slate-200/60 p-5 rounded-2xl space-y-4 shadow-sm">
                  <h4 className="text-xs font-black text-purple-700 uppercase tracking-widest flex items-center gap-1.5 pb-2 border-b border-slate-100/60">
                    <MapPin size={13} /> Location & Address Details
                  </h4>
                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">Store Branch Address</label>
                    <div className="relative rounded-xl">
                      <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                        <MapPin size={14} />
                      </div>
                      <input
                        type="text"
                        placeholder="e.g. 240, DB Road"
                        value={storeForm.address}
                        onChange={(e) => setStoreForm({ ...storeForm, address: e.target.value })}
                        className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 hover:bg-slate-100/60 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">Suburb</label>
                      <input
                        type="text"
                        placeholder="e.g. RS Puram"
                        value={storeForm.suburb}
                        onChange={(e) => setStoreForm({ ...storeForm, suburb: e.target.value })}
                        className="px-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 hover:bg-slate-100/60 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">City</label>
                      <input
                        type="text"
                        value={storeForm.city}
                        onChange={(e) => setStoreForm({ ...storeForm, city: e.target.value })}
                        className="px-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 hover:bg-slate-100/60 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">State</label>
                      <input
                        type="text"
                        value={storeForm.state}
                        onChange={(e) => setStoreForm({ ...storeForm, state: e.target.value })}
                        className="px-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 hover:bg-slate-100/60 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1">Postcode</label>
                      <input
                        type="text"
                        placeholder="e.g. 641002"
                        value={storeForm.postcode}
                        onChange={(e) => setStoreForm({ ...storeForm, postcode: e.target.value })}
                        className="px-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 hover:bg-slate-100/60 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                      />
                    </div>
                  </div>
                </div>

                {/* SECTION 3: Operations & Logistics */}
                <div className="bg-white border border-slate-200/60 p-5 rounded-2xl space-y-4 shadow-sm">
                  <h4 className="text-xs font-black text-purple-700 uppercase tracking-widest flex items-center gap-1.5 pb-2 border-b border-slate-100/60">
                    <Navigation size={13} /> Logistics & Operational Hours
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1 flex items-center gap-1"><Clock size={12} className="text-slate-400" /> Open Time</label>
                      <div className="relative rounded-xl">
                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                          <Clock size={14} />
                        </div>
                        <input
                          type="text"
                          placeholder="06:00:00"
                          value={storeForm.opentime}
                          onChange={(e) => setStoreForm({ ...storeForm, opentime: e.target.value })}
                          className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                        />
                      </div>
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1 flex items-center gap-1"><Clock size={12} className="text-slate-400" /> Close Time</label>
                      <div className="relative rounded-xl">
                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                          <Clock size={14} />
                        </div>
                        <input
                          type="text"
                          placeholder="22:00:00"
                          value={storeForm.closetime}
                          onChange={(e) => setStoreForm({ ...storeForm, closetime: e.target.value })}
                          className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                        />
                      </div>
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1 flex items-center gap-1"><Navigation size={12} className="text-slate-400" /> Delivery Radius (m)</label>
                      <div className="relative rounded-xl">
                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                          <Navigation size={14} />
                        </div>
                        <input
                          type="number"
                          value={storeForm.deliveryradius}
                          onChange={(e) => setStoreForm({ ...storeForm, deliveryradius: Number(e.target.value) })}
                          className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                        />
                      </div>
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-widest block mb-1 flex items-center gap-1"><Clock size={12} className="text-slate-400" /> Est. Speed (mins)</label>
                      <div className="relative rounded-xl">
                        <div className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                          <Clock size={14} />
                        </div>
                        <input
                          type="number"
                          value={storeForm.deliverymins}
                          onChange={(e) => setStoreForm({ ...storeForm, deliverymins: Number(e.target.value) })}
                          className="pl-10 pr-4 py-2.5 w-full border border-slate-200 rounded-xl bg-slate-50/40 focus:bg-white outline-none focus:ring-4 focus:ring-purple-100 focus:border-purple-600 transition-all font-semibold text-xs text-slate-800 shadow-sm"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                {/* FORM ACTIONS */}
                <div className="flex justify-end gap-3 pt-2">
                  {onBack && (
                    <button
                      type="button"
                      onClick={onBack}
                      className="px-5 py-3 border border-slate-200 hover:bg-slate-50 hover:border-slate-300 bg-white rounded-xl text-xs font-bold uppercase tracking-wider cursor-pointer text-slate-500 hover:text-slate-700 transition-all flex items-center gap-1.5 shadow-sm active:scale-95"
                    >
                      <ArrowLeft size={14} />
                      Back
                    </button>
                  )}
                  <button
                    type="submit"
                    disabled={createLocationMut.isPending}
                    className="bg-gradient-to-r from-[#662582] to-indigo-650 hover:from-purple-755 hover:to-indigo-700 text-white px-6 py-3 rounded-xl text-xs font-bold uppercase tracking-wider flex items-center gap-2 cursor-pointer shadow-md active:scale-95 transition-all border-none"
                  >
                    {createLocationMut.isPending ? (
                      <>
                        <Loader2 size={14} className="animate-spin" />
                        Commissioning Hub...
                      </>
                    ) : (
                      <>
                        <Store size={14} />
                        Commission Branch
                      </>
                    )}
                  </button>
                </div>
              </form>
            )}
          </div>
        )}

        {/* TAB 3: Rider Onboarding */}
        {activeTab === 'rider' && (
          <div className="bg-white border border-slate-200/60 p-6 rounded-2xl shadow-sm space-y-6">
            <div>
              <h3 className="text-lg font-bold text-slate-900 flex items-center gap-2">
                <Bike className="text-purple-600" />
                Onboard Delivery Rider
              </h3>
              <p className="text-slate-500 text-xs mt-1">
                Onboarding riders is a multi-table database transaction. We register the user profile in <code>app_users</code>, and dynamically generate SQL configuration queries to inject vehicle, shift, and availability settings.
              </p>
            </div>

            {riderSuccess ? (
              <div className="space-y-5 animate-in slide-in-from-bottom duration-300">
                <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-5 flex items-center gap-4">
                  <div className="w-10 h-10 rounded-full bg-emerald-500 text-white flex items-center justify-center text-lg font-bold shrink-0">✓</div>
                  <div>
                    <h4 className="font-bold text-emerald-950 text-sm">Base Account Registered successfully!</h4>
                    <p className="text-xs text-emerald-700 mt-0.5">
                      Rider user created in <strong>app_users</strong> with ID: <strong>#{riderSuccess.userid}</strong>.
                    </p>
                  </div>
                </div>

                {/* SQL generated panel */}
                <div className="space-y-2">
                  <div className="flex justify-between items-center select-none">
                    <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest flex items-center gap-1.5">
                      <FileText size={12} className="text-slate-400" /> Administrative SQL Synchronization script
                    </span>
                    <button
                      type="button"
                      onClick={handleCopySql}
                      className="flex items-center gap-1 text-[11px] font-bold text-purple-650 bg-purple-50 hover:bg-purple-100 border border-purple-200 px-3 py-1.5 rounded-lg cursor-pointer transition-all active:scale-95"
                    >
                      {copiedSql ? (
                        <>
                          <Check size={12} className="text-emerald-650" />
                          Copied!
                        </>
                      ) : (
                        <>
                          <Copy size={12} />
                          Copy Script
                        </>
                      )}
                    </button>
                  </div>

                  <pre className="bg-slate-900 text-slate-100 rounded-xl p-4 text-xs font-mono overflow-x-auto shadow-inner leading-relaxed border border-slate-950 max-h-[16rem]">
                    {riderSuccess.sql}
                  </pre>

                  <div className="bg-amber-50 border border-amber-100 rounded-xl p-4 flex gap-3 text-xs leading-relaxed text-amber-800">
                    <ShieldAlert size={16} className="text-amber-500 shrink-0 mt-0.5" />
                    <div>
                      <span className="font-bold block mb-0.5">Immediate Action Required:</span>
                      Please share this SQL script with the Database Administrator (DBA) or run it against the Postgres instance to complete vehicle assignments, shifts, and active pool configuration.
                    </div>
                  </div>
                </div>

                <div className="flex justify-end pt-2">
                  <button
                    type="button"
                    onClick={() => {
                      setRiderSuccess(null);
                      setRiderForm({
                        firstname: '',
                        lastname: '',
                        email: '',
                        contactno: '',
                        password: 'Rider@123',
                        locationid: 0,
                        shiftid: 0,
                        vehiclename: '',
                        vehiclemodel: '',
                        licensenumber: '',
                      });
                    }}
                    className="bg-purple-650 hover:bg-purple-755 text-white font-bold text-xs uppercase tracking-wider px-5 py-2.5 rounded-lg border-none cursor-pointer"
                  >
                    Onboard Another Rider
                  </button>
                </div>
              </div>
            ) : (
              <form onSubmit={handleRiderSubmit} className="space-y-4">
                {/* Account personal details */}
                <div className="bg-slate-50/50 p-4 rounded-xl border border-slate-150 space-y-4">
                  <h4 className="font-bold text-xs uppercase tracking-wider text-slate-600">1. Base Profile Details</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">First Name (*)</label>
                      <input
                        type="text"
                        placeholder="e.g. Karthik"
                        value={riderForm.firstname}
                        onChange={(e) => setRiderForm({ ...riderForm, firstname: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Last Name</label>
                      <input
                        type="text"
                        placeholder="e.g. Sundar"
                        value={riderForm.lastname}
                        onChange={(e) => setRiderForm({ ...riderForm, lastname: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest flex items-center gap-1"><Mail size={11} /> Email (*)</label>
                      <input
                        type="email"
                        placeholder="e.g. karthik@rider.com"
                        value={riderForm.email}
                        onChange={(e) => setRiderForm({ ...riderForm, email: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest flex items-center gap-1"><Phone size={11} /> Contact No (*)</label>
                      <input
                        type="text"
                        maxLength={10}
                        placeholder="e.g. 9988776655"
                        value={riderForm.contactno}
                        onChange={(e) => setRiderForm({ ...riderForm, contactno: e.target.value.replace(/\D/g, '') })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>
                  </div>
                </div>

                {/* Vehicle, Shift & Hub configurations */}
                <div className="bg-slate-50/50 p-4 rounded-xl border border-slate-150 space-y-4">
                  <h4 className="font-bold text-xs uppercase tracking-wider text-slate-600">2. Fleet & Shift configuration</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Assign Store Hub (*)</label>
                      <select
                        value={riderForm.locationid}
                        onChange={(e) => setRiderForm({ ...riderForm, locationid: Number(e.target.value) })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800 cursor-pointer"
                        required
                      >
                        <option value={0}>Select Hub location...</option>
                        {locations.map((loc) => (
                          <option key={loc.locationid} value={Number(loc.locationid)}>{fstr(loc.locationname)}</option>
                        ))}
                      </select>
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Assigned Shift</label>
                      <select
                        value={riderForm.shiftid}
                        onChange={(e) => setRiderForm({ ...riderForm, shiftid: Number(e.target.value) })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800 cursor-pointer"
                      >
                        <option value={0}>Select Shift timings...</option>
                        {shiftsQ.isLoading ? (
                          <option>Loading shifts...</option>
                        ) : (shiftsQ.data || []).map((sh: any) => (
                          <option key={sh.shiftid} value={fnum(sh.shiftid)}>{fstr(sh.shiftname)}</option>
                        ))}
                      </select>
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Vehicle Name</label>
                      <input
                        type="text"
                        placeholder="e.g. Coimbatore Hub Bike 4"
                        value={riderForm.vehiclename}
                        onChange={(e) => setRiderForm({ ...riderForm, vehiclename: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Vehicle Model</label>
                      <input
                        type="text"
                        placeholder="e.g. TVS iQube Electric"
                        value={riderForm.vehiclemodel}
                        onChange={(e) => setRiderForm({ ...riderForm, vehiclemodel: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>

                    <div className="space-y-1 md:col-span-2">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">License Number</label>
                      <input
                        type="text"
                        placeholder="e.g. TN-37-BY-1234"
                        value={riderForm.licensenumber}
                        onChange={(e) => setRiderForm({ ...riderForm, licensenumber: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                  </div>
                </div>

                <div className="flex justify-end pt-4">
                  <button
                    type="submit"
                    disabled={createUserMut.isPending}
                    className="bg-purple-650 hover:bg-purple-755 text-white px-6 py-3 rounded-xl text-xs font-bold uppercase tracking-wider flex items-center gap-2 cursor-pointer shadow-sm active:scale-95 transition-all border-none"
                  >
                    {createUserMut.isPending ? (
                      <>
                        <Loader2 size={14} className="animate-spin" />
                        Registering User Profile...
                      </>
                    ) : (
                      <>
                        <Check size={14} />
                        Onboard Rider Account
                      </>
                    )}
                  </button>
                </div>
              </form>
            )}
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="space-y-lg animate-in fade-in duration-300 font-sans text-slate-700">

      {/* Tabs Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-gutter items-start">
        {/* Navigation Tabs */}
        <div className="lg:col-span-1 space-y-md bg-slate-50/50 border border-slate-200/60 p-4 rounded-2xl shadow-sm">
          <nav className="flex lg:flex-col gap-1.5 overflow-x-auto select-none">
            <button
              onClick={() => { setActiveTab('tenant'); setTenantSuccess(null); }}
              className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold transition-all duration-200 whitespace-nowrap cursor-pointer border-none w-full ${
                activeTab === 'tenant'
                  ? 'bg-purple-50 text-[#662582] shadow-sm border-l-2 border-purple-650'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-white bg-transparent'
              }`}
            >
              <Building2 size={16} className={activeTab === 'tenant' ? 'text-[#662582]' : 'text-slate-450'} />
              <span>Tenant Onboarding</span>
            </button>

            <button
              onClick={() => { setActiveTab('store'); setStoreSuccess(null); }}
              className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold transition-all duration-200 whitespace-nowrap cursor-pointer border-none w-full ${
                activeTab === 'store'
                  ? 'bg-purple-50 text-[#662582] shadow-sm border-l-2 border-purple-650'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-white bg-transparent'
              }`}
            >
              <Store size={16} className={activeTab === 'store' ? 'text-[#662582]' : 'text-slate-450'} />
              <span>Store Branch Onboarding</span>
            </button>

            <button
              onClick={() => { setActiveTab('rider'); setRiderSuccess(null); }}
              className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold transition-all duration-200 whitespace-nowrap cursor-pointer border-none w-full ${
                activeTab === 'rider'
                  ? 'bg-purple-50 text-[#662582] shadow-sm border-l-2 border-purple-650'
                  : 'text-slate-600 hover:text-slate-900 hover:bg-white bg-transparent'
              }`}
            >
              <Bike size={16} className={activeTab === 'rider' ? 'text-[#662582]' : 'text-slate-450'} />
              <span>Rider Onboarding</span>
            </button>
          </nav>
        </div>

        {/* Form Panel */}
        <div className="lg:col-span-3 space-y-gutter">
          {/* TAB 1: Tenant Onboarding */}
          {activeTab === 'tenant' && (
            <div className="bg-white border border-slate-200/60 p-6 rounded-2xl shadow-sm space-y-6">
              <div>
                <h3 className="text-lg font-bold text-slate-900">Provision New Merchant Tenant</h3>
                <p className="text-slate-500 text-xs mt-1">
                  Onboard a new merchant group. This registers their enterprise, defaults the order serialization, and spawns the primary Administrator account.
                </p>
              </div>

              {tenantSuccess ? (
                <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-6 text-center space-y-4">
                  <div className="w-12 h-12 rounded-full bg-emerald-550 text-white flex items-center justify-center mx-auto text-xl font-bold">✓</div>
                  <h4 className="font-bold text-emerald-900 text-base">Onboarding Complete!</h4>
                  <p className="text-xs text-emerald-700 max-w-md mx-auto">
                    Tenant <strong>{tenantForm.tenantname}</strong> has been provisioned. An administrator account has been dispatched with credentials tied to <strong>{tenantForm.primaryemail}</strong>.
                  </p>
                  <button
                    onClick={() => { setTenantSuccess(null); setTenantForm(TENANT_FORM_INITIAL); }}
                    className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider px-5 py-2.5 rounded-lg border-none cursor-pointer"
                  >
                    Onboard Another Tenant
                  </button>
                </div>
              ) : (
                <form onSubmit={handleTenantSubmit} className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Merchant Name (*)</label>
                      <input
                        type="text"
                        placeholder="e.g. Kaveri Groceries"
                        value={tenantForm.tenantname}
                        onChange={(e) => setTenantForm({ ...tenantForm, tenantname: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Company Registered Name (*)</label>
                      <input
                        type="text"
                        placeholder="e.g. Kaveri Retail Pvt. Ltd."
                        value={tenantForm.companyname}
                        onChange={(e) => setTenantForm({ ...tenantForm, companyname: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Primary Phone Number (*)</label>
                      <input
                        type="text"
                        maxLength={10}
                        placeholder="e.g. 9876543210"
                        value={tenantForm.primarycontact}
                        onChange={(e) => setTenantForm({ ...tenantForm, primarycontact: e.target.value.replace(/\D/g, '') })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Primary Admin Email (*)</label>
                      <input
                        type="email"
                        placeholder="e.g. admin@kaveri.com"
                        value={tenantForm.primaryemail}
                        onChange={(e) => setTenantForm({ ...tenantForm, primaryemail: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Primary Outlet Name (*)</label>
                      <input
                        type="text"
                        placeholder="e.g. Kaveri Groceries - Main Branch"
                        value={tenantForm.locationname}
                        onChange={(e) => setTenantForm({ ...tenantForm, locationname: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Business Category</label>
                      <select
                        value={tenantForm.categoryid}
                        onChange={(e) => setTenantForm({ ...tenantForm, categoryid: Number(e.target.value) })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800 cursor-pointer"
                      >
                        <option value={1}>Food & Dining</option>
                        <option value={2}>Grocery & Daily</option>
                        <option value={3}>Pharmacy</option>
                        <option value={4}>Retail</option>
                      </select>
                    </div>
                  </div>

                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">HQ Street Address</label>
                    <input
                      type="text"
                      placeholder="e.g. 12, Avinashi Road"
                      value={tenantForm.address}
                      onChange={(e) => setTenantForm({ ...tenantForm, address: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                    />
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Suburb</label>
                      <input
                        type="text"
                        placeholder="e.g. Peelamedu"
                        value={tenantForm.suburb}
                        onChange={(e) => setTenantForm({ ...tenantForm, suburb: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">City</label>
                      <input
                        type="text"
                        value={tenantForm.city}
                        onChange={(e) => setTenantForm({ ...tenantForm, city: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">State</label>
                      <input
                        type="text"
                        value={tenantForm.state}
                        onChange={(e) => setTenantForm({ ...tenantForm, state: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Postcode</label>
                      <input
                        type="text"
                        placeholder="e.g. 641004"
                        value={tenantForm.postcode}
                        onChange={(e) => setTenantForm({ ...tenantForm, postcode: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                  </div>

                  <div className="flex justify-end pt-4">
                    <button
                      type="submit"
                      disabled={createTenantMut.isPending}
                      className="bg-purple-650 hover:bg-purple-755 text-white px-6 py-3 rounded-xl text-xs font-bold uppercase tracking-wider flex items-center gap-2 cursor-pointer shadow-sm active:scale-95 transition-all border-none"
                    >
                      {createTenantMut.isPending ? (
                        <>
                          <Loader2 size={14} className="animate-spin" />
                          Provisioning Tenant...
                        </>
                      ) : (
                        <>
                          <Building2 size={14} />
                          Provision Tenant
                        </>
                      )}
                    </button>
                  </div>
                </form>
              )}
            </div>
          )}

          {/* TAB 2: Store Onboarding */}
          {activeTab === 'store' && (
            <div className="bg-white border border-slate-200/60 p-6 rounded-2xl shadow-sm space-y-6">
              <div>
                <h3 className="text-lg font-bold text-slate-900">Add Store Outlet Location</h3>
                <p className="text-slate-500 text-xs mt-1">
                  Commission a new store branch/hub under a tenant. This sets up store parameters, delivery thresholds, and spawns an placeholder branch manager account.
                </p>
              </div>

              {storeSuccess ? (
                <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-6 text-center space-y-4">
                  <div className="w-12 h-12 rounded-full bg-emerald-550 text-white flex items-center justify-center mx-auto text-xl font-bold">✓</div>
                  <h4 className="font-bold text-emerald-900 text-base">Store Branch Active!</h4>
                  <p className="text-xs text-emerald-700 max-w-md mx-auto">
                    Store <strong>{storeForm.locationname}</strong> has been initialized. A default placeholder manager user has been spawned in inactive mode (requires password setup).
                  </p>
                  <div className="flex justify-center gap-3">
                    {onBack && (
                      <button
                        type="button"
                        onClick={onBack}
                        className="bg-white border border-slate-200 hover:bg-slate-50 text-slate-600 font-bold text-xs uppercase tracking-wider px-5 py-2.5 rounded-lg cursor-pointer"
                      >
                        Back to Outlets
                      </button>
                    )}
                    <button
                      onClick={() => { setStoreSuccess(null); setStoreForm({ tenantid: FIESTA_TENANT_ID, locationname: '', address: '', suburb: '', city: 'Coimbatore', state: 'Tamil Nadu', postcode: '', contactno: '', email: '', opentime: '06:00:00', closetime: '22:00:00', deliverymins: 45, deliveryradius: 5000 }); }}
                      className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs uppercase tracking-wider px-5 py-2.5 rounded-lg border-none cursor-pointer"
                    >
                      Add Another Branch
                    </button>
                  </div>
                </div>
              ) : (
                <form onSubmit={handleStoreSubmit} className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Select Owner Tenant (*)</label>
                      <select
                        value={storeForm.tenantid}
                        onChange={(e) => setStoreForm({ ...storeForm, tenantid: Number(e.target.value) })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800 cursor-pointer"
                      >
                        {tenantsQ.isLoading ? (
                          <option>Loading tenants...</option>
                        ) : (tenantsQ.data || []).map((t) => (
                          <option key={t.tenantid} value={Number(t.tenantid)}>{fstr(t.tenantname)} (#{fstr(t.tenantid)})</option>
                        ))}
                      </select>
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Store Outlet Name (*)</label>
                      <input
                        type="text"
                        placeholder="e.g. RS Puram Super Hub"
                        value={storeForm.locationname}
                        onChange={(e) => setStoreForm({ ...storeForm, locationname: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        required
                      />
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Outlet Email Address</label>
                      <input
                        type="email"
                        placeholder="e.g. rspuram@kaveri.com"
                        value={storeForm.email}
                        onChange={(e) => setStoreForm({ ...storeForm, email: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Outlet Contact Number</label>
                      <input
                        type="text"
                        maxLength={10}
                        placeholder="e.g. 9876543222"
                        value={storeForm.contactno}
                        onChange={(e) => setStoreForm({ ...storeForm, contactno: e.target.value.replace(/\D/g, '') })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                  </div>

                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Store Branch Address</label>
                    <input
                      type="text"
                      placeholder="e.g. 240, DB Road"
                      value={storeForm.address}
                      onChange={(e) => setStoreForm({ ...storeForm, address: e.target.value })}
                      className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                    />
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Suburb</label>
                      <input
                        type="text"
                        placeholder="e.g. RS Puram"
                        value={storeForm.suburb}
                        onChange={(e) => setStoreForm({ ...storeForm, suburb: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">City</label>
                      <input
                        type="text"
                        value={storeForm.city}
                        onChange={(e) => setStoreForm({ ...storeForm, city: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">State</label>
                      <input
                        type="text"
                        value={storeForm.state}
                        onChange={(e) => setStoreForm({ ...storeForm, state: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Postcode</label>
                      <input
                        type="text"
                        placeholder="e.g. 641002"
                        value={storeForm.postcode}
                        onChange={(e) => setStoreForm({ ...storeForm, postcode: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 hover:bg-slate-100 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4 pt-2 border-t border-slate-100">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest flex items-center gap-1"><Clock size={12} /> Open Time</label>
                      <input
                        type="text"
                        placeholder="06:00:00"
                        value={storeForm.opentime}
                        onChange={(e) => setStoreForm({ ...storeForm, opentime: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest flex items-center gap-1"><Clock size={12} /> Close Time</label>
                      <input
                        type="text"
                        placeholder="22:00:00"
                        value={storeForm.closetime}
                        onChange={(e) => setStoreForm({ ...storeForm, closetime: e.target.value })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest flex items-center gap-1"><Navigation size={12} /> Delivery Radius (m)</label>
                      <input
                        type="number"
                        value={storeForm.deliveryradius}
                        onChange={(e) => setStoreForm({ ...storeForm, deliveryradius: Number(e.target.value) })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest flex items-center gap-1"><Clock size={12} /> Est. Speed (mins)</label>
                      <input
                        type="number"
                        value={storeForm.deliverymins}
                        onChange={(e) => setStoreForm({ ...storeForm, deliverymins: Number(e.target.value) })}
                        className="w-full border border-slate-250 rounded-xl p-3 bg-slate-50/40 focus:bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                      />
                    </div>
                  </div>

                  <div className="flex justify-end gap-3 pt-4">
                    {onBack && (
                      <button
                        type="button"
                        onClick={onBack}
                        className="px-5 py-3 border border-slate-200 hover:bg-slate-55 bg-white rounded-xl text-xs font-bold uppercase tracking-wider cursor-pointer text-slate-500 hover:text-slate-700 transition-all border-none"
                      >
                        Back
                      </button>
                    )}
                    <button
                      type="submit"
                      disabled={createLocationMut.isPending}
                      className="bg-purple-650 hover:bg-purple-755 text-white px-6 py-3 rounded-xl text-xs font-bold uppercase tracking-wider flex items-center gap-2 cursor-pointer shadow-sm active:scale-95 transition-all border-none"
                    >
                      {createLocationMut.isPending ? (
                        <>
                          <Loader2 size={14} className="animate-spin" />
                          Commissioning Hub...
                        </>
                      ) : (
                        <>
                          <Store size={14} />
                          Commission Branch
                        </>
                      )}
                    </button>
                  </div>
                </form>
              )}
            </div>
          )}

          {/* TAB 3: Rider Onboarding */}
          {activeTab === 'rider' && (
            <div className="bg-white border border-slate-200/60 p-6 rounded-2xl shadow-sm space-y-6">
              <div>
                <h3 className="text-lg font-bold text-slate-900 flex items-center gap-2">
                  <Bike className="text-purple-600" />
                  Onboard Delivery Rider
                </h3>
                <p className="text-slate-500 text-xs mt-1">
                  Onboarding riders is a multi-table database transaction. We register the user profile in <code>app_users</code>, and dynamically generate SQL configuration queries to inject vehicle, shift, and availability settings.
                </p>
              </div>

              {riderSuccess ? (
                <div className="space-y-5 animate-in slide-in-from-bottom duration-300">
                  <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-5 flex items-center gap-4">
                    <div className="w-10 h-10 rounded-full bg-emerald-500 text-white flex items-center justify-center text-lg font-bold shrink-0">✓</div>
                    <div>
                      <h4 className="font-bold text-emerald-950 text-sm">Base Account Registered successfully!</h4>
                      <p className="text-xs text-emerald-700 mt-0.5">
                        Rider user created in <strong>app_users</strong> with ID: <strong>#{riderSuccess.userid}</strong>.
                      </p>
                    </div>
                  </div>

                  {/* SQL generated panel */}
                  <div className="space-y-2">
                    <div className="flex justify-between items-center select-none">
                      <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest flex items-center gap-1.5">
                        <FileText size={12} className="text-slate-400" /> Administrative SQL Synchronization script
                      </span>
                      <button
                        onClick={handleCopySql}
                        className="flex items-center gap-1 text-[11px] font-bold text-purple-650 bg-purple-50 hover:bg-purple-100 border border-purple-200 px-3 py-1.5 rounded-lg cursor-pointer transition-all active:scale-95"
                      >
                        {copiedSql ? (
                          <>
                            <Check size={12} className="text-emerald-650" />
                            Copied!
                          </>
                        ) : (
                          <>
                            <Copy size={12} />
                            Copy Script
                          </>
                        )}
                      </button>
                    </div>

                    <pre className="bg-slate-900 text-slate-100 rounded-xl p-4 text-xs font-mono overflow-x-auto shadow-inner leading-relaxed border border-slate-950 max-h-[16rem]">
                      {riderSuccess.sql}
                    </pre>

                    <div className="bg-amber-50 border border-amber-100 rounded-xl p-4 flex gap-3 text-xs leading-relaxed text-amber-800">
                      <ShieldAlert size={16} className="text-amber-500 shrink-0 mt-0.5" />
                      <div>
                        <span className="font-bold block mb-0.5">Immediate Action Required:</span>
                        Please share this SQL script with the Database Administrator (DBA) or run it against the Postgres instance to complete vehicle assignments, shifts, and active pool configuration.
                      </div>
                    </div>
                  </div>

                  <div className="flex justify-end pt-2">
                    <button
                      onClick={() => {
                        setRiderSuccess(null);
                        setRiderForm({
                          firstname: '',
                          lastname: '',
                          email: '',
                          contactno: '',
                          password: 'Rider@123',
                          locationid: 0,
                          shiftid: 0,
                          vehiclename: '',
                          vehiclemodel: '',
                          licensenumber: '',
                        });
                      }}
                      className="bg-purple-650 hover:bg-purple-755 text-white font-bold text-xs uppercase tracking-wider px-5 py-2.5 rounded-lg border-none cursor-pointer"
                    >
                      Onboard Another Rider
                    </button>
                  </div>
                </div>
              ) : (
                <form onSubmit={handleRiderSubmit} className="space-y-4">
                  {/* Account personal details */}
                  <div className="bg-slate-50/50 p-4 rounded-xl border border-slate-150 space-y-4">
                    <h4 className="font-bold text-xs uppercase tracking-wider text-slate-600">1. Base Profile Details</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">First Name (*)</label>
                        <input
                          type="text"
                          placeholder="e.g. Karthik"
                          value={riderForm.firstname}
                          onChange={(e) => setRiderForm({ ...riderForm, firstname: e.target.value })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                          required
                        />
                      </div>
                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Last Name</label>
                        <input
                          type="text"
                          placeholder="e.g. Sundar"
                          value={riderForm.lastname}
                          onChange={(e) => setRiderForm({ ...riderForm, lastname: e.target.value })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        />
                      </div>
                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest flex items-center gap-1"><Mail size={11} /> Email (*)</label>
                        <input
                          type="email"
                          placeholder="e.g. karthik@rider.com"
                          value={riderForm.email}
                          onChange={(e) => setRiderForm({ ...riderForm, email: e.target.value })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                          required
                        />
                      </div>
                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest flex items-center gap-1"><Phone size={11} /> Contact No (*)</label>
                        <input
                          type="text"
                          maxLength={10}
                          placeholder="e.g. 9988776655"
                          value={riderForm.contactno}
                          onChange={(e) => setRiderForm({ ...riderForm, contactno: e.target.value.replace(/\D/g, '') })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                          required
                        />
                      </div>
                    </div>
                  </div>

                  {/* Vehicle, Shift & Hub configurations */}
                  <div className="bg-slate-50/50 p-4 rounded-xl border border-slate-150 space-y-4">
                    <h4 className="font-bold text-xs uppercase tracking-wider text-slate-600">2. Fleet & Shift configuration</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Assign Store Hub (*)</label>
                        <select
                          value={riderForm.locationid}
                          onChange={(e) => setRiderForm({ ...riderForm, locationid: Number(e.target.value) })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800 cursor-pointer"
                          required
                        >
                          <option value={0}>Select Hub location...</option>
                          {locations.map((loc) => (
                            <option key={loc.locationid} value={Number(loc.locationid)}>{fstr(loc.locationname)}</option>
                          ))}
                        </select>
                      </div>

                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Assigned Shift</label>
                        <select
                          value={riderForm.shiftid}
                          onChange={(e) => setRiderForm({ ...riderForm, shiftid: Number(e.target.value) })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800 cursor-pointer"
                        >
                          <option value={0}>Select Shift timings...</option>
                          {shiftsQ.isLoading ? (
                            <option>Loading shifts...</option>
                          ) : (shiftsQ.data || []).map((sh: any) => (
                            <option key={sh.shiftid} value={fnum(sh.shiftid)}>{fstr(sh.shiftname)}</option>
                          ))}
                        </select>
                      </div>

                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Vehicle Name</label>
                        <input
                          type="text"
                          placeholder="e.g. Coimbatore Hub Bike 4"
                          value={riderForm.vehiclename}
                          onChange={(e) => setRiderForm({ ...riderForm, vehiclename: e.target.value })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        />
                      </div>

                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">Vehicle Model</label>
                        <input
                          type="text"
                          placeholder="e.g. TVS iQube Electric"
                          value={riderForm.vehiclemodel}
                          onChange={(e) => setRiderForm({ ...riderForm, vehiclemodel: e.target.value })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        />
                      </div>

                      <div className="space-y-1 md:col-span-2">
                        <label className="text-[10px] font-bold text-slate-450 uppercase tracking-widest">License Number</label>
                        <input
                          type="text"
                          placeholder="e.g. TN-37-BY-1234"
                          value={riderForm.licensenumber}
                          onChange={(e) => setRiderForm({ ...riderForm, licensenumber: e.target.value })}
                          className="w-full border border-slate-250 rounded-xl p-3 bg-white outline-none focus:border-purple-500 transition-all font-semibold text-xs text-slate-800"
                        />
                      </div>
                    </div>
                  </div>

                  <div className="flex justify-end pt-4">
                    <button
                      type="submit"
                      disabled={createUserMut.isPending}
                      className="bg-purple-650 hover:bg-purple-755 text-white px-6 py-3 rounded-xl text-xs font-bold uppercase tracking-wider flex items-center gap-2 cursor-pointer shadow-sm active:scale-95 transition-all border-none"
                    >
                      {createUserMut.isPending ? (
                        <>
                          <Loader2 size={14} className="animate-spin" />
                          Registering User Profile...
                        </>
                      ) : (
                        <>
                          <Check size={14} />
                          Onboard Rider Account
                        </>
                      )}
                    </button>
                  </div>
                </form>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}