"use client";
import { memo } from 'react';
import AdminModal from '@/app/components/admin/admin-modal.jsx';
import WhatsAppSection from './whatsapp-section.jsx';
import { useDashboard } from './dashboard-context';
import InstructionsTab from './config-tabs/instructions-tab.jsx';
import ToolsTab from './config-tabs/tools-tab.jsx';
import VoiceTab from './config-tabs/voice-tab.jsx';

function ConfigPanel() {
  const {
    setConfigOpen,
    configTab,
    setConfigTab,
    designStyle,
    saveDesignStyle,
  } = useDashboard();
  const close = () => setConfigOpen(false);
  return (
<AdminModal
  open={true}
  onClose={close}
  eyebrow="Agent Configuration"
  title="Model behavior, visual output, and local connectors."
  size="wide"
>
  <div className="config-shell config-shell--in-admin-modal">
      <nav className="config-tabs" aria-label="Configuration sections">
        {[
          ['instructions', 'Instructions', 'Core prompt'],
          ['design', 'Design', 'Artifact style'],
          ['voice', 'Voice', 'Jarvis console'],
          ['tools', 'Tools', 'Keys and access'],
          ['whatsapp', 'WhatsApp', 'Bridge + chats'],
        ].map(([id, label, desc]) => (
          <button key={id} className={'config-tab' + (configTab === id ? ' on' : '')} onClick={() => setConfigTab(id)}>
            <span>{label}</span>
            <small>{desc}</small>
          </button>
        ))}
      </nav>
      <div className="config-content">
    {configTab === 'instructions' && <InstructionsTab />}
    {configTab === 'design' && (
      <div className="config-body">
        <div className="config-page-head">
          <span>Design</span>
          <p>Choose the aesthetic applied when the agent builds UI with <code>generate_ui</code>.</p>
        </div>
        <div className="design-style-grid">
          {[
            { id: 'balanced', label: 'Balanced', desc: 'Clean, professional. Moderate whitespace, tasteful hierarchy, versatile for most use cases.' },
            { id: 'minimal', label: 'Minimal', desc: 'Extreme restraint. Near-monochrome palette, maximum whitespace, typography-first.' },
            { id: 'bold', label: 'Bold', desc: 'High contrast, large commanding type, dramatic hierarchy. Assertive presence.' },
            { id: 'soft', label: 'Soft', desc: 'Warm gentle palette, rounded corners, subtle shadows. Light and inviting.' },
          ].map(s => (
            <button
              key={s.id}
              type="button"
              className={'design-style-card' + (designStyle === s.id ? ' on' : '')}
              onClick={() => saveDesignStyle(s.id)}
            >
              <div className="design-style-card-top">
                <span className="design-style-name">{s.label}</span>
                {designStyle === s.id && (
                  <span className="design-style-check">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                  </span>
                )}
              </div>
              <p className="design-style-desc">{s.desc}</p>
            </button>
          ))}
        </div>
      </div>
    )}
    {configTab === 'voice' && <VoiceTab />}
    {configTab === 'tools' && <ToolsTab />}
    {configTab === 'whatsapp' && (
      <div className="config-body">
        <div className="config-page-head">
          <span>WhatsApp</span>
          <p>Bridge pairing, allowed senders, and message history for this agent&apos;s WhatsApp number.</p>
        </div>
        <WhatsAppSection />
      </div>
    )}
      </div>
  </div>
</AdminModal>
  );
}

export default memo(ConfigPanel);
