import { useState } from 'react';
import { motion } from 'motion/react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { 
  CreditCard, 
  Copy, 
  Eye, 
  EyeOff, 
  PiggyBank, 
  Home, 
  TrendingUp, 
  Users,
  Wallet,
  QrCode,
  ExternalLink,
  ChevronDown
} from 'lucide-react';
import { EnamelAccountGenerator, accountUtils } from '../utils/accountGenerator';
import { toast } from 'sonner@2.0.3';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';

interface QuickAccountAccessProps {
  walletAccounts: any;
  showNumbers: boolean;
  onToggleVisibility: () => void;
}

export function QuickAccountAccess({ walletAccounts, showNumbers, onToggleVisibility }: QuickAccountAccessProps) {
  const [isExpanded, setIsExpanded] = useState(false);

  const copyToClipboard = (text: string, type: string) => {
    navigator.clipboard.writeText(text);
    toast.success(`${type} account number copied!`);
  };

  const walletTypes = [
    {
      key: 'spending',
      name: 'Spending Wallet',
      icon: CreditCard,
      description: 'For daily transactions',
      color: 'bg-blue-500',
      accountNumber: walletAccounts?.spending || ''
    },
    {
      key: 'daily_savings',
      name: 'Daily Savings',
      icon: PiggyBank,
      description: 'Automated daily savings',
      color: 'bg-green-500',
      accountNumber: walletAccounts?.daily_savings || ''
    },
    {
      key: 'property_savings',
      name: 'Property Savings',
      icon: Home,
      description: 'Long-term property goals',
      color: 'bg-orange-500',
      accountNumber: walletAccounts?.property_savings || ''
    },
    {
      key: 'custom_wallet',
      name: 'Custom Wallet',
      icon: TrendingUp,
      description: 'Personal savings goals',
      color: 'bg-purple-500',
      accountNumber: walletAccounts?.custom_wallet || ''
    },
    {
      key: 'group_savings',
      name: 'Group Savings',
      icon: Users,
      description: 'Ajo/Esusu contributions',
      color: 'bg-pink-500',
      accountNumber: walletAccounts?.group_savings || ''
    }
  ];

  return (
    <Card className="border-2 border-accent/20 bg-gradient-to-br from-accent/5 to-card shadow-md">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-accent flex items-center justify-center">
              <Wallet className="w-5 h-5 text-white" />
            </div>
            <div>
              <CardTitle className="text-lg">Quick Account Access</CardTitle>
              <p className="text-sm text-muted-foreground">All your wallet account numbers</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="ghost"
              size="sm"
              onClick={onToggleVisibility}
              className="rounded-full"
            >
              {showNumbers ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {/* Primary Wallet (Spending) - Always Visible */}
          <div className="p-4 bg-primary/5 rounded-lg border border-primary/20">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
                  <CreditCard className="w-4 h-4 text-white" />
                </div>
                <div>
                  <h4 className="font-semibold">Primary Account</h4>
                  <p className="text-xs text-muted-foreground">Main spending account</p>
                </div>
              </div>
              <Badge className="bg-primary text-white">PRIMARY</Badge>
            </div>
            <div className="flex items-center justify-between">
              <code className="text-lg font-mono font-bold">
                {showNumbers 
                  ? EnamelAccountGenerator.formatAccountNumber(walletTypes[0].accountNumber)
                  : accountUtils.maskAccountNumber(walletTypes[0].accountNumber)
                }
              </code>
              <div className="flex gap-1">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => copyToClipboard(walletTypes[0].accountNumber, 'Primary')}
                  className="h-8 w-8 p-0"
                >
                  <Copy className="w-3 h-3" />
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-8 w-8 p-0"
                >
                  <QrCode className="w-3 h-3" />
                </Button>
              </div>
            </div>
          </div>

          {/* Collapsible Other Wallets */}
          <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
            <CollapsibleTrigger asChild>
              <Button variant="outline" className="w-full justify-between">
                <span>Other Wallet Accounts</span>
                <div className="flex items-center gap-2">
                  <Badge variant="secondary">{walletTypes.length - 1} accounts</Badge>
                  <ChevronDown className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
                </div>
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <motion.div 
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                className="space-y-3 mt-4"
              >
                {walletTypes.slice(1).map((wallet) => (
                  <div key={wallet.key} className="p-3 bg-muted/30 rounded-lg border hover:bg-muted/50 transition-colors">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className={`w-6 h-6 rounded-full ${wallet.color} flex items-center justify-center`}>
                          <wallet.icon className="w-3 h-3 text-white" />
                        </div>
                        <div className="min-w-0">
                          <h5 className="font-medium text-sm">{wallet.name}</h5>
                          <p className="text-xs text-muted-foreground truncate">{wallet.description}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <code className="text-sm font-mono">
                          {showNumbers 
                            ? wallet.accountNumber.slice(-4)
                            : '****'
                          }
                        </code>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => copyToClipboard(wallet.accountNumber, wallet.name)}
                          className="h-6 w-6 p-0"
                        >
                          <Copy className="w-2 h-2" />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}

                {/* Quick Actions for All Accounts */}
                <div className="flex gap-2 pt-2 border-t">
                  <Button variant="outline" size="sm" className="flex-1">
                    <ExternalLink className="w-3 h-3 mr-2" />
                    Export All
                  </Button>
                  <Button variant="outline" size="sm" className="flex-1">
                    <QrCode className="w-3 h-3 mr-2" />
                    QR Codes
                  </Button>
                </div>
              </motion.div>
            </CollapsibleContent>
          </Collapsible>

          {/* Account Summary */}
          <div className="pt-3 border-t">
            <div className="flex justify-between items-center text-sm">
              <span className="text-muted-foreground">Total Accounts</span>
              <span className="font-bold">{walletTypes.length}</span>
            </div>
            <div className="flex justify-between items-center text-sm mt-1">
              <span className="text-muted-foreground">Bank</span>
              <span className="font-medium">Enamel Cooperative</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}