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 tracking-tight 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 uppercase tracking-widest 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-4l-4 4m0 0l-4-4m4 4V4" />
</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 uppercase tracking-widest 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-8l-4-4m0 0L8 8m4-4v12" />
</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 uppercase tracking-tight 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 uppercase tracking-widest 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 uppercase tracking-widest 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>
);
}
