import { useState, useEffect } from 'react';
import { motion } from 'motion/react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Badge } from './ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { Avatar, AvatarFallback } from './ui/avatar';
import { Progress } from './ui/progress';
import { 
  User, 
  Shield, 
  CreditCard, 
  Settings, 
  Eye,
  EyeOff,
  Copy,
  Edit3,
  CheckCircle,
  AlertCircle,
  Phone,
  Mail,
  Calendar,
  MapPin,
  Building,
  QrCode,
  Download,
  Upload,
  Camera
} from 'lucide-react';
import { EnamelAccountGenerator, accountUtils } from '../utils/accountGenerator';
import { formatNaira } from '../utils/currency';
import { toast } from 'sonner@2.0.3';

interface UserAccountProfileProps {
  user: any;
  onUpdateProfile?: (data: any) => void;
  onClose?: () => void;
}

export function UserAccountProfile({ user, onUpdateProfile, onClose }: UserAccountProfileProps) {
  const [activeTab, setActiveTab] = useState('profile');
  const [showAccountNumbers, setShowAccountNumbers] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [profileData, setProfileData] = useState({
    firstName: user?.firstName || '',
    lastName: user?.lastName || '',
    email: user?.email || '',
    phone: user?.phone || '',
    dateOfBirth: '1990-05-15',
    address: '123 Victoria Island, Lagos',
    bvn: '22345678901',
    idType: 'National ID',
    idNumber: 'A12345678'
  });

  // Generate account details for the user
  const [accountDetails, setAccountDetails] = useState(null);
  const [walletAccounts, setWalletAccounts] = useState(null);

  useEffect(() => {
    const generateUserAccounts = async () => {
      if (user?.id) {
        // Generate main account
        const mainAccount = await EnamelAccountGenerator.generateUserAccount({
          firstName: user.firstName,
          lastName: user.lastName,
          email: user.email,
          phone: user.phone,
          userId: user.id
        });

        // Generate wallet-specific accounts
        const walletAccountNumbers = EnamelAccountGenerator.generateWalletAccountNumbers(user.id);
        
        setAccountDetails(mainAccount);
        setWalletAccounts(walletAccountNumbers);
      }
    };

    generateUserAccounts();
  }, [user]);

  const membershipNumber = EnamelAccountGenerator.generateMembershipNumber(12345); // Mock sequential ID

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

  const handleSaveProfile = () => {
    if (onUpdateProfile) {
      onUpdateProfile(profileData);
    }
    setIsEditing(false);
    toast.success('Profile updated successfully!');
  };

  const kycStatus = {
    bvn: { verified: true, date: '2024-01-15' },
    phone: { verified: true, date: '2024-01-10' },
    email: { verified: true, date: '2024-01-10' },
    identity: { verified: false, date: null }
  };

  const kycProgress = Object.values(kycStatus).filter(status => status.verified).length;
  const kycTotal = Object.keys(kycStatus).length;
  const kycPercentage = (kycProgress / kycTotal) * 100;

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Profile Header */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center space-y-4"
      >
        <div className="relative inline-block">
          <Avatar className="w-24 h-24 border-4 border-primary/20">
            <AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-primary to-secondary text-white">
              {user?.firstName?.[0]}{user?.lastName?.[0]}
            </AvatarFallback>
          </Avatar>
          <Button
            size="sm"
            className="absolute -bottom-2 -right-2 rounded-full w-8 h-8 p-0"
            variant="secondary"
          >
            <Camera className="w-4 h-4" />
          </Button>
        </div>
        <div>
          <h2 className="text-2xl font-bold">{user?.firstName} {user?.lastName}</h2>
          <p className="text-muted-foreground">{user?.email}</p>
          <Badge variant={user?.role === 'admin' ? 'destructive' : 'secondary'} className="mt-2">
            {user?.role?.toUpperCase()} MEMBER
          </Badge>
        </div>
      </motion.div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="profile" className="flex items-center gap-2">
            <User className="w-4 h-4" />
            Profile
          </TabsTrigger>
          <TabsTrigger value="accounts" className="flex items-center gap-2">
            <CreditCard className="w-4 h-4" />
            Accounts
          </TabsTrigger>
          <TabsTrigger value="kyc" className="flex items-center gap-2">
            <Shield className="w-4 h-4" />
            Verification
          </TabsTrigger>
          <TabsTrigger value="settings" className="flex items-center gap-2">
            <Settings className="w-4 h-4" />
            Settings
          </TabsTrigger>
        </TabsList>

        {/* Profile Information Tab */}
        <TabsContent value="profile" className="space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <CardTitle className="flex items-center gap-2">
                  <User className="w-5 h-5" />
                  Personal Information
                </CardTitle>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setIsEditing(!isEditing)}
                >
                  <Edit3 className="w-4 h-4 mr-2" />
                  {isEditing ? 'Cancel' : 'Edit'}
                </Button>
              </div>
              <CardDescription>
                Manage your personal information and contact details
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="firstName">First Name</Label>
                  <Input
                    id="firstName"
                    value={profileData.firstName}
                    onChange={(e) => setProfileData({...profileData, firstName: e.target.value})}
                    disabled={!isEditing}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lastName">Last Name</Label>
                  <Input
                    id="lastName"
                    value={profileData.lastName}
                    onChange={(e) => setProfileData({...profileData, lastName: e.target.value})}
                    disabled={!isEditing}
                  />
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="email" className="flex items-center gap-2">
                    <Mail className="w-4 h-4" />
                    Email Address
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    value={profileData.email}
                    onChange={(e) => setProfileData({...profileData, email: e.target.value})}
                    disabled={!isEditing}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone" className="flex items-center gap-2">
                    <Phone className="w-4 h-4" />
                    Phone Number
                  </Label>
                  <Input
                    id="phone"
                    value={profileData.phone}
                    onChange={(e) => setProfileData({...profileData, phone: e.target.value})}
                    disabled={!isEditing}
                  />
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="dateOfBirth" className="flex items-center gap-2">
                    <Calendar className="w-4 h-4" />
                    Date of Birth
                  </Label>
                  <Input
                    id="dateOfBirth"
                    type="date"
                    value={profileData.dateOfBirth}
                    onChange={(e) => setProfileData({...profileData, dateOfBirth: e.target.value})}
                    disabled={!isEditing}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="address" className="flex items-center gap-2">
                    <MapPin className="w-4 h-4" />
                    Address
                  </Label>
                  <Input
                    id="address"
                    value={profileData.address}
                    onChange={(e) => setProfileData({...profileData, address: e.target.value})}
                    disabled={!isEditing}
                  />
                </div>
              </div>

              {isEditing && (
                <div className="flex gap-2 pt-4">
                  <Button onClick={handleSaveProfile}>
                    Save Changes
                  </Button>
                  <Button variant="outline" onClick={() => setIsEditing(false)}>
                    Cancel
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Membership Information */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Building className="w-5 h-5" />
                Membership Information
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label className="text-sm text-muted-foreground">Membership Number</Label>
                  <div className="flex items-center gap-2">
                    <code className="px-3 py-2 bg-muted rounded font-mono text-sm">
                      {membershipNumber}
                    </code>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => copyToClipboard(membershipNumber, 'Membership Number')}
                    >
                      <Copy className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label className="text-sm text-muted-foreground">Member Since</Label>
                  <p className="font-semibold">January 15, 2024</p>
                </div>
              </div>
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label className="text-sm text-muted-foreground">Account Status</Label>
                  <Badge className="bg-secondary text-secondary-foreground">
                    <CheckCircle className="w-3 h-3 mr-1" />
                    ACTIVE
                  </Badge>
                </div>
                <div className="space-y-2">
                  <Label className="text-sm text-muted-foreground">Tier Level</Label>
                  <Badge variant="outline">TIER 2 - VERIFIED</Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Account Numbers Tab */}
        <TabsContent value="accounts" className="space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="flex items-center gap-2">
                    <CreditCard className="w-5 h-5" />
                    Account Numbers
                  </CardTitle>
                  <CardDescription>
                    Your unique Enamel Wallets account numbers for different purposes
                  </CardDescription>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setShowAccountNumbers(!showAccountNumbers)}
                >
                  {showAccountNumbers ? <EyeOff className="w-4 h-4 mr-2" /> : <Eye className="w-4 h-4 mr-2" />}
                  {showAccountNumbers ? 'Hide' : 'Show'}
                </Button>
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Main Account */}
              {accountDetails && (
                <div className="p-4 border rounded-lg bg-gradient-to-r from-primary/5 to-secondary/5">
                  <div className="flex items-center justify-between mb-3">
                    <h4 className="font-semibold flex items-center gap-2">
                      <CreditCard className="w-4 h-4 text-primary" />
                      Primary Account
                    </h4>
                    <Badge className="bg-primary text-primary-foreground">MAIN</Badge>
                  </div>
                  <div className="space-y-3">
                    <div className="grid md:grid-cols-2 gap-4">
                      <div>
                        <Label className="text-xs text-muted-foreground">Account Number</Label>
                        <div className="flex items-center gap-2">
                          <code className="text-lg font-mono font-bold">
                            {showAccountNumbers 
                              ? EnamelAccountGenerator.formatAccountNumber(accountDetails.accountNumber)
                              : accountUtils.maskAccountNumber(accountDetails.accountNumber)
                            }
                          </code>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => copyToClipboard(accountDetails.accountNumber, 'Account Number')}
                          >
                            <Copy className="w-3 h-3" />
                          </Button>
                        </div>
                      </div>
                      <div>
                        <Label className="text-xs text-muted-foreground">Account Name</Label>
                        <p className="font-semibold">{accountDetails.accountName}</p>
                      </div>
                    </div>
                    <div className="grid md:grid-cols-3 gap-4">
                      <div>
                        <Label className="text-xs text-muted-foreground">Bank Name</Label>
                        <p className="font-medium">Enamel Cooperative Bank</p>
                      </div>
                      <div>
                        <Label className="text-xs text-muted-foreground">Bank Code</Label>
                        <p className="font-mono">{accountDetails.bankCode}</p>
                      </div>
                      <div>
                        <Label className="text-xs text-muted-foreground">Account Type</Label>
                        <p className="font-medium">{accountDetails.accountType}</p>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* Wallet-Specific Accounts */}
              {walletAccounts && (
                <div className="space-y-4">
                  <h4 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">
                    Wallet-Specific Account Numbers
                  </h4>
                  <div className="grid gap-4">
                    {Object.entries(walletAccounts).map(([walletType, accountNumber]) => {
                      const walletNames = {
                        spending: 'Spending Wallet',
                        daily_savings: 'Daily Savings',
                        property_savings: 'Property Savings', 
                        custom_wallet: 'Custom Wallet',
                        group_savings: 'Group Savings'
                      };

                      const walletIcons = {
                        spending: CreditCard,
                        daily_savings: 'PiggyBank',
                        property_savings: 'Home',
                        custom_wallet: 'Target',
                        group_savings: 'Users'
                      };

                      return (
                        <div key={walletType} className="p-3 border rounded-lg hover:bg-muted/50 transition-colors">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                              <CreditCard className="w-4 h-4 text-muted-foreground" />
                              <span className="font-medium text-sm">{walletNames[walletType]}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <code className="text-sm font-mono">
                                {showAccountNumbers 
                                  ? EnamelAccountGenerator.formatAccountNumber(accountNumber)
                                  : accountUtils.maskAccountNumber(accountNumber)
                                }
                              </code>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => copyToClipboard(accountNumber, `${walletNames[walletType]} Account`)}
                              >
                                <Copy className="w-3 h-3" />
                              </Button>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* QR Code and Download Options */}
              <div className="grid md:grid-cols-2 gap-4 pt-4 border-t">
                <Button variant="outline" className="flex items-center gap-2">
                  <QrCode className="w-4 h-4" />
                  Generate QR Code
                </Button>
                <Button variant="outline" className="flex items-center gap-2">
                  <Download className="w-4 h-4" />
                  Download Account Details
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* KYC Verification Tab */}
        <TabsContent value="kyc" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Shield className="w-5 h-5" />
                Account Verification (KYC)
              </CardTitle>
              <CardDescription>
                Complete your verification to unlock all features and increase transaction limits
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Verification Progress */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label className="text-sm">Verification Progress</Label>
                  <span className="text-sm font-medium">{kycProgress}/{kycTotal} completed</span>
                </div>
                <Progress value={kycPercentage} className="h-2" />
                <p className="text-xs text-muted-foreground">
                  {kycPercentage}% complete - {kycTotal - kycProgress} steps remaining
                </p>
              </div>

              {/* Verification Items */}
              <div className="space-y-4">
                <div className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                      kycStatus.phone.verified ? 'bg-secondary text-white' : 'bg-muted'
                    }`}>
                      <Phone className="w-4 h-4" />
                    </div>
                    <div>
                      <p className="font-medium text-sm">Phone Number</p>
                      <p className="text-xs text-muted-foreground">{profileData.phone}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    {kycStatus.phone.verified ? (
                      <Badge className="bg-secondary">
                        <CheckCircle className="w-3 h-3 mr-1" />
                        Verified
                      </Badge>
                    ) : (
                      <Button size="sm" variant="outline">Verify</Button>
                    )}
                  </div>
                </div>

                <div className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                      kycStatus.email.verified ? 'bg-secondary text-white' : 'bg-muted'
                    }`}>
                      <Mail className="w-4 h-4" />
                    </div>
                    <div>
                      <p className="font-medium text-sm">Email Address</p>
                      <p className="text-xs text-muted-foreground">{profileData.email}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    {kycStatus.email.verified ? (
                      <Badge className="bg-secondary">
                        <CheckCircle className="w-3 h-3 mr-1" />
                        Verified
                      </Badge>
                    ) : (
                      <Button size="sm" variant="outline">Verify</Button>
                    )}
                  </div>
                </div>

                <div className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                      kycStatus.bvn.verified ? 'bg-secondary text-white' : 'bg-muted'
                    }`}>
                      <Building className="w-4 h-4" />
                    </div>
                    <div>
                      <p className="font-medium text-sm">BVN Verification</p>
                      <p className="text-xs text-muted-foreground">Bank Verification Number</p>
                    </div>
                  </div>
                  <div className="text-right">
                    {kycStatus.bvn.verified ? (
                      <Badge className="bg-secondary">
                        <CheckCircle className="w-3 h-3 mr-1" />
                        Verified
                      </Badge>
                    ) : (
                      <Button size="sm" variant="outline">Verify BVN</Button>
                    )}
                  </div>
                </div>

                <div className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                      kycStatus.identity.verified ? 'bg-secondary text-white' : 'bg-muted'
                    }`}>
                      <Upload className="w-4 h-4" />
                    </div>
                    <div>
                      <p className="font-medium text-sm">Identity Verification</p>
                      <p className="text-xs text-muted-foreground">Upload valid government ID</p>
                    </div>
                  </div>
                  <div className="text-right">
                    {kycStatus.identity.verified ? (
                      <Badge className="bg-secondary">
                        <CheckCircle className="w-3 h-3 mr-1" />
                        Verified
                      </Badge>
                    ) : (
                      <Button size="sm">Upload ID</Button>
                    )}
                  </div>
                </div>
              </div>

              {/* Transaction Limits */}
              <Card className="bg-muted/20">
                <CardHeader>
                  <CardTitle className="text-lg">Current Transaction Limits</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label className="text-sm text-muted-foreground">Daily Limit</Label>
                      <p className="text-xl font-bold">{formatNaira(50000)}</p>
                      <p className="text-xs text-muted-foreground">
                        Complete Tier 3 verification to increase to {formatNaira(500000)}
                      </p>
                    </div>
                    <div>
                      <Label className="text-sm text-muted-foreground">Monthly Limit</Label>
                      <p className="text-xl font-bold">{formatNaira(1000000)}</p>
                      <p className="text-xs text-muted-foreground">
                        Complete Tier 3 verification to increase to {formatNaira(10000000)}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Settings Tab */}
        <TabsContent value="settings" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Settings className="w-5 h-5" />
                Account Settings
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Two-Factor Authentication</Label>
                    <p className="text-xs text-muted-foreground">Add an extra layer of security to your account</p>
                  </div>
                  <Button variant="outline" size="sm">Enable</Button>
                </div>
                
                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">Email Notifications</Label>
                    <p className="text-xs text-muted-foreground">Receive notifications about transactions and account updates</p>
                  </div>
                  <Button variant="outline" size="sm">Configure</Button>
                </div>

                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-sm font-medium">SMS Notifications</Label>
                    <p className="text-xs text-muted-foreground">Get SMS alerts for important account activities</p>
                  </div>
                  <Button variant="outline" size="sm">Configure</Button>
                </div>

                <div className="flex items-center justify-between pt-4 border-t">
                  <div>
                    <Label className="text-sm font-medium text-destructive">Delete Account</Label>
                    <p className="text-xs text-muted-foreground">Permanently delete your account and all data</p>
                  </div>
                  <Button variant="destructive" size="sm">Delete</Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}