/**
 * Integration Status Component
 * Phase 6: Site Integration & Multi-Destination Publishing
 */
import React from 'react';
import { CheckCircleIcon, XCircleIcon, ClockIcon, RefreshCw } from 'lucide-react';

interface IntegrationStatusProps {
  syncEnabled: boolean;
  syncStatus: 'success' | 'failed' | 'pending' | 'syncing';
  lastSyncAt: string | null;
  syncError?: string | null;
}

export default function IntegrationStatus({
  syncEnabled,
  syncStatus,
  lastSyncAt,
  syncError,
}: IntegrationStatusProps) {
  const getStatusIcon = () => {
    switch (syncStatus) {
      case 'success':
        return <CheckCircleIcon className="w-5 h-5 text-green-500" />;
      case 'failed':
        return <XCircleIcon className="w-5 h-5 text-red-500" />;
      case 'syncing':
        return <RefreshCw className="w-5 h-5 text-blue-500 animate-spin" />;
      default:
        return <ClockIcon className="w-5 h-5 text-gray-400" />;
    }
  };

  const getStatusText = () => {
    switch (syncStatus) {
      case 'success':
        return 'Synced';
      case 'failed':
        return 'Sync Failed';
      case 'syncing':
        return 'Syncing...';
      default:
        return 'Not Synced';
    }
  };

  const formatDate = (dateString: string | null) => {
    if (!dateString) return 'Never';
    try {
      const date = new Date(dateString);
      return date.toLocaleString();
    } catch {
      return 'Invalid Date';
    }
  };

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        {getStatusIcon()}
        <span className="text-sm font-medium">{getStatusText()}</span>
      </div>
      
      {syncEnabled && (
        <div className="text-xs text-gray-600 dark:text-gray-400">
          <div>Last sync: {formatDate(lastSyncAt)}</div>
          {syncError && (
            <div className="text-red-600 dark:text-red-400 mt-1">
              Error: {syncError}
            </div>
          )}
        </div>
      )}
      
      {!syncEnabled && (
        <div className="text-xs text-gray-500 dark:text-gray-500">
          Two-way sync is disabled
        </div>
      )}
    </div>
  );
}

