import React, { useState, useEffect, useRef } from 'react';
import { 
  Printer, 
  FileText, 
  CreditCard, 
  ShieldCheck, 
  User, 
  Phone, 
  MapPin, 
  Mail, 
  Upload, 
  CheckCircle, 
  Clock, 
  AlertCircle, 
  Lock, 
  LogOut, 
  ShoppingBag, 
  Settings, 
  Plus, 
  Trash2, 
  Edit3, 
  QrCode, 
  Download, 
  Volume2, 
  ChevronRight,
  Eye,
  FileCheck,
  Search,
  RefreshCw,
  TrendingUp,
  FileSpreadsheet
} from 'lucide-react';

// Main Web Application Component
export default function App() {
  // Navigation & User State
  const [activeTab, setActiveTab] = useState('services'); // services, orders, profile, admin
  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('narayan_user');
    return saved ? JSON.parse(saved) : null;
  });
  
  // Auth Modals & Form State
  const [authModal, setAuthModal] = useState({ open: false, mode: 'login' }); // 'login', 'register', 'forgot'
  const [adminPin, setAdminPin] = useState('');
  const [isAdminAuthenticated, setIsAdminAuthenticated] = useState(() => {
    return localStorage.getItem('narayan_admin_auth') === 'true';
  });

  // Services Catalog State (Dukandaar can update rates dynamically)
  const [services, setServices] = useState(() => {
    const saved = localStorage.getItem('narayan_services');
    return saved ? JSON.parse(saved) : [
      { id: 'pdf', title: 'PDF Document Print', icon: 'FileText', badge: 'Tiered Pricing', requiresUpload: true, fields: ['pdfFile'] },
      { id: 'photo', title: 'Passport Photo Print (6 Pcs)', price: 40, icon: 'Printer', requiresUpload: true, fields: ['photo'] },
      { id: 'aadhar', title: 'Aadhar Card Print', price: 50, icon: 'ShieldCheck', requiresUpload: true, fields: ['aadhar'] },
      { id: 'voter', title: 'Voter Card Print', price: 50, icon: 'CreditCard', requiresUpload: true, fields: ['voter'] },
      { id: 'new_pan', title: 'New PAN Card Apply', price: 200, icon: 'FileCheck', requiresUpload: true, fields: ['aadhar', 'birthCert'] },
      { id: 'pan_corr', title: 'PAN Card Correction', price: 300, icon: 'Edit3', requiresUpload: true, fields: ['aadhar', 'birthCert'] },
      { id: 'new_gst', title: 'New GST Registration', price: 1500, icon: 'TrendingUp', requiresUpload: true, fields: ['aadhar', 'pan', 'photo', 'electricity'] },
      { id: 'itr', title: 'ITR Filing', price: 1200, icon: 'FileSpreadsheet', requiresUpload: true, fields: ['aadhar', 'pan', 'bankStatement'] }
    ];
  });

  // Orders State
  const [orders, setOrders] = useState(() => {
    const saved = localStorage.getItem('narayan_orders');
    return saved ? JSON.parse(saved) : [
      {
        id: 'NC-98421',
        customerName: 'Rahul Kumar',
        mobile: '9876543210',
        address: 'Main Road, Near Hanuman Mandir, Patna',
        serviceName: 'Aadhar Card Print',
        amount: 50,
        status: 'Completed',
        date: new Date(Date.now() - 86400000).toLocaleString(),
        paymentStatus: 'Paid (UPI)',
        files: [{ name: 'Aadhar_Doc.pdf', type: 'aadhar' }]
      }
    ];
  });

  // Selected Service for Ordering
  const [selectedService, setSelectedService] = useState(null);
  const [pdfPageCount, setPdfPageCount] = useState(1);
  const [uploadedFiles, setUploadedFiles] = useState({});
  const [activePaymentOrder, setActivePaymentOrder] = useState(null);
  const [receiptOrder, setReceiptOrder] = useState(null);

  // Audio simulation for New Order alert in Dukandaar portal
  const playAlertSound = () => {
    try {
      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sine';
      osc.frequency.setValueAtTime(587.33, ctx.currentTime); // D5
      osc.frequency.setValueAtTime(880, ctx.currentTime + 0.15); // A5
      gain.gain.setValueAtTime(0.3, ctx.currentTime);
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.start();
      osc.stop(ctx.currentTime + 0.4);
    } catch (e) {
      console.log('Audio alert allowed after interaction');
    }
  };

  // Save changes to localStorage
  useEffect(() => {
    localStorage.setItem('narayan_orders', JSON.stringify(orders));
  }, [orders]);

  useEffect(() => {
    localStorage.setItem('narayan_services', JSON.stringify(services));
  }, [services]);

  // Handle PDF Price Calculation Tier
  const calculatePdfPrice = (pages) => {
    const count = parseInt(pages) || 1;
    if (count === 1) return 10;
    if (count >= 10 && count <= 50) return count * 5;
    if (count > 50) return count * 3;
    return count * 10; // Default for 2-9 pages
  };

  // Auth Submit Handlers
  const handleAuthSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());

    if (authModal.mode === 'register') {
      const newUser = {
        name: data.name,
        address: data.address,
        mobile: data.mobile,
        email: data.email,
        password: data.password
      };
      localStorage.setItem('narayan_user_' + data.mobile, JSON.stringify(newUser));
      setUser(newUser);
      localStorage.setItem('narayan_user', JSON.stringify(newUser));
      setAuthModal({ open: false, mode: 'login' });
    } else if (authModal.mode === 'login') {
      const saved = localStorage.getItem('narayan_user_' + data.mobile);
      if (saved) {
        const parsed = JSON.parse(saved);
        if (parsed.password === data.password) {
          setUser(parsed);
          localStorage.setItem('narayan_user', JSON.stringify(parsed));
          setAuthModal({ open: false, mode: 'login' });
        } else {
          alert('Incorrect Password! Please try again.');
        }
      } else {
        // Fallback quick simulation login
        const tempUser = { name: 'Customer', mobile: data.mobile, address: 'Patna, Bihar' };
        setUser(tempUser);
        localStorage.setItem('narayan_user', JSON.stringify(tempUser));
        setAuthModal({ open: false, mode: 'login' });
      }
    } else if (authModal.mode === 'forgot') {
      alert('Password reset link sent to your mobile via SMS simulation.');
      setAuthModal({ open: false, mode: 'login' });
    }
  };

  const handleLogout = () => {
    setUser(null);
    localStorage.removeItem('narayan_user');
    setIsAdminAuthenticated(false);
    localStorage.removeItem('narayan_admin_auth');
  };

  const handleAdminLogin = (e) => {
    e.preventDefault();
    if (adminPin === '703388') { // Dukandaar PIN
      setIsAdminAuthenticated(true);
      localStorage.setItem('narayan_admin_auth', 'true');
      setActiveTab('admin');
    } else {
      alert('Invalid Admin PIN! Default PIN is 703388');
    }
  };

  // Handle File Input Simulation
  const handleFileUpload = (fieldName, e) => {
    const file = e.target.files[0];
    if (file) {
      setUploadedFiles(prev => ({
        ...prev,
        [fieldName]: { name: file.name, size: (file.size / 1024).toFixed(1) + ' KB' }
      }));
    }
  };

  // Create Order and Prompt Payment Modal
  const initiateOrder = (service) => {
    if (!user) {
      setAuthModal({ open: true, mode: 'login' });
      return;
    }

    let calculatedAmount = service.price || 0;
    if (service.id === 'pdf') {
      calculatedAmount = calculatePdfPrice(pdfPageCount);
    }

    // Check required uploads
    const required = service.fields || [];
    const missing = required.filter(f => !uploadedFiles[f]);
    if (missing.length > 0) {
      alert(`Please upload all required documents (${missing.join(', ')}) before proceeding to payment.`);
      return;
    }

    const orderId = 'NC-' + Math.floor(10000 + Math.random() * 90000);
    const newOrder = {
      id: orderId,
      customerName: user.name,
      mobile: user.mobile,
      address: user.address || 'Self Pick-up / Local Address',
      serviceName: service.title + (service.id === 'pdf' ? ` (${pdfPageCount} Pages)` : ''),
      amount: calculatedAmount,
      status: 'Pending',
      date: new Date().toLocaleString(),
      paymentStatus: 'Payment Pending',
      files: Object.keys(uploadedFiles).map(k => ({ type: k, name: uploadedFiles[k].name }))
    };

    setActivePaymentOrder(newOrder);
  };

  // Confirm Payment & Trigger Store Alert
  const confirmPayment = () => {
    if (!activePaymentOrder) return;
    
    const finalizedOrder = {
      ...activePaymentOrder,
      paymentStatus: 'Paid (UPI)',
      status: 'Received'
    };

    setOrders(prev => [finalizedOrder, ...prev]);
    playAlertSound();
    setReceiptOrder(finalizedOrder);
    setActivePaymentOrder(null);
    setSelectedService(null);
    setUploadedFiles({});
  };

  // Dukandaar update order status
  const updateOrderStatus = (orderId, newStatus) => {
    setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans flex flex-col justify-between">
      
      {/* HEADER SECTION */}
      <header className="bg-slate-900 text-white sticky top-0 z-40 shadow-md">
        <div className="max-w-7xl mx-auto px-4 py-3 flex flex-wrap justify-between items-center gap-4">
          
          {/* Shop Title & Contact */}
          <div className="flex items-center space-x-3 cursor-pointer" onClick={() => setActiveTab('services')}>
            <div className="bg-gradient-to-tr from-blue-600 to-cyan-400 p-2.5 rounded-xl shadow-lg">
              <Printer className="w-7 h-7 text-white" />
            </div>
            <div>
              <h1 className="text-xl md:text-2xl font-black tracking-wide bg-gradient-to-r from-blue-300 via-white to-cyan-300 bg-clip-text text-transparent">
                NARAYAN COMPUTER AND CYBER CAFE
              </h1>
              <p className="text-xs text-slate-400 flex items-center gap-2">
                <span>📞 Call / WhatsApp: <strong>+91 70338 86620</strong></span>
                <span className="bg-emerald-500/20 text-emerald-400 text-[10px] px-1.5 py-0.5 rounded border border-emerald-500/30">ONLINE 24/7</span>
              </p>
            </div>
          </div>

          {/* Navigation Controls */}
          <div className="flex items-center space-x-2 md:space-x-4">
            <button 
              onClick={() => setActiveTab('services')}
              className={`px-3 py-1.5 text-sm rounded-lg font-medium transition flex items-center gap-1.5 ${activeTab === 'services' ? 'bg-blue-600 text-white' : 'hover:bg-slate-800 text-slate-300'}`}
            >
              <Printer className="w-4 h-4" /> Services
            </button>

            {user && (
              <button 
                onClick={() => setActiveTab('orders')}
                className={`px-3 py-1.5 text-sm rounded-lg font-medium transition flex items-center gap-1.5 ${activeTab === 'orders' ? 'bg-blue-600 text-white' : 'hover:bg-slate-800 text-slate-300'}`}
              >
                <Clock className="w-4 h-4" /> My Orders ({orders.filter(o => o.mobile === user.mobile).length})
              </button>
            )}

            <button 
              onClick={() => setActiveTab('admin')}
              className={`px-3 py-1.5 text-sm rounded-lg font-medium transition flex items-center gap-1.5 ${activeTab === 'admin' ? 'bg-emerald-600 text-white' : 'bg-slate-800 hover:bg-slate-700 text-emerald-400 border border-emerald-500/30'}`}
            >
              <ShieldCheck className="w-4 h-4" /> Dukandaar Admin
            </button>

            {/* User Profile / Auth Toggle */}
            {user ? (
              <div className="flex items-center space-x-2 border-l border-slate-700 pl-3">
                <div className="hidden md:block text-right">
                  <p className="text-xs font-semibold text-white">{user.name}</p>
                  <p className="text-[10px] text-slate-400">{user.mobile}</p>
                </div>
                <button 
                  onClick={handleLogout}
                  title="Logout"
                  className="p-2 text-slate-400 hover:text-red-400 hover:bg-slate-800 rounded-lg transition"
                >
                  <LogOut className="w-4 h-4" />
                </button>
              </div>
            ) : (
              <button 
                onClick={() => setAuthModal({ open: true, mode: 'login' })}
                className="bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-4 py-1.5 rounded-lg transition shadow"
              >
                Login / Register
              </button>
            )}
          </div>
        </div>
      </header>

      {/* HERO / NOTICE BANNER */}
      <div className="bg-gradient-to-r from-blue-900 via-indigo-900 to-slate-900 text-white py-6 px-4 shadow-inner">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
          <div>
            <h2 className="text-2xl font-bold text-white mb-1">Ghar Baith Kar Document Print & Apply Karein! 🖨️</h2>
            <p className="text-blue-200 text-sm">Upload files, pay instantly via UPI/Scanner, and get printing & online service delivery right at your door or instant shop pickup.</p>
          </div>
          <div className="flex items-center gap-3 bg-white/10 backdrop-blur-md p-3 rounded-xl border border-white/20">
            <QrCode className="w-8 h-8 text-cyan-300" />
            <div className="text-xs">
              <span className="block text-slate-300">Official Shop Scanner UPI ID:</span>
              <strong className="text-yellow-300 text-sm select-all">7033886620@okbizaxis</strong>
            </div>
          </div>
        </div>
      </div>

      {/* MAIN CONTENT CONTAINERS */}
      <main className="max-w-7xl mx-auto px-4 py-8 flex-grow w-full">
        
        {/* TAB 1: CUSTOMER SERVICES VIEW */}
        {activeTab === 'services' && (
          <div className="space-y-8">
            <div className="flex justify-between items-center border-b pb-4">
              <div>
                <h3 className="text-xl font-bold text-slate-900">Select Service & Upload Documents</h3>
                <p className="text-sm text-slate-500">Fast document printing, PAN, GST, and ITR services</p>
              </div>
            </div>

            {/* SERVICES GRID */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              
              {/* SPECIAL TIERS PDF PRINT CARD */}
              <div className="bg-white rounded-2xl p-6 shadow-md border-2 border-blue-500 hover:shadow-xl transition relative flex flex-col justify-between">
                <span className="absolute top-4 right-4 bg-blue-100 text-blue-700 text-xs font-bold px-2.5 py-1 rounded-full">
                  Popular Service
                </span>
                <div>
                  <div className="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center mb-4">
                    <FileText className="w-6 h-6" />
                  </div>
                  <h4 className="text-lg font-bold text-slate-900 mb-1">PDF Document Print</h4>
                  <p className="text-xs text-slate-500 mb-4">Tiered discount pricing based on document page count.</p>
                  
                  {/* Dynamic Rate Info Chart */}
                  <div className="bg-slate-50 p-3 rounded-lg text-xs space-y-1 mb-4 border border-slate-200">
                    <div className="flex justify-between"><span>• 1 Page:</span> <strong className="text-slate-900">₹10 / Page</strong></div>
                    <div className="flex justify-between text-blue-700 font-medium"><span>• 10 to 50 Pages:</span> <strong>₹5 / Page</strong></div>
                    <div className="flex justify-between text-emerald-700 font-bold"><span>• 50 to 500 Pages:</span> <strong>₹3 / Page</strong></div>
                  </div>

                  {/* PDF Calculator Input */}
                  <div className="mb-4">
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Enter Total PDF Pages:</label>
                    <input 
                      type="number" 
                      min="1" 
                      max="1000" 
                      value={pdfPageCount}
                      onChange={(e) => setPdfPageCount(Math.max(1, parseInt(e.target.value) || 1))}
                      className="w-full border rounded-lg px-3 py-2 text-sm font-semibold text-slate-800 focus:ring-2 focus:ring-blue-500"
                    />
                    <div className="mt-2 text-right">
                      <span className="text-xs text-slate-500">Calculated Total: </span>
                      <strong className="text-lg text-blue-600 font-bold">₹{calculatePdfPrice(pdfPageCount)}</strong>
                    </div>
                  </div>

                  {/* File Upload Box */}
                  <div className="border-2 border-dashed border-slate-300 hover:border-blue-500 rounded-xl p-3 text-center transition bg-slate-50/50 mb-4">
                    <input 
                      type="file" 
                      accept=".pdf,.doc,.docx"
                      onChange={(e) => handleFileUpload('pdfFile', e)}
                      className="hidden" 
                      id="pdf-file-input"
                    />
                    <label htmlFor="pdf-file-input" className="cursor-pointer flex flex-col items-center">
                      <Upload className="w-5 h-5 text-slate-400 mb-1" />
                      <span className="text-xs font-semibold text-blue-600">
                        {uploadedFiles['pdfFile'] ? uploadedFiles['pdfFile'].name : 'Upload PDF File Here'}
                      </span>
                      <span className="text-[10px] text-slate-400">PDF, DOC up to 50MB</span>
                    </label>
                  </div>
                </div>

                <button 
                  onClick={() => initiateOrder(services.find(s => s.id === 'pdf'))}
                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-xl shadow transition text-sm flex items-center justify-center gap-2"
                >
                  <CreditCard className="w-4 h-4" /> Order & Pay ₹{calculatePdfPrice(pdfPageCount)}
                </button>
              </div>

              {/* OTHER DYNAMIC SERVICES CARDS */}
              {services.filter(s => s.id !== 'pdf').map((service) => (
                <div key={service.id} className="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition border border-slate-200 flex flex-col justify-between">
                  <div>
                    <div className="flex justify-between items-start mb-4">
                      <div className="w-12 h-12 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center">
                        <Printer className="w-6 h-6" />
                      </div>
                      <span className="text-xl font-extrabold text-slate-900">₹{service.price}</span>
                    </div>

                    <h4 className="text-lg font-bold text-slate-900 mb-2">{service.title}</h4>
                    <p className="text-xs text-slate-500 mb-4">Upload required documents to submit online request.</p>

                    {/* Required Documents Upload list */}
                    <div className="space-y-2.5 mb-6">
                      <label className="text-xs font-semibold text-slate-700 block">Required Document Uploads:</label>
                      {service.fields && service.fields.map((field) => (
                        <div key={field} className="border border-slate-200 rounded-lg p-2 flex items-center justify-between text-xs bg-slate-50">
                          <span className="font-medium text-slate-700 capitalize">
                            {field.replace(/([A-Z])/g, ' $1')} File
                          </span>
                          <label className="cursor-pointer bg-white border border-slate-300 text-blue-600 px-2.5 py-1 rounded text-[11px] font-semibold hover:bg-blue-50 transition">
                            {uploadedFiles[field] ? '✓ Selected' : 'Choose File'}
                            <input 
                              type="file" 
                              className="hidden"
                              onChange={(e) => handleFileUpload(field, e)} 
                            />
                          </label>
                        </div>
                      ))}
                    </div>
                  </div>

                  <button 
                    onClick={() => initiateOrder(service)}
                    className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-2.5 rounded-xl shadow transition text-sm flex items-center justify-center gap-2"
                  >
                    <CreditCard className="w-4 h-4" /> Pay ₹{service.price} & Order
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* TAB 2: MY ORDERS & STATUS TRACKING */}
        {activeTab === 'orders' && user && (
          <div className="space-y-6">
            <h3 className="text-xl font-bold text-slate-900">My Print & Service Orders</h3>
            
            {orders.filter(o => o.mobile === user.mobile).length === 0 ? (
              <div className="bg-white p-12 text-center rounded-2xl shadow border border-slate-200">
                <ShoppingBag className="w-12 h-12 text-slate-300 mx-auto mb-3" />
                <p className="text-slate-600 font-medium">No active or past orders found.</p>
                <button onClick={() => setActiveTab('services')} className="mt-4 text-blue-600 hover:underline font-semibold text-sm">
                  Browse Services & Order Now
                </button>
              </div>
            ) : (
              <div className="space-y-4">
                {orders.filter(o => o.mobile === user.mobile).map((order) => (
                  <div key={order.id} className="bg-white rounded-2xl p-5 shadow-sm border border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                    <div>
                      <div className="flex items-center gap-3">
                        <span className="text-sm font-bold text-blue-600">{order.id}</span>
                        <span className="text-xs text-slate-400">{order.date}</span>
                      </div>
                      <h4 className="text-base font-bold text-slate-900 mt-1">{order.serviceName}</h4>
                      <p className="text-xs text-slate-500 mt-1">Delivery Address: {order.address}</p>
                    </div>

                    <div className="flex items-center gap-4 w-full md:w-auto justify-between border-t md:border-0 pt-3 md:pt-0">
                      <div className="text-right">
                        <span className="text-base font-bold text-slate-900 block">₹{order.amount}</span>
                        <span className={`text-[11px] font-semibold px-2 py-0.5 rounded-full inline-block ${order.paymentStatus.includes('Paid') ? 'bg-emerald-100 text-emerald-700' : 'bg-yellow-100 text-yellow-700'}`}>
                          {order.paymentStatus}
                        </span>
                      </div>

                      {/* Status Indicator Badge */}
                      <span className={`px-3 py-1 text-xs font-bold rounded-lg ${
                        order.status === 'Completed' ? 'bg-emerald-600 text-white' :
                        order.status === 'Processing' ? 'bg-blue-600 text-white' :
                        'bg-amber-500 text-white'
                      }`}>
                        {order.status}
                      </span>

                      {/* Download Receipt Button */}
                      <button 
                        onClick={() => setReceiptOrder(order)}
                        className="bg-slate-100 hover:bg-slate-200 text-slate-700 p-2 rounded-lg text-xs font-semibold flex items-center gap-1"
                        title="View Bill Receipt"
                      >
                        <FileText className="w-4 h-4" /> Bill
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* TAB 3: DUKANDAAR / ADMIN DASHBOARD */}
        {activeTab === 'admin' && (
          <div>
            {!isAdminAuthenticated ? (
              /* Admin PIN Login Form */
              <div className="max-w-md mx-auto bg-white p-8 rounded-2xl shadow-xl border border-slate-200 text-center">
                <div className="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <ShieldCheck className="w-6 h-6" />
                </div>
                <h3 className="text-xl font-bold text-slate-900">Dukandaar Access Portal</h3>
                <p className="text-xs text-slate-500 mt-1 mb-6">Enter shop owner pin to control customer orders and services</p>
                
                <form onSubmit={handleAdminLogin} className="space-y-4">
                  <input 
                    type="password" 
                    placeholder="Enter Admin PIN (Default: 703388)" 
                    value={adminPin}
                    onChange={(e) => setAdminPin(e.target.value)}
                    className="w-full px-4 py-2.5 border rounded-xl text-center text-lg tracking-widest font-bold focus:ring-2 focus:ring-emerald-500"
                    maxLength={6}
                  />
                  <button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 rounded-xl shadow transition">
                    Unlock Shop Dashboard
                  </button>
                </form>
              </div>
            ) : (
              /* Authenticated Admin Dashboard */
              <div className="space-y-8">
                
                {/* Top Control Bar */}
                <div className="flex flex-wrap justify-between items-center bg-slate-900 text-white p-4 rounded-2xl shadow">
                  <div>
                    <h3 className="text-lg font-bold flex items-center gap-2">
                      <ShieldCheck className="text-emerald-400" /> DUKANDAAR CONTROL CENTER
                    </h3>
                    <p className="text-xs text-slate-400">Manage orders, update rates, and view customer uploads</p>
                  </div>
                  <div className="flex items-center gap-3">
                    <button 
                      onClick={() => playAlertSound()}
                      className="bg-slate-800 hover:bg-slate-700 text-yellow-400 text-xs px-3 py-1.5 rounded-lg border border-yellow-500/30 flex items-center gap-1.5"
                    >
                      <Volume2 className="w-4 h-4" /> Test Sound Alert
                    </button>
                    <button 
                      onClick={() => setIsAdminAuthenticated(false)}
                      className="bg-red-600 hover:bg-red-700 text-white text-xs px-3 py-1.5 rounded-lg font-semibold"
                    >
                      Exit Admin
                    </button>
                  </div>
                </div>

                {/* ORDERS MANAGEMENT TABLE */}
                <div className="bg-white rounded-2xl shadow border border-slate-200 overflow-hidden">
                  <div className="p-4 bg-slate-50 border-b flex justify-between items-center">
                    <h4 className="font-bold text-slate-800 flex items-center gap-2">
                      <Clock className="w-5 h-5 text-blue-600" /> Incoming Customer Orders ({orders.length})
                    </h4>
                  </div>

                  <div className="overflow-x-auto">
                    <table className="w-full text-left border-collapse text-xs md:text-sm">
                      <thead>
                        <tr className="bg-slate-100 text-slate-700 uppercase text-[11px]">
                          <th className="p-3">Order ID & Date</th>
                          <th className="p-3">Customer Details</th>
                          <th className="p-3">Service & Amount</th>
                          <th className="p-3">Uploaded Documents</th>
                          <th className="p-3">Status Control</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-slate-200">
                        {orders.map((o) => (
                          <tr key={o.id} className="hover:bg-slate-50 transition">
                            <td className="p-3 font-medium">
                              <span className="font-bold text-blue-600 block">{o.id}</span>
                              <span className="text-[10px] text-slate-400">{o.date}</span>
                            </td>
                            <td className="p-3">
                              <strong className="text-slate-900 block">{o.customerName}</strong>
                              <span className="text-slate-500 block">📞 {o.mobile}</span>
                              <span className="text-[11px] text-slate-400 block max-w-xs truncate">🏠 {o.address}</span>
                            </td>
                            <td className="p-3">
                              <span className="font-semibold text-slate-800 block">{o.serviceName}</span>
                              <span className="text-emerald-600 font-extrabold text-sm">₹{o.amount} ({o.paymentStatus})</span>
                            </td>
                            <td className="p-3">
                              {o.files && o.files.length > 0 ? (
                                <div className="space-y-1">
                                  {o.files.map((f, i) => (
                                    <span key={i} className="inline-flex items-center gap-1 bg-blue-50 text-blue-700 px-2 py-0.5 rounded text-[10px] font-semibold border border-blue-200">
                                      <FileCheck className="w-3 h-3" /> {f.name}
                                    </span>
                                  ))}
                                </div>
                              ) : (
                                <span className="text-slate-400 italic">No files</span>
                              )}
                            </td>
                            <td className="p-3">
                              <select 
                                value={o.status}
                                onChange={(e) => updateOrderStatus(o.id, e.target.value)}
                                className="border rounded px-2 py-1 text-xs font-semibold bg-white text-slate-800 focus:ring-2 focus:ring-emerald-500"
                              >
                                <option value="Pending">Pending</option>
                                <option value="Processing">Processing / Printing</option>
                                <option value="Completed">Completed</option>
                                <option value="Delivered">Out for Delivery</option>
                              </select>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>

                {/* SERVICE CATALOG EDITOR (DUKANDAAR DYNAMIC ADD/EDIT) */}
                <div className="bg-white rounded-2xl p-6 shadow border border-slate-200 space-y-4">
                  <h4 className="font-bold text-slate-800 flex items-center gap-2">
                    <Settings className="w-5 h-5 text-emerald-600" /> Manage Shop Services & Rates
                  </h4>

                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {services.map((s) => (
                      <div key={s.id} className="p-3 border rounded-xl bg-slate-50 flex justify-between items-center">
                        <div>
                          <strong className="text-sm text-slate-800 block">{s.title}</strong>
                          <span className="text-xs text-emerald-600 font-bold">
                            {s.id === 'pdf' ? 'Tiered Rates (10/5/3)' : `Rate: ₹${s.price}`}
                          </span>
                        </div>
                        {s.id !== 'pdf' && (
                          <input 
                            type="number" 
                            value={s.price} 
                            onChange={(e) => {
                              const newPrice = parseInt(e.target.value) || 0;
                              setServices(prev => prev.map(serv => serv.id === s.id ? { ...serv, price: newPrice } : serv));
                            }}
                            className="w-20 border rounded px-2 py-1 text-xs text-right font-bold"
                          />
                        )}
                      </div>
                    ))}
                  </div>
                </div>

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

      </main>

      {/* MODAL 1: AUTHENTICATION (LOGIN / REGISTER / FORGOT) */}
      {authModal.open && (
        <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl relative">
            <button 
              onClick={() => setAuthModal({ open: false, mode: 'login' })}
              className="absolute top-4 right-4 text-slate-400 hover:text-slate-600"
            >
              ✕
            </button>

            <h3 className="text-xl font-bold text-slate-900 mb-2">
              {authModal.mode === 'login' && 'Customer Login'}
              {authModal.mode === 'register' && 'New Account Registration'}
              {authModal.mode === 'forgot' && 'Reset Password'}
            </h3>

            <form onSubmit={handleAuthSubmit} className="space-y-4 mt-4">
              {authModal.mode === 'register' && (
                <>
                  <div>
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Full Name</label>
                    <input name="name" required placeholder="e.g. Rahul Kumar" className="w-full border rounded-lg px-3 py-2 text-sm" />
                  </div>
                  <div>
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Full Address for Delivery</label>
                    <textarea name="address" required placeholder="House No, Street, Landmark, City" className="w-full border rounded-lg px-3 py-2 text-sm" rows={2}></textarea>
                  </div>
                  <div>
                    <label className="block text-xs font-semibold text-slate-700 mb-1">Email ID</label>
                    <input name="email" type="email" required placeholder="name@example.com" className="w-full border rounded-lg px-3 py-2 text-sm" />
                  </div>
                </>
              )}

              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Mobile Number</label>
                <input name="mobile" required placeholder="10 Digit Mobile Number" className="w-full border rounded-lg px-3 py-2 text-sm" />
              </div>

              {authModal.mode !== 'forgot' && (
                <div>
                  <label className="block text-xs font-semibold text-slate-700 mb-1">Password</label>
                  <input name="password" type="password" required placeholder="••••••••" className="w-full border rounded-lg px-3 py-2 text-sm" />
                </div>
              )}

              <button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-xl transition text-sm">
                {authModal.mode === 'login' && 'Login Now'}
                {authModal.mode === 'register' && 'Create Account'}
                {authModal.mode === 'forgot' && 'Send Reset Link'}
              </button>
            </form>

            <div className="mt-4 text-center text-xs text-slate-500 space-y-1">
              {authModal.mode === 'login' ? (
                <>
                  <p>Don't have an account? <button onClick={() => setAuthModal({ open: true, mode: 'register' })} className="text-blue-600 font-bold hover:underline">Register Here</button></p>
                  <p><button onClick={() => setAuthModal({ open: true, mode: 'forgot' })} className="text-slate-400 hover:underline">Forgot Password?</button></p>
                </>
              ) : (
                <p>Already have an account? <button onClick={() => setAuthModal({ open: true, mode: 'login' })} className="text-blue-600 font-bold hover:underline">Login Here</button></p>
              )}
            </div>
          </div>
        </div>
      )}

      {/* MODAL 2: DYNAMIC UPI PAYMENT GATEWAY & SCANNER */}
      {activePaymentOrder && (
        <div className="fixed inset-0 bg-slate-900/70 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl max-w-lg w-full p-6 shadow-2xl relative overflow-hidden">
            
            {/* Header */}
            <div className="bg-blue-600 -mx-6 -mt-6 p-4 text-white text-center mb-6">
              <h3 className="font-extrabold text-lg">UPI / SCANNER PAYMENT GATEWAY</h3>
              <p className="text-xs text-blue-100">NARAYAN COMPUTER AND CYBER CAFE</p>
            </div>

            <div className="space-y-4 text-center">
              <div>
                <span className="text-xs text-slate-400 block">Total Payable Amount</span>
                <span className="text-3xl font-black text-emerald-600">₹{activePaymentOrder.amount}</span>
                <p className="text-xs text-slate-600 font-medium mt-1">{activePaymentOrder.serviceName}</p>
              </div>

              {/* DYNAMIC QR CODE DISPLAY */}
              <div className="bg-slate-50 border-2 border-dashed border-blue-400 rounded-2xl p-4 inline-block mx-auto shadow-inner">
                <img 
                  src={`https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(
                    `upi://pay?pa=7033886620@okbizaxis&pn=Narayan Computer And Cyber Cafe&am=${activePaymentOrder.amount}&cu=INR`
                  )}`}
                  alt="Dynamic UPI QR Scanner"
                  className="w-48 h-48 mx-auto rounded-lg shadow-md"
                />
                <p className="text-[11px] font-bold text-slate-700 mt-2">Scan & Pay using GPay, PhonePe, Paytm</p>
                <p className="text-[10px] text-blue-600 font-mono mt-0.5">UPI ID: 7033886620@okbizaxis</p>
              </div>

              <div className="bg-amber-50 border border-amber-200 text-amber-800 p-3 rounded-xl text-xs text-left">
                <strong>📌 Payment Alert Note:</strong> After paying via Google Pay or PhonePe scanner, click below to confirm. The store owner will automatically receive an order alert.
              </div>

              <div className="flex gap-3 pt-2">
                <button 
                  onClick={() => setActivePaymentOrder(null)}
                  className="w-1/2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold py-2.5 rounded-xl text-xs"
                >
                  Cancel Order
                </button>
                <button 
                  onClick={confirmPayment}
                  className="w-1/2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 rounded-xl shadow-lg transition text-xs flex items-center justify-center gap-1.5"
                >
                  <CheckCircle className="w-4 h-4" /> I Have Paid ₹{activePaymentOrder.amount}
                </button>
              </div>
            </div>

          </div>
        </div>
      )}

      {/* MODAL 3: DIGITAL BILL RECEIPT */}
      {receiptOrder && (
        <div className="fixed inset-0 bg-slate-900/70 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl relative border-t-8 border-emerald-500">
            <button 
              onClick={() => setReceiptOrder(null)}
              className="absolute top-3 right-3 text-slate-400 hover:text-slate-600"
            >
              ✕
            </button>

            <div className="text-center border-b pb-4 mb-4">
              <h3 className="text-lg font-black text-slate-900">NARAYAN COMPUTER</h3>
              <p className="text-xs text-slate-500">Cyber Cafe & Online Digital Services</p>
              <p className="text-[10px] text-slate-400">Mobile: +91 70338 86620</p>
            </div>

            <div className="space-y-2 text-xs mb-6">
              <div className="flex justify-between">
                <span className="text-slate-500">Bill Order ID:</span>
                <strong className="text-slate-900">{receiptOrder.id}</strong>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Date & Time:</span>
                <span>{receiptOrder.date}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Customer Name:</span>
                <strong className="text-slate-900">{receiptOrder.customerName}</strong>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">Mobile Number:</span>
                <span>{receiptOrder.mobile}</span>
              </div>
              <div className="flex justify-between border-t pt-2 mt-2">
                <span className="text-slate-500">Service Chosen:</span>
                <strong className="text-slate-900">{receiptOrder.serviceName}</strong>
              </div>
              <div className="flex justify-between text-sm font-bold border-t border-b py-2 text-emerald-600">
                <span>Total Amount Paid:</span>
                <span>₹{receiptOrder.amount}</span>
              </div>
              <div className="flex justify-between text-[11px]">
                <span className="text-slate-500">Payment Status:</span>
                <span className="text-emerald-600 font-bold">{receiptOrder.paymentStatus}</span>
              </div>
            </div>

            <button 
              onClick={() => {
                window.print();
              }}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-xl shadow transition text-xs flex items-center justify-center gap-2"
            >
              <Download className="w-4 h-4" /> Download / Print Digital Bill
            </button>
          </div>
        </div>
      )}

      {/* FOOTER */}
      <footer className="bg-slate-900 text-slate-400 text-xs py-6 border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4 text-center md:text-left">
          <div>
            <p className="font-bold text-white text-sm">NARAYAN COMPUTER AND CYBER CAFE</p>
            <p className="text-slate-500 mt-0.5">Your Trusted Digital & Document Center • Contact: +91 70338 86620</p>
          </div>
          <div className="text-slate-500">
            © {new Date().getFullYear()} All Rights Reserved. Dynamic UPI & Document Service Portal.
          </div>
        </div>
      </footer>

    </div>
  );
}