frontend/src/components/sequences/SequenceCard.jsx

import React, { useState } from 'react';
import { User, Building2, Mail, ChevronDown, ChevronUp, Copy, CheckCircle2 } from 'lucide-react';
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { motion } from 'framer-motion';

export default function SequenceCard({ contact, index }) {
    const [isExpanded, setIsExpanded] = useState(index < 3);
    const [copiedEmailNum, setCopiedEmailNum] = useState(null);
    const [expandedEmailNum, setExpandedEmailNum] = useState(null);

    // Group emails by contact
    const emails = contact.emails || [];
    const firstEmail = emails[0] || contact;
    
    const handleCopy = (emailContent, emailNum) => {
        navigator.clipboard.writeText(emailContent);
        setCopiedEmailNum(emailNum);
        setTimeout(() => setCopiedEmailNum(null), 2000);
    };

    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, delay: index * 0.05 }}
            className="rounded-xl border border-slate-200 bg-white overflow-hidden hover:shadow-md transition-shadow"
        >
            <div 
                className="px-5 py-4 flex items-center justify-between cursor-pointer hover:bg-slate-50/50 transition-colors"
                onClick={() => setIsExpanded(!isExpanded)}
            >
                <div className="flex items-center gap-4">
                    <div className="h-10 w-10 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 
                                    flex items-center justify-center text-white font-semibold text-sm">
                        {firstEmail.firstName?.[0]}{firstEmail.lastName?.[0]}
                    </div>
                    <div>
                        <h4 className="font-semibold text-slate-800">
                            {firstEmail.firstName} {firstEmail.lastName}
                        </h4>
                        <div className="flex items-center gap-3 text-sm text-slate-500">
                            <span className="flex items-center gap-1">
                                <Building2 className="h-3.5 w-3.5" />
                                {firstEmail.company}
                            </span>
                            <span className="flex items-center gap-1">
                                <Mail className="h-3.5 w-3.5" />
                                {firstEmail.email}
                            </span>
                            {emails.length > 1 && (
                                <span className="text-violet-600 font-medium">
                                    {emails.length} emails
                                </span>
                            )}
                        </div>
                    </div>
                </div>
                <div className="flex items-center gap-3">
                    <Badge className="bg-violet-100 text-violet-700 hover:bg-violet-100">
                        {firstEmail.product}
                    </Badge>
                    {isExpanded ? (
                        <ChevronUp className="h-5 w-5 text-slate-400" />
                    ) : (
                        <ChevronDown className="h-5 w-5 text-slate-400" />
                    )}
                </div>
            </div>

            {isExpanded && (
                <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: 'auto' }}
                    exit={{ opacity: 0, height: 0 }}
                    className="border-t border-slate-100"
                >
                    <div className="px-5 py-4 bg-slate-50/50 space-y-4">
                        {emails.map((email, emailIdx) => (
                            <div key={emailIdx} className="bg-white rounded-lg border border-slate-200 p-4">
                                <div className="flex items-center justify-between mb-3">
                                    <div className="flex items-center gap-2">
                                        <h5 className="text-sm font-medium text-slate-600">
                                            Email {email.emailNumber || emailIdx + 1}
                                        </h5>
                                        {emails.length > 1 && (
                                            <Badge variant="outline" className="text-xs">
                                                {email.emailNumber || emailIdx + 1} of {emails.length}
                                            </Badge>
                                        )}
                                    </div>
                                    <Button
                                        variant="ghost"
                                        size="sm"
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            handleCopy(email.emailContent, email.emailNumber || emailIdx + 1);
                                        }}
                                        className="h-8 text-slate-500 hover:text-violet-600"
                                    >
                                        {copiedEmailNum === (email.emailNumber || emailIdx + 1) ? (
                                            <>
                                                <CheckCircle2 className="h-4 w-4 mr-1 text-green-500" />
                                                Copied!
                                            </>
                                        ) : (
                                            <>
                                                <Copy className="h-4 w-4 mr-1" />
                                                Copy
                                            </>
                                        )}
                                    </Button>
                                </div>
                                <div className="mb-3 pb-3 border-b border-slate-100">
                                    <span className="text-xs text-slate-400 uppercase tracking-wide">Subject</span>
                                    <p className="text-sm font-medium text-slate-800 mt-1">{email.subject}</p>
                                </div>
                                <div className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
                                    {email.emailContent}
                                </div>
                            </div>
                        ))}
                    </div>
                </motion.div>
            )}
        </motion.div>
    );
}