"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.RollbackConfirmation = void 0;
const react_1 = __importStar(require("react"));
const date_fns_1 = require("date-fns");
/**
 * Rollback Confirmation Component
 * Warns users about the impact of rolling back changes
 */
const RollbackConfirmation = ({ data, onConfirm, onCancel, isLoading = false, className = '' }) => {
    const [createBackup, setCreateBackup] = (0, react_1.useState)(true);
    const [acknowledged, setAcknowledged] = (0, react_1.useState)(false);
    const { targetVersion, currentVersion, affectedFields, conflictingUsers } = data;
    // Calculate time difference
    const timeDifference = currentVersion.timestamp.getTime() - targetVersion.timestamp.getTime();
    const hoursDifference = Math.floor(timeDifference / (1000 * 60 * 60));
    const daysDifference = Math.floor(hoursDifference / 24);
    // Format field names
    const formatFieldName = (field) => {
        return field
            .replace(/([A-Z])/g, ' $1')
            .replace(/^./, str => str.toUpperCase())
            .trim();
    };
    // Get warning level based on impact
    const getWarningLevel = () => {
        if (conflictingUsers && conflictingUsers.length > 0) {
            return 'critical';
        }
        else if (affectedFields.length > 5 || daysDifference > 7) {
            return 'high';
        }
        else if (affectedFields.length > 2 || hoursDifference > 24) {
            return 'medium';
        }
        return 'low';
    };
    const warningLevel = getWarningLevel();
    // Get warning colors and icons
    const getWarningStyle = () => {
        switch (warningLevel) {
            case 'critical':
                return { color: '#d32f2f', bg: '#ffebee', icon: '🚨' };
            case 'high':
                return { color: '#f57c00', bg: '#fff3e0', icon: '⚠️' };
            case 'medium':
                return { color: '#fbc02d', bg: '#fffde7', icon: '⚡' };
            default:
                return { color: '#388e3c', bg: '#e8f5e9', icon: '✅' };
        }
    };
    const warningStyle = getWarningStyle();
    return (<div className={`rollback-confirmation ${className}`}>
      <div className="rollback-confirmation__overlay" onClick={onCancel}/>
      
      <div className="rollback-confirmation__modal">
        <div className="rollback-confirmation__header">
          <div className="rollback-confirmation__icon" style={{ color: warningStyle.color }}>
            {warningStyle.icon}
          </div>
          <h2 className="rollback-confirmation__title">
            Confirm Rollback
          </h2>
          <button className="rollback-confirmation__close" onClick={onCancel} disabled={isLoading}>
            ✕
          </button>
        </div>

        <div className="rollback-confirmation__content">
          {/* Warning Banner */}
          <div className="rollback-confirmation__warning" style={{
            background: warningStyle.bg,
            borderColor: warningStyle.color
        }}>
            <strong style={{ color: warningStyle.color }}>
              {warningLevel === 'critical' && 'Critical Warning'}
              {warningLevel === 'high' && 'High Impact Warning'}
              {warningLevel === 'medium' && 'Medium Impact Warning'}
              {warningLevel === 'low' && 'Low Impact Warning'}
            </strong>
            
            {conflictingUsers && conflictingUsers.length > 0 && (<p>
                <strong>{conflictingUsers.length}</strong> user{conflictingUsers.length > 1 ? 's' : ''} 
                {conflictingUsers.length === 1 ? ' is' : ' are'} currently editing this document:
                <br />
                <span className="rollback-confirmation__users">
                  {conflictingUsers.join(', ')}
                </span>
              </p>)}
          </div>

          {/* Version Information */}
          <div className="rollback-confirmation__versions">
            <div className="rollback-confirmation__version-info">
              <h3>Rolling back to:</h3>
              <div className="rollback-confirmation__version">
                <div className="rollback-confirmation__version-user">
                  {targetVersion.userAvatar ? (<img src={targetVersion.userAvatar} alt={targetVersion.userName}/>) : (<div className="rollback-confirmation__user-initial">
                      {targetVersion.userName.charAt(0).toUpperCase()}
                    </div>)}
                  <span>{targetVersion.userName}</span>
                </div>
                <div className="rollback-confirmation__version-time">
                  {(0, date_fns_1.format)(targetVersion.timestamp, 'MMM d, yyyy h:mm a')}
                  <span className="rollback-confirmation__version-ago">
                    ({(0, date_fns_1.formatDistance)(targetVersion.timestamp, new Date(), { addSuffix: true })})
                  </span>
                </div>
              </div>
            </div>

            <div className="rollback-confirmation__impact">
              <h3>Impact Summary:</h3>
              <ul>
                <li>
                  <strong>{affectedFields.length}</strong> field{affectedFields.length > 1 ? 's' : ''} will be changed
                </li>
                <li>
                  <strong>{currentVersion.changeCount}</strong> change{currentVersion.changeCount > 1 ? 's' : ''} since target version will be lost
                </li>
                {daysDifference > 0 && (<li>
                    Rolling back <strong>{daysDifference}</strong> day{daysDifference > 1 ? 's' : ''} of work
                  </li>)}
              </ul>
            </div>
          </div>

          {/* Affected Fields */}
          {affectedFields.length > 0 && (<div className="rollback-confirmation__fields">
              <h3>Affected Fields:</h3>
              <div className="rollback-confirmation__field-list">
                {affectedFields.slice(0, 10).map(field => (<span key={field} className="rollback-confirmation__field-tag">
                    {formatFieldName(field)}
                  </span>))}
                {affectedFields.length > 10 && (<span className="rollback-confirmation__field-more">
                    +{affectedFields.length - 10} more
                  </span>)}
              </div>
            </div>)}

          {/* Options */}
          <div className="rollback-confirmation__options">
            <label className="rollback-confirmation__option">
              <input type="checkbox" checked={createBackup} onChange={(e) => setCreateBackup(e.target.checked)} disabled={isLoading}/>
              <span>Create backup of current version before rollback</span>
              <small>Recommended - allows you to restore current changes later</small>
            </label>

            <label className="rollback-confirmation__option">
              <input type="checkbox" checked={acknowledged} onChange={(e) => setAcknowledged(e.target.checked)} disabled={isLoading}/>
              <span>I understand this action cannot be undone without a backup</span>
            </label>
          </div>
        </div>

        <div className="rollback-confirmation__actions">
          <button className="rollback-confirmation__cancel" onClick={onCancel} disabled={isLoading}>
            Cancel
          </button>
          
          <button className="rollback-confirmation__confirm" onClick={() => onConfirm(createBackup)} disabled={isLoading || !acknowledged}>
            {isLoading ? (<>
                <span className="rollback-confirmation__spinner"></span>
                Rolling back...
              </>) : ('Confirm Rollback')}
          </button>
        </div>
      </div>
      
      <style jsx>{`
        .rollback-confirmation {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1000;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px;
        }
        
        .rollback-confirmation__overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          backdrop-filter: blur(4px);
        }
        
        .rollback-confirmation__modal {
          position: relative;
          background: white;
          border-radius: 12px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
          max-width: 600px;
          width: 100%;
          max-height: 80vh;
          overflow-y: auto;
          animation: slideUp 0.3s ease;
        }
        
        @keyframes slideUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .rollback-confirmation__header {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 20px;
          border-bottom: 1px solid #e0e0e0;
        }
        
        .rollback-confirmation__icon {
          font-size: 24px;
        }
        
        .rollback-confirmation__title {
          flex: 1;
          margin: 0;
          font-size: 20px;
          font-weight: 600;
          color: #333;
        }
        
        .rollback-confirmation__close {
          background: none;
          border: none;
          font-size: 18px;
          color: #666;
          cursor: pointer;
          padding: 4px;
          border-radius: 4px;
        }
        
        .rollback-confirmation__close:hover:not(:disabled) {
          background: #f0f0f0;
        }
        
        .rollback-confirmation__close:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
        
        .rollback-confirmation__content {
          padding: 20px;
        }
        
        .rollback-confirmation__warning {
          padding: 16px;
          border-radius: 8px;
          border-left: 4px solid;
          margin-bottom: 20px;
        }
        
        .rollback-confirmation__warning strong {
          display: block;
          margin-bottom: 8px;
          font-size: 14px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        .rollback-confirmation__warning p {
          margin: 8px 0 0 0;
          font-size: 14px;
          line-height: 1.4;
        }
        
        .rollback-confirmation__users {
          font-weight: 500;
          color: #d32f2f;
        }
        
        .rollback-confirmation__versions {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          margin-bottom: 20px;
        }
        
        .rollback-confirmation__version-info h3,
        .rollback-confirmation__impact h3 {
          margin: 0 0 12px 0;
          font-size: 14px;
          font-weight: 600;
          color: #666;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        .rollback-confirmation__version {
          background: #f8f9fa;
          padding: 12px;
          border-radius: 6px;
        }
        
        .rollback-confirmation__version-user {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
        }
        
        .rollback-confirmation__version-user img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          object-fit: cover;
        }
        
        .rollback-confirmation__user-initial {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #4ECDC4;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: bold;
        }
        
        .rollback-confirmation__version-time {
          font-size: 13px;
          color: #666;
          line-height: 1.3;
        }
        
        .rollback-confirmation__version-ago {
          display: block;
          font-size: 12px;
          color: #999;
        }
        
        .rollback-confirmation__impact ul {
          margin: 0;
          padding-left: 16px;
          list-style: disc;
        }
        
        .rollback-confirmation__impact li {
          margin-bottom: 4px;
          font-size: 14px;
          color: #666;
        }
        
        .rollback-confirmation__fields {
          margin-bottom: 20px;
        }
        
        .rollback-confirmation__fields h3 {
          margin: 0 0 12px 0;
          font-size: 14px;
          font-weight: 600;
          color: #666;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        .rollback-confirmation__field-list {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
        
        .rollback-confirmation__field-tag {
          background: #e3f2fd;
          color: #1976d2;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
        }
        
        .rollback-confirmation__field-more {
          background: #f0f0f0;
          color: #666;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
        }
        
        .rollback-confirmation__options {
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin-bottom: 20px;
        }
        
        .rollback-confirmation__option {
          display: flex;
          flex-direction: column;
          gap: 4px;
          cursor: pointer;
        }
        
        .rollback-confirmation__option input {
          margin-right: 8px;
        }
        
        .rollback-confirmation__option span {
          font-size: 14px;
          font-weight: 500;
        }
        
        .rollback-confirmation__option small {
          font-size: 12px;
          color: #666;
          margin-left: 20px;
        }
        
        .rollback-confirmation__actions {
          display: flex;
          justify-content: flex-end;
          gap: 12px;
          padding: 20px;
          border-top: 1px solid #e0e0e0;
        }
        
        .rollback-confirmation__cancel,
        .rollback-confirmation__confirm {
          padding: 10px 20px;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          border: none;
        }
        
        .rollback-confirmation__cancel {
          background: #f5f5f5;
          color: #666;
        }
        
        .rollback-confirmation__cancel:hover:not(:disabled) {
          background: #e0e0e0;
        }
        
        .rollback-confirmation__confirm {
          background: #d32f2f;
          color: white;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        .rollback-confirmation__confirm:hover:not(:disabled) {
          background: #b71c1c;
        }
        
        .rollback-confirmation__confirm:disabled {
          background: #ccc;
          cursor: not-allowed;
        }
        
        .rollback-confirmation__spinner {
          width: 14px;
          height: 14px;
          border: 2px solid transparent;
          border-top: 2px solid currentColor;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
        
        @media (max-width: 600px) {
          .rollback-confirmation {
            padding: 10px;
          }
          
          .rollback-confirmation__versions {
            grid-template-columns: 1fr;
            gap: 16px;
          }
          
          .rollback-confirmation__actions {
            flex-direction: column;
          }
        }
      `}</style>
    </div>);
};
exports.RollbackConfirmation = RollbackConfirmation;
//# sourceMappingURL=RollbackConfirmation.js.map