import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  ChevronDown,
  ChevronUp,
  Nut,
  Zap,
  Lightbulb,
  Sparkles,
} from 'lucide-react';
import { cn } from '@/lib/utils';

interface WalletComparisonGuideProps {
  className?: string;
  defaultExpanded?: boolean;
}

export function WalletComparisonGuide({ className, defaultExpanded = false }: WalletComparisonGuideProps) {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded);

  return (
    <Card className={cn("border-gray-700 bg-gradient-to-br from-gray-900 to-gray-800", className)}>
      <CardContent className="p-4">
        {/* Header - Always visible */}
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className="w-full flex items-center justify-between text-left"
        >
          <div className="flex items-center gap-2">
            <span className="text-xl">🛹</span>
            <span className="font-bold text-sm">
              {isExpanded ? 'Wallet Guide (Skater Edition)' : 'Quick Guide'}
            </span>
          </div>
          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
            {isExpanded ? (
              <ChevronUp className="h-4 w-4" />
            ) : (
              <ChevronDown className="h-4 w-4" />
            )}
          </Button>
        </button>

        {/* Collapsed Summary */}
        {!isExpanded && (
          <div className="mt-3 space-y-2 text-sm">
            <div className="flex items-center gap-2">
              <Nut className="h-4 w-4 text-orange-500" />
              <span className="text-gray-300">
                <span className="font-bold text-orange-400">Cashu</span> = Privacy + Convenience 
                <span className="text-gray-500"> (mint holds funds)</span>
              </span>
            </div>
            <div className="flex items-center gap-2">
              <Zap className="h-4 w-4 text-yellow-500" />
              <span className="text-gray-300">
                <span className="font-bold text-yellow-400">Lightning</span> = Control + Security 
                <span className="text-gray-500"> (you hold keys)</span>
              </span>
            </div>
            <div className="flex items-start gap-2 mt-3 p-2 rounded-lg bg-green-500/10 border border-green-500/20">
              <Lightbulb className="h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" />
              <span className="text-xs text-green-400">
                Use both: Cashu for tips, Lightning for savings
              </span>
            </div>
          </div>
        )}

        {/* Expanded Full Guide */}
        {isExpanded && (
          <div className="mt-4 space-y-4">
            {/* Cashu Section */}
            <div className="p-4 rounded-lg bg-orange-500/10 border border-orange-500/20">
              <div className="flex items-center gap-2 mb-2">
                <Nut className="h-5 w-5 text-orange-500" />
                <h3 className="font-bold text-orange-400">CASHU WALLET</h3>
              </div>
              <p className="text-sm text-gray-400 italic mb-3">
                Like cash in your pocket at the skatepark
              </p>
              <ul className="space-y-1.5 text-sm text-gray-300">
                <li className="flex items-start gap-2">
                  <span className="text-orange-400">•</span>
                  <span>Quick to pull out for a tip</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-400">•</span>
                  <span>Don't carry your life savings here</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-400">•</span>
                  <span>If the mint disappears, funds could be lost</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-400">•</span>
                  <span>Nobody knows how much you have (privacy!)</span>
                </li>
              </ul>
              <div className="mt-3 pt-3 border-t border-orange-500/20">
                <p className="text-xs text-orange-300">
                  <span className="font-bold">Perfect for:</span> Session snacks, zapping clips, small tips
                </p>
              </div>
            </div>

            {/* Lightning Section */}
            <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
              <div className="flex items-center gap-2 mb-2">
                <Zap className="h-5 w-5 text-yellow-500" />
                <h3 className="font-bold text-yellow-400">LIGHTNING WALLET</h3>
              </div>
              <p className="text-sm text-gray-400 italic mb-3">
                Like your bank account - you're in control
              </p>
              <ul className="space-y-1.5 text-sm text-gray-300">
                <li className="flex items-start gap-2">
                  <span className="text-yellow-400">•</span>
                  <span>Secure, you control the keys</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-yellow-400">•</span>
                  <span>Takes a moment to set up</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-yellow-400">•</span>
                  <span>Full transaction history</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-yellow-400">•</span>
                  <span>Better for bigger amounts</span>
                </li>
              </ul>
              <div className="mt-3 pt-3 border-t border-yellow-500/20">
                <p className="text-xs text-yellow-300">
                  <span className="font-bold">Perfect for:</span> Gear purchases, savings, big zaps
                </p>
              </div>
            </div>

            {/* Pro Tips Section */}
            <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
              <div className="flex items-center gap-2 mb-3">
                <Sparkles className="h-5 w-5 text-green-500" />
                <h3 className="font-bold text-green-400">PRO TIPS</h3>
              </div>
              <ul className="space-y-2 text-sm text-gray-300">
                <li className="flex items-start gap-2">
                  <span className="text-green-400 font-bold">1.</span>
                  <span>
                    <span className="font-medium text-white">Use both wallets</span> - Keep session money in Cashu, savings in Lightning
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-green-400 font-bold">2.</span>
                  <span>
                    <span className="font-medium text-white">Try different wallets</span> - Experiment to find what works for you. Each has different features and trade-offs
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-green-400 font-bold">3.</span>
                  <span>
                    <span className="font-medium text-white">Better privacy</span> - Using multiple wallets means no single app sees all your activity
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-green-400 font-bold">4.</span>
                  <span>
                    <span className="font-medium text-white">Gain experience</span> - The more tools you know, the more options you have. Start small, learn as you go
                  </span>
                </li>
              </ul>
            </div>

            {/* Bottom Summary */}
            <div className="text-center p-3 rounded-lg bg-gray-800/50 border border-gray-700">
              <p className="text-xs text-gray-400">
                🎯 <span className="font-bold text-white">TL;DR:</span> There's no "best" wallet - it depends on your needs. 
                Try both, use what feels right, and don't keep all your sats in one place!
              </p>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}