import React, { useMemo, 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);

    const emails = contact.emails || [];
    const linkedin = contact.linkedin || [];
    const firstEmail = emails[0] ||
        linkedin[0] || {
            firstName: contact.firstName,
            lastName: contact.lastName,
            company: contact.company,
            email: contact.email,
            product: contact.product,
        };

    const mergedTimeline = useMemo(() => {
        const parts = [
            ...(emails || []).map((m, i) => ({
                kind: 'email',
                stepOrder: m.stepOrder,
                data: m,
                key: `e-${m.stepOrder ?? 'x'}-${m.emailNumber ?? i}`,
            })),
            ...(linkedin || []).map((m, i) => ({
                kind: 'linkedin',
                stepOrder: m.stepOrder,
                data: m,
                key: `l-${m.stepOrder ?? 'x'}-${m.emailNumber ?? i}`,
            })),
        ];
        const hasOrder = parts.some((p) => p.stepOrder != null);
        if (!hasOrder) return null;
        return [...parts].sort((a, b) => (a.stepOrder ?? 1e9) - (b.stepOrder ?? 1e9));
    }, [emails, linkedin]);
    
    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 > 0 || linkedin.length > 0) && (
                                <span className="text-violet-600 font-medium">
                                    {emails.length > 0
                                        ? `${emails.length} email${emails.length === 1 ? '' : 's'}`
                                        : null}
                                    {emails.length > 0 && linkedin.length > 0 ? ' · ' : null}
                                    {linkedin.length > 0
                                        ? `${linkedin.length} LinkedIn`
                                        : null}
                                </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">
                        {mergedTimeline ? (
                            mergedTimeline.map((item, idx) => {
                                const copyId =
                                    item.kind === 'email'
                                        ? item.data.emailNumber || idx + 1
                                        : `li-${item.data.emailNumber || idx + 1}`;
                                const isLi = item.kind === 'linkedin';
                                return (
                                    <div
                                        key={item.key}
                                        className={`rounded-lg border p-4 shadow-sm ${
                                            isLi
                                                ? 'border-sky-200 bg-white'
                                                : 'border-slate-200 bg-white'
                                        }`}
                                    >
                                        <div className="mb-3 flex items-center justify-between">
                                            <div className="flex flex-wrap items-center gap-2">
                                                <Badge
                                                    variant="outline"
                                                    className={
                                                        isLi ? 'border-sky-200 text-sky-800' : 'text-slate-700'
                                                    }
                                                >
                                                    {isLi ? 'LinkedIn' : 'Gmail'}
                                                </Badge>
                                                <h5
                                                    className={`text-sm font-medium ${
                                                        isLi ? 'text-sky-800' : 'text-slate-600'
                                                    }`}
                                                >
                                                    {isLi
                                                        ? `Message ${item.data.emailNumber || idx + 1}`
                                                        : `Email ${item.data.emailNumber || idx + 1}`}
                                                </h5>
                                            </div>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    handleCopy(item.data.emailContent, copyId);
                                                }}
                                                className={`h-8 text-slate-500 ${
                                                    isLi ? 'hover:text-sky-600' : 'hover:text-violet-600'
                                                }`}
                                            >
                                                {copiedEmailNum === copyId ? (
                                                    <>
                                                        <CheckCircle2 className="mr-1 h-4 w-4 text-green-500" />
                                                        Copied!
                                                    </>
                                                ) : (
                                                    <>
                                                        <Copy className="mr-1 h-4 w-4" />
                                                        Copy
                                                    </>
                                                )}
                                            </Button>
                                        </div>
                                        {!isLi && (
                                            <div className="mb-3 border-b border-slate-100 pb-3">
                                                <span className="text-xs uppercase tracking-wide text-slate-400">
                                                    Subject
                                                </span>
                                                <p className="mt-1 text-sm font-medium text-slate-800">
                                                    {item.data.subject}
                                                </p>
                                            </div>
                                        )}
                                        <div className="whitespace-pre-wrap text-sm leading-relaxed text-slate-700">
                                            {item.data.emailContent}
                                        </div>
                                    </div>
                                );
                            })
                        ) : (
                            <>
                                {emails.map((email, emailIdx) => (
                                    <div key={`e-${emailIdx}`} className="rounded-lg border border-slate-200 bg-white p-4">
                                        <div className="mb-3 flex items-center justify-between">
                                            <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="mr-1 h-4 w-4 text-green-500" />
                                                        Copied!
                                                    </>
                                                ) : (
                                                    <>
                                                        <Copy className="mr-1 h-4 w-4" />
                                                        Copy
                                                    </>
                                                )}
                                            </Button>
                                        </div>
                                        <div className="mb-3 border-b border-slate-100 pb-3">
                                            <span className="text-xs uppercase tracking-wide text-slate-400">
                                                Subject
                                            </span>
                                            <p className="mt-1 text-sm font-medium text-slate-800">{email.subject}</p>
                                        </div>
                                        <div className="whitespace-pre-wrap text-sm leading-relaxed text-slate-700">
                                            {email.emailContent}
                                        </div>
                                    </div>
                                ))}
                                {linkedin.map((msg, liIdx) => (
                                    <div
                                        key={`li-${liIdx}`}
                                        className="rounded-lg border border-sky-200 bg-white p-4 shadow-sm"
                                    >
                                        <div className="mb-3 flex items-center justify-between">
                                            <h5 className="text-sm font-medium text-sky-800">
                                                LinkedIn — Message {msg.emailNumber || liIdx + 1}
                                            </h5>
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    handleCopy(
                                                        msg.emailContent,
                                                        `li-${msg.emailNumber || liIdx + 1}`
                                                    );
                                                }}
                                                className="h-8 text-slate-500 hover:text-sky-600"
                                            >
                                                {copiedEmailNum === `li-${msg.emailNumber || liIdx + 1}` ? (
                                                    <>
                                                        <CheckCircle2 className="mr-1 h-4 w-4 text-green-500" />
                                                        Copied!
                                                    </>
                                                ) : (
                                                    <>
                                                        <Copy className="mr-1 h-4 w-4" />
                                                        Copy
                                                    </>
                                                )}
                                            </Button>
                                        </div>
                                        <div className="whitespace-pre-wrap text-sm leading-relaxed text-slate-700">
                                            {msg.emailContent}
                                        </div>
                                    </div>
                                ))}
                            </>
                        )}
                    </div>
                </motion.div>
            )}
        </motion.div>
    );
}