import React from 'react';
import AIConfigurationCard from './cards/AIConfigurationCard';
import IdentityGovernanceCard from './cards/IdentityGovernanceCard';
import NetworkIdentityCard from './cards/NetworkIdentityCard';

export default function SettingsPageContent({ context }) {
  const {
    message,
    confirmAction,
    setConfirmAction,
    executeConfirmAction,
    handleExport,
    handleImport,
    fileInputRef,
    userProfile
  } = context;

  return (
    <div className="h-full overflow-y-auto py-10 px-4 sm:px-6 lg:px-8 font-sans">
      <div className="max-w-3xl mx-auto">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
            <div className="flex-1">
              <h1 className="text-3xl font-extrabold text-gray-900 dark:text-white text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-indigo-900 to-emerald-900 dark:from-white dark:via-indigo-400 dark:to-emerald-400 mb-2">
                Settings & Governance
              </h1>
              <p className="text-gray-600 dark:text-gray-400 font-medium">
                Manage user roles, AI resources, and system-wide security policies.
              </p>
            </div>

            {userProfile?.role === 'admin' && (
              <div className="flex items-center gap-2 pt-2">
                <button 
                  onClick={handleExport} 
                  className="px-4 py-2.5 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded-xl text-[10px] font-black hover:border-indigo-300 dark:hover:border-indigo-700 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-all flex items-center gap-2 shadow-sm whitespace-nowrap"
                  title="Export System YAML"
                >
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                  </svg>
                  Export
                </button>
                
                <button 
                  onClick={() => fileInputRef.current?.click()} 
                  className="px-4 py-2.5 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded-xl text-[10px] font-black hover:border-emerald-300 dark:hover:border-emerald-700 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 transition-all flex items-center gap-2 shadow-sm whitespace-nowrap"
                  title="Import System YAML"
                >
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                  </svg>
                  Import
                </button>
                <input 
                  type="file" 
                  ref={fileInputRef} 
                  onChange={handleImport} 
                  accept=".yaml,.yml" 
                  className="hidden" 
                  autoComplete="off"
                  tabIndex="-1"
                  aria-hidden="true"
                />
              </div>
            )}
          </div>

          {message.text && (
            <div className={`p-4 rounded-xl mb-6 shadow-sm border animate-fade-in ${message.type === 'error' ? 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800' : 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800'}`}>
              <div className="flex items-center gap-2">
                {message.type === 'error' ? (
                  <svg className="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                ) : (
                  <svg className="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                )}
                <span className="text-sm font-bold">{message.text}</span>
              </div>
            </div>
          )}

          <div className="space-y-10 pb-20">
            {/* --- CARD 1: AI RESOURCE MANAGEMENT --- */}
            <AIConfigurationCard context={context} />

            {/* --- CARD 2: IDENTITY & ACCESS GOVERNANCE --- */}
            <IdentityGovernanceCard context={context} />

            {/* --- CARD 4: NETWORK ACCESS & EXTERNAL IDENTITY (ADMIN ONLY) --- */}
            <NetworkIdentityCard context={context} />
          </div>

          {/* GLOBAL CONFIRMATION MODAL */}
          {confirmAction && (
            <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
                <div className="bg-white dark:bg-gray-800 rounded-[32px] w-full max-w-md shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 border dark:border-gray-700">
                    <div className="p-8 text-center">
                        <div className="w-20 h-20 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-6 text-3xl">
                            ⚠️
                        </div>
                        <h3 className="text-xl font-black text-gray-900 dark:text-white mb-2">Final Confirmation</h3>
                        <p className="text-sm text-gray-500 dark:text-gray-400 mb-8 italic">
                            {confirmAction.label}
                        </p>
                        <div className="flex gap-4">
                            <button
                                onClick={() => setConfirmAction(null)}
                                className="flex-1 py-4 text-xs font-black text-gray-500 hover:text-gray-700 dark:hover:text-white transition-colors"
                            >
                                Cancel
                            </button>
                            <button
                                onClick={executeConfirmAction}
                                className="flex-1 py-4 text-xs font-black text-white bg-red-600 hover:bg-red-700 rounded-2xl transition-all shadow-xl shadow-red-600/20 active:scale-95"
                            >
                                Confirm
                            </button>
                        </div>
                    </div>
                </div>
            </div>
          )}
      </div>
    </div>
  );
}
