import { useState, useEffect } from 'react';
import { Award, Zap, Shield, Users, ChevronRight } from 'lucide-react';

interface FoundryAppProps {
  openIframeWindow?: (url: string, title: string) => void;
}

export function FoundryApp({ openIframeWindow }: FoundryAppProps) {
  const [viewMode, setViewMode] = useState<'info' | 'enroll'>('info');
  const [promoCode, setPromoCode] = useState('');
  const [promoApplied, setPromoApplied] = useState(false);
  
  const basePrice = 500;
  const discount = promoApplied && promoCode.toUpperCase() === 'TERMINAL10' ? 0.10 : 0;
  const finalPrice = basePrice * (1 - discount);

  useEffect(() => {
    fetch('/api/track/event', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ event_type: 'foundry_open', source: 'foundry-app', timestamp: new Date().toISOString() })
    }).catch(() => {});
  }, []);
  
  return (
    <div className="min-h-full bg-gradient-to-br from-yellow-950 to-black flex flex-col font-mono">
      <div className="flex items-center justify-between p-2.5 md:p-3 border-b border-yellow-500/30 bg-yellow-500/5">
        <div className="flex items-center gap-2">
          <Award className="w-4 h-4 text-yellow-400" />
          <span className="text-yellow-400 text-xs md:text-sm uppercase tracking-wider">FOUNDRY.EXE</span>
        </div>
        <div className="flex items-center gap-1 md:gap-2">
          <button 
            onClick={() => setViewMode('info')}
            className={`px-2 py-1 text-[10px] md:text-xs uppercase ${viewMode === 'info' ? 'bg-yellow-500 text-black' : 'text-yellow-400 hover:bg-yellow-500/20'} transition-colors`}
          >
            Info
          </button>
          <button 
            onClick={() => setViewMode('enroll')}
            className={`px-2 py-1 text-[10px] md:text-xs uppercase ${viewMode === 'enroll' ? 'bg-yellow-500 text-black' : 'text-yellow-400 hover:bg-yellow-500/20'} transition-colors`}
          >
            Enroll
          </button>
        </div>
      </div>
      
      {viewMode === 'info' ? (
        <div className="flex-1 flex flex-col items-center justify-center p-4 md:p-6 text-center overflow-auto">
          <div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-yellow-500/20 border-2 border-yellow-500/50 flex items-center justify-center mb-4 md:mb-6">
            <Award className="w-8 h-8 md:w-10 md:h-10 text-yellow-400" />
          </div>
          <h2 className="text-xl md:text-2xl font-bold text-yellow-400 mb-2">The Foundry</h2>
          <p className="text-white/70 text-xs md:text-sm mb-4 md:mb-6 max-w-xs px-4 md:px-0">
            Train to become a certified Metaverse Architect. Learn the protocols. Join the network.
          </p>
          <div className="space-y-2 text-left text-xs md:text-sm text-white/60 mb-4 md:mb-6">
            <div className="flex items-center gap-2"><Zap className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> 8-week intensive curriculum</div>
            <div className="flex items-center gap-2"><Shield className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> AeThex Passport certification</div>
            <div className="flex items-center gap-2"><Users className="w-3 h-3 md:w-4 md:h-4 text-yellow-400" /> Join the architect network</div>
          </div>
          <button 
            onClick={() => setViewMode('enroll')}
            className="px-4 md:px-6 py-2.5 md:py-3 bg-yellow-500 hover:bg-yellow-400 text-black font-bold text-sm md:text-base uppercase tracking-wider transition-colors flex items-center gap-2"
          >
            Enroll Now <ChevronRight className="w-4 h-4" />
          </button>
          <div className="mt-3 md:mt-4 text-xs text-yellow-500/50">
            Hint: Check the terminal for secret codes
          </div>
        </div>
      ) : (
        <div className="flex-1 flex flex-col p-6 overflow-auto">
          <div className="max-w-sm mx-auto w-full space-y-6">
            <div className="text-center">
              <h3 className="text-xl font-bold text-yellow-400 mb-1">Architect Bootcamp</h3>
              <p className="text-white/50 text-sm">Cohort Starting Soon</p>
            </div>
            
            <div className="border border-yellow-500/30 bg-yellow-500/5 p-4 space-y-3">
              <div className="flex justify-between text-sm">
                <span className="text-white/70">Bootcamp Access</span>
                <span className="text-white">${basePrice}</span>
              </div>
              {promoApplied && discount > 0 && (
                <div className="flex justify-between text-sm text-green-400">
                  <span>Discount (TERMINAL10)</span>
                  <span>-${(basePrice * discount).toFixed(0)}</span>
                </div>
              )}
              <div className="border-t border-yellow-500/20 pt-2 flex justify-between font-bold">
                <span className="text-white">Total</span>
                <span className="text-yellow-400">${finalPrice.toFixed(0)}</span>
              </div>
            </div>
            
            <div className="space-y-2">
              <label className="text-white/70 text-xs uppercase tracking-wider">Promo Code</label>
              <div className="flex gap-2">
                <input 
                  type="text" 
                  value={promoCode}
                  onChange={(e) => setPromoCode(e.target.value)}
                  placeholder="Enter code"
                  className="flex-1 bg-black/50 border border-yellow-500/30 px-3 py-2 text-white text-sm focus:outline-none focus:border-yellow-500"
                />
                <button 
                  onClick={() => setPromoApplied(true)}
                  className="px-4 py-2 bg-yellow-500/20 text-yellow-400 text-sm hover:bg-yellow-500/30 transition-colors"
                >
                  Apply
                </button>
              </div>
              {promoApplied && promoCode.toUpperCase() === 'TERMINAL10' && (
                <p className="text-green-400 text-xs">Code applied! 10% discount.</p>
              )}
              {promoApplied && promoCode && promoCode.toUpperCase() !== 'TERMINAL10' && (
                <p className="text-red-400 text-xs">Invalid code. Try the terminal.</p>
              )}
            </div>
            
            <button 
              onClick={() => openIframeWindow?.('https://aethex.studio', 'The Foundry')}
              className="block w-full px-6 py-3 bg-yellow-500 hover:bg-yellow-400 text-black text-center font-bold uppercase tracking-wider transition-colors"
            >
              Complete Enrollment
            </button>
            
            <p className="text-center text-white/40 text-xs">
              Opens enrollment form
            </p>
          </div>
        </div>
      )}
    </div>
  );
}