/**
 * CreateAccountWizard Component
 * Multi-step wizard for creating new investment accounts
 * Epic: OQI-004 Cuentas de Inversion
 */

import React, { useState, useCallback, useMemo } from 'react';
import {
  Wallet,
  CheckCircle,
  AlertCircle,
  ArrowRight,
  ArrowLeft,
  Shield,
  FileText,
  DollarSign,
  User,
  Clock,
  TrendingUp,
  Info,
  Loader2,
} from 'lucide-react';

// Types
export interface ProductSelection {
  id: string;
  name: string;
  minInvestment: number;
  expectedReturn: string;
  riskLevel: 'low' | 'medium' | 'high';
  tradingAgent: string;
}

export interface KYCData {
  fullName: string;
  dateOfBirth: string;
  address: string;
  city: string;
  country: string;
  taxId: string;
  sourceOfFunds: string;
  investmentExperience: string;
  riskTolerance: string;
}

export interface AccountCreationData {
  product: ProductSelection;
  initialAmount: number;
  kyc: KYCData;
  termsAccepted: boolean;
  autoReinvest: boolean;
  distributionFrequency: 'monthly' | 'quarterly' | 'annually';
}

export interface CreateAccountWizardProps {
  product: ProductSelection;
  onComplete?: (data: AccountCreationData) => void;
  onCancel?: () => void;
  isSubmitting?: boolean;
  minInvestment?: number;
  maxInvestment?: number;
  requiresKYC?: boolean;
}

type WizardStep = 'amount' | 'kyc' | 'terms' | 'confirm';

const STEPS: { id: WizardStep; title: string; icon: React.ElementType }[] = [
  { id: 'amount', title: 'Investment Amount', icon: DollarSign },
  { id: 'kyc', title: 'Verification', icon: User },
  { id: 'terms', title: 'Terms & Conditions', icon: FileText },
  { id: 'confirm', title: 'Confirmation', icon: CheckCircle },
];

const SOURCE_OF_FUNDS_OPTIONS = [
  'Employment Income',
  'Business Revenue',
  'Investments',
  'Inheritance',
  'Savings',
  'Other',
];

const INVESTMENT_EXPERIENCE_OPTIONS = [
  'None',
  'Beginner (< 1 year)',
  'Intermediate (1-3 years)',
  'Advanced (3-5 years)',
  'Expert (5+ years)',
];

const RISK_TOLERANCE_OPTIONS = [
  { value: 'conservative', label: 'Conservative', desc: 'Preserve capital, lower returns' },
  { value: 'moderate', label: 'Moderate', desc: 'Balanced risk and reward' },
  { value: 'aggressive', label: 'Aggressive', desc: 'Higher risk for higher returns' },
];

const CreateAccountWizard: React.FC<CreateAccountWizardProps> = ({
  product,
  onComplete,
  onCancel,
  isSubmitting = false,
  minInvestment = 1000,
  maxInvestment = 1000000,
  requiresKYC = true,
}) => {
  const [currentStep, setCurrentStep] = useState<WizardStep>('amount');
  const [amount, setAmount] = useState<number>(minInvestment);
  const [autoReinvest, setAutoReinvest] = useState(true);
  const [distributionFrequency, setDistributionFrequency] = useState<'monthly' | 'quarterly' | 'annually'>('monthly');
  const [termsAccepted, setTermsAccepted] = useState(false);
  const [riskDisclosureAccepted, setRiskDisclosureAccepted] = useState(false);
  const [kyc, setKyc] = useState<KYCData>({
    fullName: '',
    dateOfBirth: '',
    address: '',
    city: '',
    country: '',
    taxId: '',
    sourceOfFunds: '',
    investmentExperience: '',
    riskTolerance: 'moderate',
  });

  // Get current step index
  const currentStepIndex = useMemo(() => {
    const steps = requiresKYC ? STEPS : STEPS.filter(s => s.id !== 'kyc');
    return steps.findIndex(s => s.id === currentStep);
  }, [currentStep, requiresKYC]);

  // Get available steps
  const availableSteps = useMemo(() => {
    return requiresKYC ? STEPS : STEPS.filter(s => s.id !== 'kyc');
  }, [requiresKYC]);

  // Calculate projected returns
  const projectedReturns = useMemo(() => {
    const returnRate = parseFloat(product.expectedReturn) / 100;
    const monthly = amount * (returnRate / 12);
    const yearly = amount * returnRate;
    return { monthly, yearly };
  }, [amount, product.expectedReturn]);

  // Validate current step
  const isStepValid = useCallback((): boolean => {
    switch (currentStep) {
      case 'amount':
        return amount >= minInvestment && amount <= maxInvestment;
      case 'kyc':
        return (
          kyc.fullName.length > 2 &&
          kyc.dateOfBirth !== '' &&
          kyc.address.length > 5 &&
          kyc.city.length > 2 &&
          kyc.country !== '' &&
          kyc.sourceOfFunds !== '' &&
          kyc.investmentExperience !== '' &&
          kyc.riskTolerance !== ''
        );
      case 'terms':
        return termsAccepted && riskDisclosureAccepted;
      case 'confirm':
        return true;
      default:
        return false;
    }
  }, [currentStep, amount, minInvestment, maxInvestment, kyc, termsAccepted, riskDisclosureAccepted]);

  // Handle navigation
  const goToNextStep = useCallback(() => {
    const currentIndex = availableSteps.findIndex(s => s.id === currentStep);
    if (currentIndex < availableSteps.length - 1) {
      setCurrentStep(availableSteps[currentIndex + 1].id);
    }
  }, [currentStep, availableSteps]);

  const goToPrevStep = useCallback(() => {
    const currentIndex = availableSteps.findIndex(s => s.id === currentStep);
    if (currentIndex > 0) {
      setCurrentStep(availableSteps[currentIndex - 1].id);
    }
  }, [currentStep, availableSteps]);

  // Handle form submission
  const handleSubmit = useCallback(() => {
    const data: AccountCreationData = {
      product,
      initialAmount: amount,
      kyc,
      termsAccepted,
      autoReinvest,
      distributionFrequency,
    };
    onComplete?.(data);
  }, [product, amount, kyc, termsAccepted, autoReinvest, distributionFrequency, onComplete]);

  // Update KYC field
  const updateKyc = useCallback((field: keyof KYCData, value: string) => {
    setKyc(prev => ({ ...prev, [field]: value }));
  }, []);

  // Get risk level color
  const getRiskColor = (level: string) => {
    switch (level) {
      case 'low':
        return 'text-emerald-400';
      case 'medium':
        return 'text-amber-400';
      case 'high':
        return 'text-red-400';
      default:
        return 'text-slate-400';
    }
  };

  // Render step indicator
  const renderStepIndicator = () => (
    <div className="flex items-center justify-center mb-8">
      {availableSteps.map((step, index) => {
        const StepIcon = step.icon;
        const isActive = step.id === currentStep;
        const isCompleted = index < currentStepIndex;

        return (
          <React.Fragment key={step.id}>
            <div className="flex flex-col items-center">
              <div
                className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors ${
                  isActive
                    ? 'bg-blue-600 text-white'
                    : isCompleted
                    ? 'bg-emerald-600 text-white'
                    : 'bg-slate-700 text-slate-400'
                }`}
              >
                {isCompleted ? (
                  <CheckCircle className="w-5 h-5" />
                ) : (
                  <StepIcon className="w-5 h-5" />
                )}
              </div>
              <span className={`text-xs mt-2 ${isActive ? 'text-white' : 'text-slate-400'}`}>
                {step.title}
              </span>
            </div>
            {index < availableSteps.length - 1 && (
              <div
                className={`w-16 h-0.5 mx-2 ${
                  isCompleted ? 'bg-emerald-600' : 'bg-slate-700'
                }`}
              />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );

  // Render amount step
  const renderAmountStep = () => (
    <div className="space-y-6">
      {/* Product Summary */}
      <div className="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-full bg-blue-600/20 flex items-center justify-center">
            <Wallet className="w-6 h-6 text-blue-400" />
          </div>
          <div>
            <h3 className="text-white font-medium">{product.name}</h3>
            <p className="text-slate-400 text-sm">
              Managed by {product.tradingAgent} Agent
            </p>
          </div>
        </div>
        <div className="grid grid-cols-3 gap-4 text-sm">
          <div>
            <span className="text-slate-500 block">Expected Return</span>
            <span className="text-emerald-400 font-medium">{product.expectedReturn}</span>
          </div>
          <div>
            <span className="text-slate-500 block">Risk Level</span>
            <span className={`font-medium capitalize ${getRiskColor(product.riskLevel)}`}>
              {product.riskLevel}
            </span>
          </div>
          <div>
            <span className="text-slate-500 block">Min. Investment</span>
            <span className="text-white">${product.minInvestment.toLocaleString()}</span>
          </div>
        </div>
      </div>

      {/* Amount Input */}
      <div>
        <label className="block text-slate-300 text-sm font-medium mb-2">
          Investment Amount
        </label>
        <div className="relative">
          <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(Number(e.target.value))}
            min={minInvestment}
            max={maxInvestment}
            className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-10 pr-4 py-3 text-white text-lg focus:border-blue-500 focus:outline-none"
          />
        </div>
        <div className="flex justify-between text-xs text-slate-500 mt-1">
          <span>Min: ${minInvestment.toLocaleString()}</span>
          <span>Max: ${maxInvestment.toLocaleString()}</span>
        </div>
        {(amount < minInvestment || amount > maxInvestment) && (
          <p className="text-red-400 text-sm mt-2 flex items-center gap-1">
            <AlertCircle className="w-4 h-4" />
            Amount must be between ${minInvestment.toLocaleString()} and ${maxInvestment.toLocaleString()}
          </p>
        )}
      </div>

      {/* Quick Amount Buttons */}
      <div className="flex flex-wrap gap-2">
        {[1000, 5000, 10000, 25000, 50000, 100000].map((quickAmount) => (
          <button
            key={quickAmount}
            onClick={() => setAmount(quickAmount)}
            className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
              amount === quickAmount
                ? 'bg-blue-600 text-white'
                : 'bg-slate-800 text-slate-300 hover:bg-slate-700'
            }`}
          >
            ${quickAmount.toLocaleString()}
          </button>
        ))}
      </div>

      {/* Projected Returns */}
      <div className="bg-emerald-900/20 border border-emerald-800/50 rounded-lg p-4">
        <div className="flex items-center gap-2 mb-3">
          <TrendingUp className="w-5 h-5 text-emerald-400" />
          <span className="text-emerald-400 font-medium">Projected Returns</span>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <span className="text-slate-400 text-sm block">Monthly (Est.)</span>
            <span className="text-white text-lg font-semibold">
              ${projectedReturns.monthly.toLocaleString(undefined, { maximumFractionDigits: 2 })}
            </span>
          </div>
          <div>
            <span className="text-slate-400 text-sm block">Yearly (Est.)</span>
            <span className="text-white text-lg font-semibold">
              ${projectedReturns.yearly.toLocaleString(undefined, { maximumFractionDigits: 2 })}
            </span>
          </div>
        </div>
        <p className="text-slate-500 text-xs mt-3 flex items-center gap-1">
          <Info className="w-3 h-3" />
          Past performance does not guarantee future results
        </p>
      </div>

      {/* Distribution Settings */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <label className="text-slate-300 font-medium">Auto-Reinvest Returns</label>
            <p className="text-slate-500 text-sm">Automatically reinvest your earnings</p>
          </div>
          <button
            onClick={() => setAutoReinvest(!autoReinvest)}
            className={`w-12 h-6 rounded-full transition-colors ${
              autoReinvest ? 'bg-blue-600' : 'bg-slate-700'
            }`}
          >
            <div
              className={`w-5 h-5 bg-white rounded-full transition-transform ${
                autoReinvest ? 'translate-x-6' : 'translate-x-0.5'
              }`}
            />
          </button>
        </div>

        {!autoReinvest && (
          <div>
            <label className="block text-slate-300 text-sm font-medium mb-2">
              Distribution Frequency
            </label>
            <select
              value={distributionFrequency}
              onChange={(e) => setDistributionFrequency(e.target.value as 'monthly' | 'quarterly' | 'annually')}
              className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
            >
              <option value="monthly">Monthly</option>
              <option value="quarterly">Quarterly</option>
              <option value="annually">Annually</option>
            </select>
          </div>
        )}
      </div>
    </div>
  );

  // Render KYC step
  const renderKYCStep = () => (
    <div className="space-y-4">
      <div className="bg-amber-900/20 border border-amber-800/50 rounded-lg p-4 mb-6">
        <div className="flex items-center gap-2">
          <Shield className="w-5 h-5 text-amber-400" />
          <span className="text-amber-400 font-medium">Identity Verification Required</span>
        </div>
        <p className="text-slate-400 text-sm mt-2">
          For regulatory compliance, we need to verify your identity before opening an investment account.
        </p>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="col-span-2">
          <label className="block text-slate-300 text-sm font-medium mb-1">Full Legal Name</label>
          <input
            type="text"
            value={kyc.fullName}
            onChange={(e) => updateKyc('fullName', e.target.value)}
            placeholder="John Doe"
            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-slate-300 text-sm font-medium mb-1">Date of Birth</label>
          <input
            type="date"
            value={kyc.dateOfBirth}
            onChange={(e) => updateKyc('dateOfBirth', e.target.value)}
            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-slate-300 text-sm font-medium mb-1">Tax ID / SSN</label>
          <input
            type="text"
            value={kyc.taxId}
            onChange={(e) => updateKyc('taxId', e.target.value)}
            placeholder="XXX-XX-XXXX"
            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div className="col-span-2">
          <label className="block text-slate-300 text-sm font-medium mb-1">Address</label>
          <input
            type="text"
            value={kyc.address}
            onChange={(e) => updateKyc('address', e.target.value)}
            placeholder="123 Main Street"
            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-slate-300 text-sm font-medium mb-1">City</label>
          <input
            type="text"
            value={kyc.city}
            onChange={(e) => updateKyc('city', e.target.value)}
            placeholder="New York"
            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-slate-300 text-sm font-medium mb-1">Country</label>
          <select
            value={kyc.country}
            onChange={(e) => updateKyc('country', e.target.value)}
            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="">Select country</option>
            <option value="US">United States</option>
            <option value="MX">Mexico</option>
            <option value="CA">Canada</option>
            <option value="GB">United Kingdom</option>
            <option value="DE">Germany</option>
            <option value="ES">Spain</option>
          </select>
        </div>

        <div>
          <label className="block text-slate-300 text-sm font-medium mb-1">Source of Funds</label>
          <select
            value={kyc.sourceOfFunds}
            onChange={(e) => updateKyc('sourceOfFunds', e.target.value)}
            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="">Select source</option>
            {SOURCE_OF_FUNDS_OPTIONS.map((option) => (
              <option key={option} value={option}>{option}</option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-slate-300 text-sm font-medium mb-1">Investment Experience</label>
          <select
            value={kyc.investmentExperience}
            onChange={(e) => updateKyc('investmentExperience', e.target.value)}
            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="">Select experience</option>
            {INVESTMENT_EXPERIENCE_OPTIONS.map((option) => (
              <option key={option} value={option}>{option}</option>
            ))}
          </select>
        </div>

        <div className="col-span-2">
          <label className="block text-slate-300 text-sm font-medium mb-2">Risk Tolerance</label>
          <div className="grid grid-cols-3 gap-3">
            {RISK_TOLERANCE_OPTIONS.map((option) => (
              <button
                key={option.value}
                onClick={() => updateKyc('riskTolerance', option.value)}
                className={`p-3 rounded-lg border text-left transition-colors ${
                  kyc.riskTolerance === option.value
                    ? 'border-blue-500 bg-blue-900/20'
                    : 'border-slate-700 bg-slate-800/50 hover:border-slate-600'
                }`}
              >
                <span className="text-white font-medium block">{option.label}</span>
                <span className="text-slate-400 text-xs">{option.desc}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );

  // Render terms step
  const renderTermsStep = () => (
    <div className="space-y-6">
      {/* Terms & Conditions */}
      <div className="bg-slate-800/50 rounded-lg border border-slate-700">
        <div className="p-4 border-b border-slate-700">
          <h3 className="text-white font-medium flex items-center gap-2">
            <FileText className="w-5 h-5 text-blue-400" />
            Terms & Conditions
          </h3>
        </div>
        <div className="p-4 max-h-48 overflow-y-auto text-slate-400 text-sm space-y-3">
          <p>By opening an investment account with Trading Platform, you agree to the following terms:</p>
          <ul className="list-disc list-inside space-y-2">
            <li>You are at least 18 years old and legally able to enter into contracts.</li>
            <li>The information you have provided is accurate and complete.</li>
            <li>You understand that all investments carry risk, including the potential loss of principal.</li>
            <li>You agree to our fee schedule as outlined in the product documentation.</li>
            <li>You authorize us to manage your investment according to the selected product strategy.</li>
            <li>You may request withdrawals subject to our withdrawal policy and any applicable lock-up periods.</li>
            <li>Account statements will be provided monthly via email and accessible through the platform.</li>
          </ul>
        </div>
        <div className="p-4 border-t border-slate-700">
          <label className="flex items-center gap-3 cursor-pointer">
            <input
              type="checkbox"
              checked={termsAccepted}
              onChange={(e) => setTermsAccepted(e.target.checked)}
              className="w-5 h-5 rounded border-slate-600 bg-slate-800 text-blue-600 focus:ring-blue-500"
            />
            <span className="text-slate-300">
              I have read and agree to the Terms & Conditions
            </span>
          </label>
        </div>
      </div>

      {/* Risk Disclosure */}
      <div className="bg-slate-800/50 rounded-lg border border-slate-700">
        <div className="p-4 border-b border-slate-700">
          <h3 className="text-white font-medium flex items-center gap-2">
            <AlertCircle className="w-5 h-5 text-amber-400" />
            Risk Disclosure
          </h3>
        </div>
        <div className="p-4 max-h-48 overflow-y-auto text-slate-400 text-sm space-y-3">
          <p><strong className="text-white">Important Risk Information:</strong></p>
          <ul className="list-disc list-inside space-y-2">
            <li>Past performance is not indicative of future results.</li>
            <li>The value of investments can go down as well as up.</li>
            <li>You may receive back less than your original investment.</li>
            <li>Trading strategies involve significant risks including market, liquidity, and operational risks.</li>
            <li>Automated trading systems may experience technical failures or delays.</li>
            <li>Currency fluctuations may affect the value of international investments.</li>
            <li>There is no guarantee that investment objectives will be achieved.</li>
          </ul>
          <p className="text-amber-400">
            Only invest money that you can afford to lose. If you are unsure about the suitability
            of this investment, please seek independent financial advice.
          </p>
        </div>
        <div className="p-4 border-t border-slate-700">
          <label className="flex items-center gap-3 cursor-pointer">
            <input
              type="checkbox"
              checked={riskDisclosureAccepted}
              onChange={(e) => setRiskDisclosureAccepted(e.target.checked)}
              className="w-5 h-5 rounded border-slate-600 bg-slate-800 text-blue-600 focus:ring-blue-500"
            />
            <span className="text-slate-300">
              I understand and accept the risks involved
            </span>
          </label>
        </div>
      </div>
    </div>
  );

  // Render confirm step
  const renderConfirmStep = () => (
    <div className="space-y-6">
      <div className="text-center mb-6">
        <div className="w-16 h-16 rounded-full bg-blue-600/20 flex items-center justify-center mx-auto mb-4">
          <CheckCircle className="w-8 h-8 text-blue-400" />
        </div>
        <h3 className="text-white text-xl font-semibold">Review Your Investment</h3>
        <p className="text-slate-400 mt-1">Please confirm the details below</p>
      </div>

      {/* Summary Card */}
      <div className="bg-slate-800/50 rounded-lg border border-slate-700 divide-y divide-slate-700">
        <div className="p-4">
          <h4 className="text-slate-400 text-sm mb-3">Product</h4>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-blue-600/20 flex items-center justify-center">
              <Wallet className="w-5 h-5 text-blue-400" />
            </div>
            <div>
              <p className="text-white font-medium">{product.name}</p>
              <p className="text-slate-400 text-sm">{product.tradingAgent} Agent</p>
            </div>
          </div>
        </div>

        <div className="p-4 grid grid-cols-2 gap-4">
          <div>
            <span className="text-slate-400 text-sm block">Investment Amount</span>
            <span className="text-white text-lg font-semibold">${amount.toLocaleString()}</span>
          </div>
          <div>
            <span className="text-slate-400 text-sm block">Expected Return</span>
            <span className="text-emerald-400 text-lg font-semibold">{product.expectedReturn}</span>
          </div>
        </div>

        <div className="p-4 grid grid-cols-2 gap-4">
          <div>
            <span className="text-slate-400 text-sm block">Auto-Reinvest</span>
            <span className="text-white">{autoReinvest ? 'Yes' : 'No'}</span>
          </div>
          <div>
            <span className="text-slate-400 text-sm block">Distribution</span>
            <span className="text-white capitalize">{autoReinvest ? 'N/A' : distributionFrequency}</span>
          </div>
        </div>

        {requiresKYC && (
          <div className="p-4">
            <h4 className="text-slate-400 text-sm mb-2">Account Holder</h4>
            <p className="text-white">{kyc.fullName}</p>
            <p className="text-slate-400 text-sm">{kyc.city}, {kyc.country}</p>
          </div>
        )}

        <div className="p-4">
          <div className="flex items-center gap-2 text-emerald-400">
            <CheckCircle className="w-4 h-4" />
            <span className="text-sm">Terms & Conditions accepted</span>
          </div>
          <div className="flex items-center gap-2 text-emerald-400 mt-1">
            <CheckCircle className="w-4 h-4" />
            <span className="text-sm">Risk disclosure acknowledged</span>
          </div>
        </div>
      </div>

      {/* Processing Time Notice */}
      <div className="bg-blue-900/20 border border-blue-800/50 rounded-lg p-4">
        <div className="flex items-center gap-2">
          <Clock className="w-5 h-5 text-blue-400" />
          <span className="text-blue-400 font-medium">Processing Time</span>
        </div>
        <p className="text-slate-400 text-sm mt-2">
          Your account will be created immediately. Funds will be allocated to the trading strategy
          within 1-2 business days after your deposit is confirmed.
        </p>
      </div>
    </div>
  );

  // Render current step content
  const renderStepContent = () => {
    switch (currentStep) {
      case 'amount':
        return renderAmountStep();
      case 'kyc':
        return renderKYCStep();
      case 'terms':
        return renderTermsStep();
      case 'confirm':
        return renderConfirmStep();
      default:
        return null;
    }
  };

  return (
    <div className="bg-slate-900 rounded-xl border border-slate-800 max-w-2xl mx-auto">
      {/* Header */}
      <div className="p-6 border-b border-slate-800">
        <h2 className="text-white text-xl font-semibold">Create Investment Account</h2>
        <p className="text-slate-400 text-sm mt-1">
          Complete the steps below to open your new investment account
        </p>
      </div>

      {/* Step Indicator */}
      <div className="p-6 border-b border-slate-800">
        {renderStepIndicator()}
      </div>

      {/* Step Content */}
      <div className="p-6">
        {renderStepContent()}
      </div>

      {/* Navigation */}
      <div className="p-6 border-t border-slate-800 flex justify-between">
        <button
          onClick={currentStepIndex === 0 ? onCancel : goToPrevStep}
          className="flex items-center gap-2 px-4 py-2 text-slate-300 hover:text-white transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          {currentStepIndex === 0 ? 'Cancel' : 'Back'}
        </button>

        {currentStep === 'confirm' ? (
          <button
            onClick={handleSubmit}
            disabled={isSubmitting}
            className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {isSubmitting ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                Creating Account...
              </>
            ) : (
              <>
                <CheckCircle className="w-4 h-4" />
                Create Account
              </>
            )}
          </button>
        ) : (
          <button
            onClick={goToNextStep}
            disabled={!isStepValid()}
            className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            Continue
            <ArrowRight className="w-4 h-4" />
          </button>
        )}
      </div>
    </div>
  );
};

export default CreateAccountWizard;
