import React, { useState, useEffect, useMemo } from 'react';
import { 
  Plane, 
  ShoppingCart, 
  ChevronLeft, 
  ShieldCheck, 
  Terminal,
  ChevronRight,
  Zap,
  Info,
  Clock,
  ArrowUpRight
} from 'lucide-react';

// --- CONFIGURATION ---
const NODE_ID = "903-BKK";
const BLOCK_PRICE = 903;
const VAT_RATE = 0.07;
// REPLACE THIS LINK WITH YOUR ACTUAL STRIPE PAYMENT LINK
const STRIPE_BASE_URL = "https://buy.stripe.com/your_link_here";

const PRODUCTS = [
  { id: 'tote-0', name: 'ZERO TOTE', category: 'HARDWARE', blocks: 4, desc: 'Aero-grade rivets, raw hide' },
  { id: 'msg-0', name: 'MESSENGER', category: 'HARDWARE', blocks: 5, desc: 'Technical carry system' },
  { id: 'blk-0', name: 'BRICK 903', category: 'HARDWARE', blocks: 1, desc: 'Modular storage unit' },
  { id: 'fuel-hot', name: 'FUEL: HOT', category: 'REFUEL', price: 60, desc: 'Black Gasoline - Single Lead' },
  { id: 'fuel-cold', name: 'FUEL: COLD', category: 'REFUEL', price: 60, desc: 'Black Gasoline - High Octane' },
];

// --- MAIN APPLICATION ---

const App = () => {
  const [cart, setCart] = useState([]);
  const [view, setView] = useState('MANIFEST'); // MANIFEST, CHECKOUT
  const [currentTime, setCurrentTime] = useState('');

  // Clock Update & Global Styles
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }));
    }, 1000);

    const link = document.createElement('link');
    link.href = "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;700;900&display=swap";
    link.rel = "stylesheet";
    document.head.appendChild(link);

    return () => clearInterval(timer);
  }, []);

  const addToCart = (product) => {
    setCart(prev => [...prev, { ...product, instanceId: Math.random() }]);
  };

  const removeFromCart = (instanceId) => {
    setCart(prev => prev.filter(item => item.instanceId !== instanceId));
  };

  const totals = useMemo(() => {
    const totalBlocks = cart.reduce((acc, item) => acc + (item.blocks || 0), 0);
    const gross = cart.reduce((acc, item) => {
      const price = item.blocks ? item.blocks * BLOCK_PRICE : item.price;
      return acc + price;
    }, 0);
    const net = gross / (1 + VAT_RATE);
    const vat = gross - net;
    return { gross, net, vat, totalBlocks };
  }, [cart]);

  const handleStripeCheckout = () => {
    if (cart.length === 0) return;
    
    // Logic: If using Stripe Payment Links with quantities enabled, 
    // we can pass the total blocks or total units as a quantity parameter.
    // Note: This requires the Stripe Link to have "Adjustable Quantity" enabled.
    const checkoutUrl = new URL(STRIPE_BASE_URL);
    
    // We redirect to the Stripe checkout page
    // For specific block-based logic, users can also use Stripe Price IDs
    window.location.href = checkoutUrl.toString();
  };

  // --- SUB-COMPONENTS ---

  const Header = () => (
    <header className="bg-white text-black p-6 border-b-4 border-black flex justify-between items-end sticky top-0 z-50">
      <div>
        <div className="flex items-center gap-2 mb-1">
          <Terminal size={18} strokeWidth={3} />
          <span className="text-[10px] font-mono font-bold tracking-[0.3em] uppercase">Node {NODE_ID}</span>
        </div>
        <h1 className="text-4xl font-black tracking-tighter leading-none uppercase italic">DWNTWN</h1>
      </div>
      <div className="text-right font-mono text-[10px] font-bold leading-tight">
        <div className="flex items-center gap-2 justify-end uppercase">
          <div className="w-2 h-2 bg-black rounded-full animate-pulse" />
          SYSTEM_LIVE
        </div>
        <p className="mt-1">{currentTime} BKK</p>
      </div>
    </header>
  );

  const ProductRow = ({ product }) => (
    <div className="border-b border-black/10 p-6 flex justify-between items-center hover:bg-zinc-50 transition-colors">
      <div className="flex-1">
        <div className="flex items-center gap-2 mb-2">
          <span className={`text-[9px] px-2 py-0.5 font-bold tracking-widest border border-black ${product.category === 'HARDWARE' ? 'bg-black text-white' : 'bg-transparent text-black'}`}>
            {product.category}
          </span>
          <span className="font-mono text-[10px] opacity-30 italic">Ref: {product.id}</span>
        </div>
        <h3 className="text-xl font-black tracking-tight uppercase leading-none">{product.name}</h3>
        <p className="text-[10px] font-mono mt-1 opacity-50 uppercase tracking-tighter">{product.desc}</p>
      </div>
      <div className="text-right flex flex-col items-end gap-3">
        <div className="font-mono text-xl font-black tracking-tighter italic">
          {product.blocks ? `${product.blocks} BLOCKS` : `${product.price} THB`}
        </div>
        <button 
          onClick={() => addToCart(product)}
          className="bg-white border-2 border-black text-black px-4 py-2 text-[10px] font-black uppercase flex items-center gap-2 hover:bg-black hover:text-white transition-all active:scale-95"
        >
          SELECT <ChevronRight size={14} />
        </button>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white">
      <Header />
      
      <main className="max-w-xl mx-auto min-h-screen border-x border-black/5 relative pb-40">
        
        {view === 'MANIFEST' ? (
          <div className="animate-in fade-in duration-300">
            <div className="bg-zinc-100 p-4 flex items-center justify-between border-b border-black/10">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2 text-[10px] font-mono font-bold text-black/40 italic">
                  <Info size={12} /> JET WING 903 DISPATCH
                </div>
              </div>
              <div className="text-[9px] font-mono font-bold text-black/40 uppercase tracking-widest">
                Driveway Protocol V.01
              </div>
            </div>
            
            <div className="divide-y divide-black/5">
              {PRODUCTS.map(p => <ProductRow key={p.id} product={p} />)}
            </div>
            
            <div className="p-20 text-center flex flex-col items-center gap-6 opacity-10">
              <Plane size={64} strokeWidth={1} className="rotate-90" />
              <p className="text-[10px] font-mono tracking-[0.4em] uppercase">Songwat Road Terminal</p>
            </div>
          </div>
        ) : (
          <div className="p-6 space-y-8 animate-in slide-in-from-bottom-4 duration-300">
            <button onClick={() => setView('MANIFEST')} className="flex items-center gap-2 text-[10px] font-mono font-bold uppercase opacity-40 hover:opacity-100">
              <ChevronLeft size={16} /> Edit Departure Manifest
            </button>
            
            <div className="border-4 border-black">
              <div className="bg-black text-white p-3 text-[10px] font-black uppercase tracking-widest flex justify-between italic">
                <span>Unit Manifest</span>
                <span>Qty: {cart.length}</span>
              </div>
              <div className="divide-y divide-black/10">
                {cart.length === 0 ? (
                  <div className="p-12 text-center font-mono text-[10px] opacity-30 uppercase italic">Payload Empty</div>
                ) : (
                  cart.map(item => (
                    <div key={item.instanceId} className="p-4 flex justify-between items-center">
                      <div>
                        <p className="font-black text-lg uppercase leading-none tracking-tighter">{item.name}</p>
                        <p className="text-[9px] font-mono opacity-40 mt-1 uppercase">Block Allocation Authorized</p>
                      </div>
                      <div className="flex items-center gap-6">
                        <span className="font-mono font-bold text-lg">
                          {item.blocks ? `${item.blocks * BLOCK_PRICE}฿` : `${item.price}฿`}
                        </span>
                        <button onClick={() => removeFromCart(item.instanceId)} className="text-black/20 hover:text-black">
                          <Zap size={14} />
                        </button>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>

            <div className="space-y-4 p-6 bg-zinc-50 border-2 border-black/5">
              <div className="flex justify-between font-mono text-xs font-bold opacity-40 uppercase">
                <span>Sub-Total (Net)</span>
                <span>{totals.net.toLocaleString(undefined, { minimumFractionDigits: 2 })} ฿</span>
              </div>
              <div className="flex justify-between font-mono text-xs font-bold opacity-40 uppercase">
                <span>VAT ({VAT_RATE * 100}%)</span>
                <span>{totals.vat.toLocaleString(undefined, { minimumFractionDigits: 2 })} ฿</span>
              </div>
              <div className="flex justify-between font-black text-3xl border-t-2 border-black pt-4 italic">
                <span>TOTAL DUE</span>
                <span>{totals.gross.toLocaleString()} ฿</span>
              </div>
            </div>

            <button 
              disabled={cart.length === 0}
              onClick={handleStripeCheckout}
              className={`w-full py-6 text-center font-black text-2xl uppercase tracking-tighter flex items-center justify-center gap-3 transition-all ${
                cart.length > 0 ? 'bg-black text-white active:scale-95' : 'bg-zinc-100 text-zinc-300 cursor-not-allowed'
              }`}
            >
              <ArrowUpRight size={28} /> AUTHORIZE STRIPE
            </button>
            
            <p className="text-[9px] text-center font-mono opacity-40 uppercase leading-relaxed max-w-xs mx-auto">
              Terminal transactions are final. 
              Billing entity: The Little Soi Co Ltd.
            </p>
          </div>
        )}

        {/* STICKY STATUS BAR */}
        {view === 'MANIFEST' && (
          <div className="fixed bottom-0 left-0 right-0 p-6 bg-white/90 backdrop-blur-xl border-t-4 border-black max-w-xl mx-auto z-50">
            <div className="flex justify-between items-center">
              <div>
                <p className="text-[10px] font-mono font-black uppercase opacity-40">Current Payload</p>
                <p className="text-3xl font-black italic tracking-tighter">{totals.gross.toLocaleString()} ฿</p>
              </div>
              <button 
                onClick={() => setView('CHECKOUT')}
                disabled={cart.length === 0}
                className={`flex items-center gap-3 px-8 py-4 font-black text-sm uppercase italic transition-all ${
                  cart.length > 0 ? 'bg-black text-white active:scale-95 shadow-xl' : 'bg-zinc-100 text-zinc-300'
                }`}
              >
                Checkout <ShoppingCart size={20} />
                {cart.length > 0 && (
                  <span className="bg-white text-black w-6 h-6 flex items-center justify-center text-[10px] font-black rounded-full ml-1">
                    {cart.length}
                  </span>
                )}
              </button>
            </div>
          </div>
        )}
      </main>

      <style>{`
        body { margin: 0; background: #fff; }
        * { font-family: 'Inter', sans-serif; }
        .font-mono { font-family: 'JetBrains+Mono', monospace; }
      `}</style>
    </div>
  );
};

export default App;