import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Copy, Shield, User, Users, Eye, EyeOff } from 'lucide-react';
import { toast } from 'sonner@2.0.3';
import { useState } from 'react';

interface TestCredentialsCardProps {
  onClose?: () => void;
  className?: string;
}

export function TestCredentialsCard({ onClose, className }: TestCredentialsCardProps) {
  const [showCredentials, setShowCredentials] = useState(false);

  const credentials = [
    {
      role: 'Admin',
      icon: Shield,
      email: 'admin@enamelwallets.com',
      phone: '+234 900 000 0001',
      color: 'bg-destructive',
      description: 'Full system access, user management, analytics'
    },
    {
      role: 'Staff',
      icon: Users,
      email: 'staff@enamelwallets.com',
      phone: '+234 900 000 0002',
      color: 'bg-warning',
      description: 'Limited admin access, customer support'
    },
    {
      role: 'Customer',
      icon: User,
      email: 'demo@enamelwallets.com',
      phone: '+234 800 000 0000',
      color: 'bg-primary',
      description: 'Standard user account with all wallet features'
    }
  ];

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

  return (
    <Card className={`w-full max-w-2xl mx-auto border-2 border-primary/20 ${className}`}>
      <CardHeader className="text-center">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Shield className="w-6 h-6 text-primary" />
            <CardTitle className="text-xl">Test Credentials</CardTitle>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setShowCredentials(!showCredentials)}
          >
            {showCredentials ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
          </Button>
        </div>
        <CardDescription>
          Use these credentials to test different user roles and access levels
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-4">
        {credentials.map((cred, index) => (
          <div
            key={index}
            className="p-4 rounded-lg border bg-muted/20 hover:bg-muted/40 transition-colors"
          >
            <div className="flex items-start justify-between mb-3">
              <div className="flex items-center gap-3">
                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${cred.color}`}>
                  <cred.icon className="w-5 h-5 text-white" />
                </div>
                <div>
                  <h3 className="font-semibold">{cred.role} User</h3>
                  <p className="text-sm text-muted-foreground">{cred.description}</p>
                </div>
              </div>
              <Badge variant="outline" className="text-xs">
                Test Account
              </Badge>
            </div>

            {showCredentials && (
              <div className="space-y-2 ml-13">
                <div className="flex items-center justify-between p-2 bg-background rounded border">
                  <span className="text-sm font-mono">{cred.email}</span>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => copyToClipboard(cred.email, 'Email')}
                    className="h-8 w-8 p-0"
                  >
                    <Copy className="w-3 h-3" />
                  </Button>
                </div>
                <div className="flex items-center justify-between p-2 bg-background rounded border">
                  <span className="text-sm font-mono">{cred.phone}</span>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => copyToClipboard(cred.phone, 'Phone')}
                    className="h-8 w-8 p-0"
                  >
                    <Copy className="w-3 h-3" />
                  </Button>
                </div>
                <p className="text-xs text-muted-foreground mt-2">
                  Password: <span className="font-mono">any password</span> (mock authentication)
                </p>
              </div>
            )}
          </div>
        ))}

        <div className="pt-4 border-t">
          <h4 className="font-medium mb-2">How to Access Admin Dashboard:</h4>
          <ol className="text-sm text-muted-foreground space-y-1 ml-4">
            <li>1. Sign in with admin credentials above</li>
            <li>2. Look for the shield icon (🛡️) in the dashboard header</li>
            <li>3. Click the shield icon to access admin features</li>
          </ol>
        </div>

        <div className="bg-primary/5 rounded-lg p-3 text-center">
          <p className="text-sm text-muted-foreground">
            💡 <strong>Tip:</strong> You can sign in with email or phone number. Both work for each role.
          </p>
        </div>

        {onClose && (
          <Button onClick={onClose} variant="outline" className="w-full mt-4">
            Close
          </Button>
        )}
      </CardContent>
    </Card>
  );
}