"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChangeTrackingDemo = void 0;
const react_1 = __importStar(require("react"));
const components_1 = require("../components");
// Mock data for demonstration
const MOCK_CHANGES = [
    {
        id: 'change-1',
        userId: 'user1',
        userName: 'Alice Johnson',
        userAvatar: undefined,
        timestamp: new Date(Date.now() - 5 * 60 * 1000), // 5 minutes ago
        field: 'title',
        oldValue: 'Draft Task',
        newValue: 'Complete Task Implementation',
        type: 'update',
        metadata: { source: 'ui' }
    },
    {
        id: 'change-2',
        userId: 'user2',
        userName: 'Bob Smith',
        timestamp: new Date(Date.now() - 15 * 60 * 1000), // 15 minutes ago
        field: 'status',
        oldValue: 'pending',
        newValue: 'in-progress',
        type: 'update',
        metadata: { source: 'api' }
    },
    {
        id: 'change-3',
        userId: 'user1',
        userName: 'Alice Johnson',
        timestamp: new Date(Date.now() - 30 * 60 * 1000), // 30 minutes ago
        field: 'description',
        oldValue: '',
        newValue: 'This task involves implementing the collaboration features with Y.js',
        type: 'create',
        metadata: { source: 'ui' }
    },
    {
        id: 'change-4',
        userId: 'user3',
        userName: 'Carol Davis',
        timestamp: new Date(Date.now() - 45 * 60 * 1000), // 45 minutes ago
        field: 'assignees',
        oldValue: [],
        newValue: ['user1', 'user2'],
        type: 'update',
        metadata: { source: 'bulk-edit' }
    },
    {
        id: 'change-5',
        userId: 'user2',
        userName: 'Bob Smith',
        timestamp: new Date(Date.now() - 60 * 60 * 1000), // 1 hour ago
        field: 'priority',
        oldValue: 'medium',
        newValue: 'high',
        type: 'update',
        metadata: { source: 'ui' }
    }
];
const MOCK_SNAPSHOTS = [
    {
        id: 'snapshot-1',
        name: 'Final Review Version',
        description: 'Version ready for final review and approval',
        timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
        userId: 'user1',
        userName: 'Alice Johnson',
        userAvatar: undefined,
        data: {
            title: 'Complete Task Implementation',
            description: 'This task involves implementing the collaboration features with Y.js',
            status: 'review',
            priority: 'high',
            assignees: ['user1', 'user2'],
            tags: ['collaboration', 'y.js', 'real-time']
        },
        size: 1247,
        isAutomatic: false
    },
    {
        id: 'snapshot-2',
        name: 'Auto: Before Status Change',
        description: 'Automatic snapshot created before status change',
        timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4 hours ago
        userId: 'system',
        userName: 'System',
        data: {
            title: 'Complete Task Implementation',
            description: 'This task involves implementing the collaboration features with Y.js',
            status: 'in-progress',
            priority: 'high',
            assignees: ['user1', 'user2'],
            tags: ['collaboration', 'y.js']
        },
        size: 1156,
        isAutomatic: true
    },
    {
        id: 'snapshot-3',
        name: 'Initial Draft',
        description: 'First version with basic structure',
        timestamp: new Date(Date.now() - 8 * 60 * 60 * 1000), // 8 hours ago
        userId: 'user1',
        userName: 'Alice Johnson',
        data: {
            title: 'Draft Task',
            description: '',
            status: 'pending',
            priority: 'medium',
            assignees: [],
            tags: []
        },
        size: 892,
        isAutomatic: false
    }
];
const MOCK_VERSION_A = {
    id: 'version-a',
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
    userId: 'user1',
    userName: 'Alice Johnson',
    data: MOCK_SNAPSHOTS[0].data,
    changeCount: 15
};
const MOCK_VERSION_B = {
    id: 'version-b',
    timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
    userId: 'system',
    userName: 'System',
    data: MOCK_SNAPSHOTS[1].data,
    changeCount: 8
};
/**
 * Change Tracking Demo Component
 * Demonstrates all change tracking and versioning features
 */
const ChangeTrackingDemo = () => {
    const [activeDemo, setActiveDemo] = (0, react_1.useState)('history');
    const [showRollbackModal, setShowRollbackModal] = (0, react_1.useState)(false);
    const [showComparison, setShowComparison] = (0, react_1.useState)(false);
    // Mock handlers
    const handleRevert = (changeId) => {
        console.log('Reverting change:', changeId);
        alert(`Reverting change ${changeId}`);
    };
    const handleCompare = (changeId1, changeId2) => {
        console.log('Comparing changes:', changeId1, changeId2);
        setShowComparison(true);
    };
    const handleCreateSnapshot = async (name, description) => {
        console.log('Creating snapshot:', { name, description });
        alert(`Created snapshot: ${name}`);
    };
    const handleRestoreSnapshot = async (snapshotId) => {
        console.log('Restoring snapshot:', snapshotId);
        setShowRollbackModal(true);
    };
    const handleDeleteSnapshot = async (snapshotId) => {
        console.log('Deleting snapshot:', snapshotId);
        alert(`Deleted snapshot: ${snapshotId}`);
    };
    const handleCompareSnapshots = (snapshot1Id, snapshot2Id) => {
        console.log('Comparing snapshots:', snapshot1Id, snapshot2Id);
        setShowComparison(true);
    };
    const handleRollbackConfirm = (createBackup) => {
        console.log('Rollback confirmed, create backup:', createBackup);
        alert('Rollback completed!');
        setShowRollbackModal(false);
    };
    const handleRollbackCancel = () => {
        setShowRollbackModal(false);
    };
    return (<div className="change-tracking-demo">
      <div className="change-tracking-demo__header">
        <h1>📊 Change Tracking & Versioning Demo</h1>
        <p>Comprehensive document history, version comparison, and rollback capabilities</p>
      </div>

      {/* Navigation */}
      <div className="change-tracking-demo__nav">
        <button className={`nav-button ${activeDemo === 'history' ? 'active' : ''}`} onClick={() => setActiveDemo('history')}>
          📝 Change History
        </button>
        <button className={`nav-button ${activeDemo === 'comparison' ? 'active' : ''}`} onClick={() => setActiveDemo('comparison')}>
          🔍 Version Comparison
        </button>
        <button className={`nav-button ${activeDemo === 'snapshots' ? 'active' : ''}`} onClick={() => setActiveDemo('snapshots')}>
          📸 Snapshot Manager
        </button>
        <button className={`nav-button ${activeDemo === 'rollback' ? 'active' : ''}`} onClick={() => setActiveDemo('rollback')}>
          ↩️ Rollback Demo
        </button>
      </div>

      {/* Demo Content */}
      <div className="change-tracking-demo__content">
        {activeDemo === 'history' && (<div className="demo-section">
            <h2>Change History</h2>
            <p>View detailed change history with filtering and search capabilities:</p>
            
            <div className="demo-showcase">
              <components_1.ChangeHistory changes={MOCK_CHANGES} onRevert={handleRevert} onCompare={handleCompare} maxDisplay={20} showDiff={true}/>
            </div>
          </div>)}

        {activeDemo === 'comparison' && (<div className="demo-section">
            <h2>Version Comparison</h2>
            <p>Side-by-side comparison of different document versions:</p>
            
            <div className="demo-showcase">
              <components_1.VersionComparison versionA={MOCK_VERSION_A} versionB={MOCK_VERSION_B} onRestore={(versionId) => {
                console.log('Restore version:', versionId);
                alert(`Restoring to version ${versionId}`);
            }} onClose={() => console.log('Close comparison')}/>
            </div>
          </div>)}

        {activeDemo === 'snapshots' && (<div className="demo-section">
            <h2>Snapshot Manager</h2>
            <p>Create, manage, and restore document snapshots:</p>
            
            <div className="demo-showcase">
              <components_1.SnapshotManager documentId="demo-document" snapshots={MOCK_SNAPSHOTS} onCreateSnapshot={handleCreateSnapshot} onRestoreSnapshot={handleRestoreSnapshot} onDeleteSnapshot={handleDeleteSnapshot} onCompareSnapshots={handleCompareSnapshots} isLoading={false}/>
            </div>
          </div>)}

        {activeDemo === 'rollback' && (<div className="demo-section">
            <h2>Rollback Confirmation</h2>
            <p>Smart rollback warnings and conflict detection:</p>
            
            <div className="demo-showcase">
              <button className="demo-trigger-button" onClick={() => setShowRollbackModal(true)}>
                🚨 Trigger Rollback Modal
              </button>
              
              <div className="demo-description">
                <h3>Features demonstrated:</h3>
                <ul>
                  <li>Impact analysis and warnings</li>
                  <li>Conflicting user detection</li>
                  <li>Affected fields preview</li>
                  <li>Backup creation options</li>
                  <li>Confirmation requirements</li>
                </ul>
              </div>
            </div>
          </div>)}
      </div>

      {/* Modals */}
      {showRollbackModal && (<components_1.RollbackConfirmation data={{
                targetVersion: {
                    id: 'snapshot-2',
                    timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
                    userId: 'system',
                    userName: 'System',
                    changeCount: 8
                },
                currentVersion: {
                    id: 'current',
                    timestamp: new Date(),
                    userId: 'user1',
                    userName: 'Alice Johnson',
                    changeCount: 15
                },
                affectedFields: ['title', 'description', 'status', 'tags'],
                conflictingUsers: ['Bob Smith', 'Carol Davis']
            }} onConfirm={handleRollbackConfirm} onCancel={handleRollbackCancel} isLoading={false}/>)}

      {showComparison && (<div className="modal-overlay" onClick={() => setShowComparison(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <components_1.VersionComparison versionA={MOCK_VERSION_A} versionB={MOCK_VERSION_B} onRestore={(versionId) => {
                console.log('Restore version:', versionId);
                alert(`Restoring to version ${versionId}`);
                setShowComparison(false);
            }} onClose={() => setShowComparison(false)}/>
          </div>
        </div>)}
      
      <style jsx>{`
        .change-tracking-demo {
          padding: 24px;
          max-width: 1400px;
          margin: 0 auto;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .change-tracking-demo__header {
          text-align: center;
          margin-bottom: 32px;
        }
        
        .change-tracking-demo__header h1 {
          color: #333;
          margin-bottom: 8px;
          font-size: 32px;
        }
        
        .change-tracking-demo__header p {
          color: #666;
          font-size: 16px;
          margin: 0;
        }
        
        .change-tracking-demo__nav {
          display: flex;
          justify-content: center;
          gap: 8px;
          margin-bottom: 32px;
          flex-wrap: wrap;
        }
        
        .nav-button {
          padding: 12px 20px;
          border: 2px solid #e0e0e0;
          background: white;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          color: #666;
        }
        
        .nav-button:hover {
          border-color: #4ECDC4;
          color: #4ECDC4;
        }
        
        .nav-button.active {
          background: #4ECDC4;
          border-color: #4ECDC4;
          color: white;
        }
        
        .change-tracking-demo__content {
          min-height: 600px;
        }
        
        .demo-section {
          background: white;
          border-radius: 12px;
          padding: 24px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .demo-section h2 {
          color: #4ECDC4;
          margin-bottom: 8px;
          font-size: 24px;
        }
        
        .demo-section p {
          color: #666;
          margin-bottom: 24px;
          font-size: 16px;
        }
        
        .demo-showcase {
          background: #f8f9fa;
          border-radius: 8px;
          padding: 20px;
          border: 2px dashed #e0e0e0;
        }
        
        .demo-trigger-button {
          background: #ff4444;
          color: white;
          border: none;
          padding: 16px 32px;
          border-radius: 8px;
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
          transition: background 0.2s ease;
          margin-bottom: 24px;
        }
        
        .demo-trigger-button:hover {
          background: #cc3333;
        }
        
        .demo-description {
          background: white;
          padding: 20px;
          border-radius: 8px;
          border: 1px solid #e0e0e0;
        }
        
        .demo-description h3 {
          margin-top: 0;
          margin-bottom: 12px;
          color: #333;
        }
        
        .demo-description ul {
          margin: 0;
          padding-left: 20px;
        }
        
        .demo-description li {
          margin-bottom: 8px;
          color: #666;
        }
        
        .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          padding: 20px;
        }
        
        .modal-content {
          max-width: 90vw;
          max-height: 90vh;
          overflow: auto;
        }
        
        @media (max-width: 768px) {
          .change-tracking-demo {
            padding: 16px;
          }
          
          .change-tracking-demo__nav {
            flex-direction: column;
            align-items: center;
          }
          
          .nav-button {
            width: 100%;
            max-width: 280px;
          }
          
          .demo-section {
            padding: 16px;
          }
          
          .change-tracking-demo__header h1 {
            font-size: 24px;
          }
        }
      `}</style>
    </div>);
};
exports.ChangeTrackingDemo = ChangeTrackingDemo;
//# sourceMappingURL=ChangeTrackingDemo.js.map