'use client';

import { Settings, Boxes, Brain, Network } from 'lucide-react';
import { ConfigurationDashboard } from '@/components/modules/configuration-dashboard';

export default function ConfigurationPage() {
  return (
    <div className="min-h-screen bg-brand-bg p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2.5 bg-gradient-to-br from-brand-deep/10 to-brand-secondary/10 rounded-xl border border-brand-deep/20">
              <Settings className="w-7 h-7 text-brand" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-white">Configuration Center</h1>
              <p className="text-sm text-gray-400">Toggle modules, configure AI agents, and view the agent hierarchy.</p>
            </div>
          </div>
          <div className="mt-3 flex items-center gap-4 text-xs text-gray-500">
            <div className="flex items-center gap-1.5">
              <Boxes className="w-3.5 h-3.5" />
              <span>Core modules cannot be disabled</span>
            </div>
            <div className="flex items-center gap-1.5">
              <Brain className="w-3.5 h-3.5" />
              <span>Each module activates its AI agent</span>
            </div>
            <div className="flex items-center gap-1.5">
              <Network className="w-3.5 h-3.5" />
              <span>Hierarchy adapts automatically</span>
            </div>
          </div>
        </div>

        <ConfigurationDashboard />
      </div>
    </div>
  );
}
