import React, { useState } from 'react';
import { secureApi } from '../services/secureApi';

/**
 * Migration utility component to remove company owners from employees collection
 * This fixes the architectural issue where owners were incorrectly stored as employees
 */
const OwnerMigrationUtility: React.FC = () => {
    const [isRunning, setIsRunning] = useState(false);
    const [result, setResult] = useState<any>(null);
    const [error, setError] = useState<string | null>(null);

    const runMigration = async () => {
        setIsRunning(true);
        setError(null);
        setResult(null);

        try {
            const migrationResult = await secureApi.migrateOwnersFromEmployees();
            setResult(migrationResult);
            console.log('Migration completed:', migrationResult);
        } catch (err) {
            const errorMessage = err instanceof Error ? err.message : 'Migration failed';
            setError(errorMessage);
            console.error('Migration error:', err);
        } finally {
            setIsRunning(false);
        }
    };

    return (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 max-w-2xl mx-auto">
            <div className="flex items-start">
                <div className="flex-shrink-0">
                    <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                    </svg>
                </div>
                <div className="ml-3">
                    <h3 className="text-sm font-medium text-yellow-800">
                        Data Migration Required
                    </h3>
                    <div className="mt-2 text-sm text-yellow-700">
                        <p>
                            Your organization data needs to be migrated to fix an architectural issue.
                            Previously, company owners were incorrectly stored in the employees collection.
                            This migration will move your owner data to the correct location.
                        </p>
                    </div>
                    <div className="mt-4">
                        <div className="flex">
                            <button
                                type="button"
                                onClick={runMigration}
                                disabled={isRunning}
                                className="bg-yellow-100 px-2 py-1.5 rounded-md text-sm font-medium text-yellow-800 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                {isRunning ? 'Running Migration...' : 'Run Migration'}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {result && (
                <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-md">
                    <div className="flex">
                        <div className="flex-shrink-0">
                            <svg className="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                            </svg>
                        </div>
                        <div className="ml-3">
                            <h3 className="text-sm font-medium text-green-800">
                                Migration Completed Successfully
                            </h3>
                            <div className="mt-2 text-sm text-green-700">
                                <p>Migrated {result.migratedCount} owner record(s) from employees collection.</p>
                                {result.ownerInfo && (
                                    <p className="mt-1">
                                        Owner: {result.ownerInfo.name} ({result.ownerInfo.email})
                                    </p>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {error && (
                <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-md">
                    <div className="flex">
                        <div className="flex-shrink-0">
                            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                            </svg>
                        </div>
                        <div className="ml-3">
                            <h3 className="text-sm font-medium text-red-800">
                                Migration Failed
                            </h3>
                            <div className="mt-2 text-sm text-red-700">
                                <p>{error}</p>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default OwnerMigrationUtility;