import React, { useState, useEffect } from 'react';
import { 
  Building2, 
  FileText, 
  CreditCard, 
  CheckCircle, 
  ShieldCheck, 
  Printer, 
  Download, 
  ChevronRight, 
  AlertCircle,
  Menu,
  Search,
  Lock,
  Flag
} from 'lucide-react';

const App = () => {
  const [view, setView] = useState('dashboard'); // dashboard, processing, success, invoice
  const [isLoading, setIsLoading] = useState(false);
  const [transactionId] = useState(`GOV-${Math.floor(Math.random() * 1000000000)}`);
  const [date] = useState(new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }));

  const amount = 225.00;
  const tax = 17.00;
  const total = amount + tax;

  const handlePay = () => {
    setView('processing');
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setView('success');
    }, 2000);
  };

  const handlePrint = () => {
    window.print();
  };

  const InvoiceView = () => (
    <div className="bg-white shadow-2xl max-w-[8.5in] mx-auto my-8 min-h-[11in] flex flex-col print:shadow-none print:m-0 print:w-full print:h-full font-serif text-black">
      
      {/* Official Header Area */}
      <div className="p-12 pb-6 border-b-4 border-black flex justify-between items-start">
        <div className="flex flex-col items-center w-full">
           <div className="flex items-center gap-4 mb-4">
            <div className="w-16 h-16 border-2 border-black rounded-full flex items-center justify-center">
               <div className="w-12 h-12 border border-black rounded-full flex items-center justify-center">
                  <span className="font-bold text-2xl">US</span>
               </div>
            </div>
            <div className="text-center">
              <h1 className="text-3xl font-bold uppercase tracking-widest font-serif">United States of America</h1>
              <h2 className="text-sm font-bold uppercase tracking-wide mt-1">Receipt for Payment</h2>
              <p className="text-xs uppercase mt-1">Department of General Services • Washington D.C.</p>
            </div>
             <div className="w-16 h-16 border-2 border-black rounded-full flex items-center justify-center">
               <div className="w-12 h-12 border border-black rounded-full flex items-center justify-center">
                  <span className="font-bold text-2xl">GS</span>
               </div>
            </div>
           </div>
        </div>
      </div>

      {/* Meta Data Row */}
      <div className="grid grid-cols-4 border-b border-black text-xs">
        <div className="p-2 border-r border-black">
          <span className="block font-bold uppercase">Date Issued</span>
          <span>{date}</span>
        </div>
        <div className="p-2 border-r border-black">
          <span className="block font-bold uppercase">Transaction ID</span>
          <span>{transactionId}</span>
        </div>
        <div className="p-2 border-r border-black">
          <span className="block font-bold uppercase">Form No.</span>
          <span>GSA-2025-REF</span>
        </div>
        <div className="p-2">
           <span className="block font-bold uppercase">OMB Control No.</span>
           <span>3090-XXXX</span>
        </div>
      </div>

      {/* Payer Info Block */}
      <div className="p-8 grid grid-cols-2 gap-12 border-b border-black">
        <div>
          <h3 className="text-xs font-bold uppercase border-b border-black mb-2 pb-1">Payer Information</h3>
          <div className="text-sm leading-relaxed">
            <p><strong>Name:</strong> GOVERNMENT CONSOLE USER</p>
            <p><strong>ID Number:</strong> 884-29-XXXX</p>
            <p><strong>Origin:</strong> CONSOLE_TERMINAL_01</p>
            <p><strong>Status:</strong> <span className="uppercase">Verified</span></p>
          </div>
        </div>
        <div>
           <h3 className="text-xs font-bold uppercase border-b border-black mb-2 pb-1">Payment Details</h3>
           <div className="text-sm leading-relaxed">
             <p><strong>Method:</strong> CREDIT CARD (VISA)</p>
             <p><strong>Account:</strong> ************4242</p>
             <p><strong>Auth Code:</strong> 098231</p>
             <p><strong>Agency Location Code:</strong> 14-00-0001</p>
           </div>
        </div>
      </div>

      {/* Line Items Table - Strict Format */}
      <div className="p-8">
        <h3 className="text-center font-bold uppercase mb-4 text-sm decoration-double underline">Itemized Charges</h3>
        <table className="w-full border-collapse border border-black text-sm">
          <thead>
            <tr className="bg-gray-100">
              <th className="border border-black p-2 text-left w-16">Item</th>
              <th className="border border-black p-2 text-left">Description of Services</th>
              <th className="border border-black p-2 text-center w-24">Ref Code</th>
              <th className="border border-black p-2 text-right w-32">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border border-black p-2 text-center">001</td>
              <td className="border border-black p-2">
                <p className="font-bold">Standard Processing Fee</p>
                <p className="text-xs">Service provided via digital console.</p>
              </td>
              <td className="border border-black p-2 text-center font-mono text-xs">SVC-01</td>
              <td className="border border-black p-2 text-right">${amount.toFixed(2)}</td>
            </tr>
            <tr>
              <td className="border border-black p-2 text-center">002</td>
              <td className="border border-black p-2">
                <p className="font-bold">Federal Transaction Tax (7%)</p>
                <p className="text-xs">Mandated by Federal Regulation 42 CFR.</p>
              </td>
              <td className="border border-black p-2 text-center font-mono text-xs">TAX-07</td>
              <td className="border border-black p-2 text-right">${tax.toFixed(2)}</td>
            </tr>
            {/* Empty rows for visual height similar to real forms */}
            {[...Array(3)].map((_, i) => (
              <tr key={i}>
                 <td className="border border-black p-2 text-center">&nbsp;</td>
                 <td className="border border-black p-2">&nbsp;</td>
                 <td className="border border-black p-2">&nbsp;</td>
                 <td className="border border-black p-2">&nbsp;</td>
              </tr>
            ))}
          </tbody>
          <tfoot>
             <tr className="bg-gray-50">
               <td colSpan="3" className="border border-black p-2 text-right font-bold uppercase text-xs">Total Amount Paid</td>
               <td className="border border-black p-2 text-right font-bold text-lg">${total.toFixed(2)}</td>
             </tr>
          </tfoot>
        </table>
      </div>

      {/* Remittance Advice / Barcode Section */}
      <div className="mt-auto m-8 border-2 border-dashed border-black p-4">
        <div className="flex justify-between items-center mb-4">
           <span className="font-bold uppercase text-xs">Remittance Advice - Do Not Mail</span>
           <span className="font-mono text-xs">KEEP FOR YOUR RECORDS</span>
        </div>
        
        <div className="flex justify-between items-end">
           <div className="font-mono text-xs space-y-1">
             <p>DCN: {transactionId}</p>
             <p>AMT: {total.toFixed(2)} USD</p>
             <p>USR: GUEST-CONSOLE</p>
           </div>
           
           {/* Simulated Barcode */}
           <div className="h-12 flex items-end gap-[2px]">
              {[...Array(40)].map((_, i) => (
                <div key={i} className={`bg-black h-full w-[2px] ${Math.random() > 0.5 ? 'opacity-100' : 'opacity-0'}`}></div>
              ))}
              <div className="ml-2 font-mono text-xs tracking-widest">{transactionId}</div>
           </div>
        </div>
      </div>

      {/* Footer Disclaimer */}
      <div className="px-12 pb-12 text-center">
        <p className="text-[10px] leading-tight text-gray-600 uppercase">
          Penalty for Private Use $300 • Official Business <br/>
          This receipt is electronically generated and valid without signature. <br/>
          Any attempt to forge or alter this document is a federal offense under 18 U.S.C. § 1001.
        </p>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-100 font-sans text-slate-900 flex flex-col">
      {/* Official Banner */}
      <div className="bg-slate-200 px-4 py-1 text-xs text-slate-700 flex items-center justify-between print:hidden">
        <div className="flex items-center gap-2">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_the_United_States.svg/320px-Flag_of_the_United_States.svg.png" alt="US Flag" className="h-3 w-5 object-cover shadow-sm" />
          <span>An official website of the United States government (Simulation)</span>
        </div>
      </div>

      {/* Header */}
      <header className="bg-[#112e51] text-white border-b-4 border-[#e31c3d] print:hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Building2 className="w-8 h-8" />
            <div>
              <h1 className="font-bold text-lg leading-tight">Department of General Services</h1>
              <p className="text-xs font-light text-slate-300">Payment & Console Services</p>
            </div>
          </div>
          <nav className="hidden md:flex items-center gap-6 text-sm font-medium">
            <span className="cursor-pointer hover:underline">Home</span>
            <span className="cursor-pointer hover:underline">Payments</span>
            <span className="cursor-pointer hover:underline">Documents</span>
            <div className="flex items-center gap-2 cursor-pointer">
              <Search className="w-4 h-4" />
              <span>Search</span>
            </div>
          </nav>
          <Menu className="md:hidden w-6 h-6" />
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-grow print:bg-white">
        {view === 'dashboard' && (
          <div className="max-w-3xl mx-auto px-4 py-12">
            <div className="mb-8">
              <h2 className="text-3xl font-bold text-[#112e51] mb-2">Payment Console</h2>
              <div className="h-1 w-20 bg-[#e31c3d]"></div>
            </div>

            <div className="grid gap-6">
              {/* Alert Banner */}
              <div className="bg-[#e7f6f8] border-l-8 border-[#00a6d2] p-4 flex gap-4">
                <AlertCircle className="w-6 h-6 text-[#00a6d2] flex-shrink-0" />
                <div>
                  <h3 className="font-bold text-[#112e51]">Action Required</h3>
                  <p className="text-sm text-slate-700">You have one pending invoice due immediately. Secure payment processing is active.</p>
                </div>
              </div>

              {/* Payment Card */}
              <div className="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
                <div className="bg-slate-50 px-6 py-4 border-b border-slate-200 flex justify-between items-center">
                  <span className="font-semibold text-slate-700">Invoice Summary</span>
                  <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full font-bold">PENDING</span>
                </div>
                
                <div className="p-6 space-y-4">
                  <div className="flex justify-between items-center text-slate-600">
                    <span>Service Fee</span>
                    <span className="font-mono">${amount.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between items-center text-slate-600">
                    <span className="flex items-center gap-1">
                      Federal Tax <span className="text-xs text-slate-400">(7%)</span>
                    </span>
                    <span className="font-mono">${tax.toFixed(2)}</span>
                  </div>
                  
                  <div className="border-t border-slate-200 pt-4 mt-4">
                    <div className="flex justify-between items-center">
                      <span className="text-lg font-bold text-[#112e51]">Total Due</span>
                      <span className="text-2xl font-bold text-[#112e51]">${total.toFixed(2)}</span>
                    </div>
                  </div>
                </div>

                <div className="bg-slate-50 px-6 py-4 border-t border-slate-200">
                  <button 
                    onClick={handlePay}
                    className="w-full bg-[#005ea2] hover:bg-[#1a4480] text-white font-bold py-3 px-4 rounded flex items-center justify-center gap-2 transition-colors focus:ring-4 focus:ring-[#005ea2]/50 focus:outline-none"
                  >
                    <ShieldCheck className="w-5 h-5" />
                    Pay ${total.toFixed(2)} Securely
                  </button>
                  <div className="mt-3 text-center flex items-center justify-center gap-1 text-xs text-slate-500">
                    <Lock className="w-3 h-3" />
                    <span>256-bit SSL Encrypted Transaction</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {view === 'processing' && (
          <div className="flex flex-col items-center justify-center min-h-[500px]">
            <div className="w-16 h-16 border-4 border-[#e31c3d] border-t-transparent rounded-full animate-spin mb-6"></div>
            <h3 className="text-xl font-bold text-[#112e51]">Processing Payment...</h3>
            <p className="text-slate-500 mt-2">Please do not close this window.</p>
          </div>
        )}

        {view === 'success' && (
          <div className="max-w-2xl mx-auto px-4 py-12">
            <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-8 text-center">
              <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
                <CheckCircle className="w-8 h-8" />
              </div>
              <h2 className="text-2xl font-bold text-[#112e51] mb-2">Payment Successful</h2>
              <p className="text-slate-600 mb-8">
                Your payment of <strong>${total.toFixed(2)}</strong> has been processed successfully. <br/>
                Transaction ID: <span className="font-mono text-slate-800 bg-slate-100 px-1 rounded">{transactionId}</span>
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button 
                  onClick={() => setView('invoice')}
                  className="bg-[#005ea2] hover:bg-[#1a4480] text-white font-bold py-3 px-6 rounded flex items-center justify-center gap-2 transition-colors"
                >
                  <FileText className="w-5 h-5" />
                  View Official Receipt
                </button>
                <button 
                  onClick={() => setView('dashboard')}
                  className="bg-white border-2 border-[#005ea2] text-[#005ea2] hover:bg-slate-50 font-bold py-3 px-6 rounded flex items-center justify-center gap-2 transition-colors"
                >
                  Return to Console
                </button>
              </div>
            </div>
          </div>
        )}

        {view === 'invoice' && (
          <div className="max-w-5xl mx-auto px-4 pb-12 print:max-w-none print:px-0 print:pb-0">
            <div className="py-6 flex justify-between items-center print:hidden">
              <button 
                onClick={() => setView('success')}
                className="text-[#005ea2] hover:underline flex items-center gap-1 font-medium"
              >
                <ChevronRight className="w-4 h-4 rotate-180" />
                Back to Confirmation
              </button>
              <div className="flex gap-3">
                <button 
                  onClick={handlePrint}
                  className="bg-[#005ea2] hover:bg-[#1a4480] text-white font-bold py-2 px-4 rounded flex items-center gap-2 text-sm shadow-sm"
                >
                  <Printer className="w-4 h-4" />
                  Print / Save as PDF
                </button>
                <button 
                  onClick={handlePrint}
                  className="bg-white border border-slate-300 text-slate-700 hover:bg-slate-50 font-medium py-2 px-4 rounded flex items-center gap-2 text-sm shadow-sm"
                >
                  <Download className="w-4 h-4" />
                  Download PDF
                </button>
              </div>
            </div>
            
            <InvoiceView />
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-[#1b1b1b] text-white py-12 print:hidden">
        <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="col-span-1 md:col-span-2">
            <h4 className="font-bold text-lg mb-4">Department of General Services</h4>
            <p className="text-gray-400 text-sm max-w-sm">
              This is a secure payment simulation portal designed for demonstration purposes only. 
              No actual funds are transferred. Do not use real banking credentials.
            </p>
          </div>
          <div>
            <h4 className="font-bold text-sm uppercase tracking-wider mb-4">Support</h4>
            <ul className="space-y-2 text-sm text-gray-400">
              <li className="hover:text-white cursor-pointer">Help Center</li>
              <li className="hover:text-white cursor-pointer">Contact Us</li>
              <li className="hover:text-white cursor-pointer">System Status</li>
            </ul>
          </div>
          <div>
            <h4 className="font-bold text-sm uppercase tracking-wider mb-4">Legal</h4>
            <ul className="space-y-2 text-sm text-gray-400">
              <li className="hover:text-white cursor-pointer">Privacy Policy</li>
              <li className="hover:text-white cursor-pointer">Terms of Use</li>
              <li className="hover:text-white cursor-pointer">Accessibility</li>
            </ul>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;