import { useState } from "react";
import { Clock, ChevronDown, ChevronUp, History } from "lucide-react";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);

interface MemoVersion {
    version: number;
    content: string;
    createdAt: string;
    createdBy?: string;
}

interface MemoVersionHistoryProps {
    versions: MemoVersion[];
    currentContent?: string;
}

/**
 * MemoVersionHistory - Component to display version history of a memo
 * Shows a collapsible list of previous versions with diffs
 */
export function MemoVersionHistory({ versions, currentContent }: MemoVersionHistoryProps) {
    const [isExpanded, setIsExpanded] = useState(false);
    const [selectedVersion, setSelectedVersion] = useState<number | null>(null);

    if (!versions || versions.length === 0) {
        return null; // Don't render if no versions
    }

    const sortedVersions = [...versions].sort((a, b) => b.version - a.version);

    return (
        <div className="memo-version-history border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
            {/* Header - Toggle Button */}
            <button
                onClick={() => setIsExpanded(!isExpanded)}
                className="w-full flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
            >
                <div className="flex items-center gap-2 text-gray-600 dark:text-gray-300">
                    <History size={16} />
                    <span className="text-sm font-medium">Version History</span>
                    <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 px-2 py-0.5 rounded-full">
                        {versions.length}
                    </span>
                </div>
                {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
            </button>

            {/* Versions List */}
            {isExpanded && (
                <div className="divide-y divide-gray-200 dark:divide-gray-700">
                    {sortedVersions.map((version) => (
                        <div
                            key={version.version}
                            className={`p-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${selectedVersion === version.version ? "bg-blue-50 dark:bg-blue-900/20" : ""
                                }`}
                            onClick={() => setSelectedVersion(
                                selectedVersion === version.version ? null : version.version
                            )}
                        >
                            {/* Version Header */}
                            <div className="flex items-center justify-between mb-1">
                                <div className="flex items-center gap-2">
                                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                        v{version.version}
                                    </span>
                                    {version.createdBy && (
                                        <span className="text-xs text-gray-500 dark:text-gray-400">
                                            by {version.createdBy}
                                        </span>
                                    )}
                                </div>
                                <div className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
                                    <Clock size={12} />
                                    {dayjs(version.createdAt).fromNow()}
                                </div>
                            </div>

                            {/* Version Content Preview */}
                            <div className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                                {version.content.substring(0, 150)}
                                {version.content.length > 150 && "..."}
                            </div>

                            {/* Expanded Content */}
                            {selectedVersion === version.version && (
                                <div className="mt-3 p-3 bg-gray-100 dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700">
                                    <div className="text-xs text-gray-500 dark:text-gray-400 mb-2">
                                        Full content at this version:
                                    </div>
                                    <div className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
                                        {version.content}
                                    </div>
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}

export default MemoVersionHistory;
