avbeat-com/src/app/dashboard/ai-console/settings/page.tsx

'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation';
import { BB_PEN_NAMES, AV_PEN_NAMES } from '@/lib/auth/permissions';

interface Settings {
  ollama_endpoint: string;
  ollama_model_default: string;
  ollama_model_translation: string;
  ollama_model_background: string;
  auto_failover: boolean;
  failover_timeout_seconds: number;
  default_site_id: number;
  default_pen_name_bb: string;
  default_pen_name_av: string;
  save_session_history: boolean;
  history_retention_days: number;
  streaming_enabled: boolean;
  background_use_local: boolean;
  background_timeout_seconds: number;
  priority_queue_enabled: boolean;
}

interface ConnectionTest {
  online: boolean;
  latencyMs: number;
  models: string[];
}

export default function AIConsoleSettingsPage() {
  const { user, loading } = useAuth();
  const router = useRouter();

  const [settings, setSettings] = useState<Settings>({
    ollama_endpoint: '',
    ollama_model_default: '',
    ollama_model_translation: '',
    ollama_model_background: '',
    auto_failover: true,
    failover_timeout_seconds: 8,
    default_site_id: 1,
    default_pen_name_bb: 'Michael Strand',
    default_pen_name_av: 'Rex Chandler',
    save_session_history: true,
    history_retention_days: 30,
    streaming_enabled: true,
    background_use_local: true,
    background_timeout_seconds: 120,
    priority_queue_enabled: true,
  });

  const [loadingSettings, setLoadingSettings] = useState(true);
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState(false);
  const [connectionResult, setConnectionResult] = useState<ConnectionTest | null>(null);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  const showToast = (message: string, type: 'success' | 'error' = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 4000);
  };

  useEffect(() => {
    if (!loading && !user) router.push('/login');
  }, [user, loading, router]);

  useEffect(() => {
    if (!user) return;
    fetch('/api/ai/console-settings')
      .then(r => r.json())
      .then(data => {
        if (data.settings) setSettings(data.settings);
      })
      .catch(() => {})
      .finally(() => setLoadingSettings(false));
  }, [user]);

  const handleTestConnection = async () => {
    setTesting(true);
    setConnectionResult(null);
    try {
      const res = await fetch('/api/ai/console-settings?action=test_connection');
      const data = await res.json();
      setConnectionResult(data);
    } catch {
      setConnectionResult({ online: false, latencyMs: 0, models: [] });
    } finally {
      setTesting(false);
    }
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      const res = await fetch('/api/ai/console-settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'save_settings', ...settings }),
      });
      const data = await res.json();
      if (data.success) showToast('Settings saved');
      else showToast(data.error || 'Failed to save', 'error');
    } catch {
      showToast('Failed to save', 'error');
    } finally {
      setSaving(false);
    }
  };

  const update = (key: keyof Settings, value: any) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  if (loading || loadingSettings) {
    return (
      <div className="min-h-screen bg-[#0d1117] flex items-center justify-center">
        <div className="w-6 h-6 border-2 border-[#3b82f6]/30 border-t-[#3b82f6] rounded-full animate-spin" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#0d1117]">
      {/* Header */}
      <div className="bg-[#111827] border-b border-[#1e2a3a] px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link href="/dashboard/ai-console" className="text-[#555] hover:text-[#3b82f6] text-sm transition-colors">← AI Console</Link>
          <span className="text-[#333]">/</span>
          <h1 className="text-white font-bold text-sm">AI Console Settings</h1>
        </div>
        <button
          onClick={handleSave}
          disabled={saving}
          className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white text-sm px-4 py-2 rounded-lg transition-colors font-medium"
        >
          {saving ? 'Saving...' : 'Save Settings'}
        </button>
      </div>

      <div className="max-w-3xl mx-auto px-6 py-8 space-y-8">
        {/* Local AI Server */}
        <section className="bg-[#111827] border border-[#1e2a3a] rounded-xl p-6">
          <h2 className="text-white font-bold text-base mb-1">Local AI Server (Ollama)</h2>
          <p className="text-[#555] text-xs mb-5">
            Connect to your local Ollama instance running on your Windows PC with 24GB GPU.
          </p>

          {/* Windows sleep warning */}
          <div className="bg-yellow-900/20 border border-yellow-700/40 rounded-lg p-4 mb-5">
            <div className="flex gap-3">
              <span className="text-yellow-400 text-lg flex-shrink-0">⚠</span>
              <div>
                <p className="text-yellow-300 text-sm font-semibold mb-1">Windows Sleep / Hibernate Warning</p>
                <p className="text-yellow-200/70 text-xs leading-relaxed">
                  Your Windows server may sleep or hibernate when inactive, causing the local AI to go offline.
                  To prevent this:
                </p>
                <ul className="text-yellow-200/70 text-xs mt-2 space-y-1 ml-3">
                  <li>• <strong className="text-yellow-200">Option 1:</strong> Windows Settings → System → Power &amp; Sleep → Sleep → set to <strong className="text-yellow-200">Never</strong></li>
                  <li>• <strong className="text-yellow-200">Option 2:</strong> Download the free <strong className="text-yellow-200">Caffeine</strong> app for Windows — keeps your PC awake automatically</li>
                </ul>
                <p className="text-yellow-200/50 text-[10px] mt-2">
                  The Health Dashboard will alert you if the local server has been offline for more than 30 minutes.
                </p>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <div>
              <label className="block text-[#aaa] text-xs font-medium mb-1.5">Endpoint URL</label>
              <input
                type="text"
                value={settings.ollama_endpoint}
                onChange={e => update('ollama_endpoint', e.target.value)}
                placeholder="http://192.168.1.x:11434 or https://your-tunnel.ngrok.io"
                className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6] placeholder-[#333]"
              />
              <p className="text-[#444] text-[10px] mt-1">
                Use direct IP if on the same network, or a tunnel URL (ngrok, Cloudflare Tunnel, Tailscale) for remote access.
              </p>
            </div>

            <div className="flex gap-3">
              <button
                onClick={handleTestConnection}
                disabled={testing || !settings.ollama_endpoint}
                className="bg-[#1e2a3a] hover:bg-[#253347] disabled:opacity-40 text-white text-sm px-4 py-2 rounded-lg transition-colors"
              >
                {testing ? 'Testing...' : 'Test Connection'}
              </button>
              {connectionResult && (
                <div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm ${
                  connectionResult.online
                    ? 'bg-green-900/30 border border-green-700/40 text-green-400' :'bg-red-900/30 border border-red-700/40 text-red-400'
                }`}>
                  <div className={`w-2 h-2 rounded-full ${connectionResult.online ? 'bg-green-500' : 'bg-red-500'}`} />
                  {connectionResult.online
                    ? `Connected — ${connectionResult.latencyMs}ms — ${connectionResult.models.length} model(s)`
                    : 'Unreachable'}
                </div>
              )}
            </div>

            {connectionResult?.models && connectionResult.models.length > 0 && (
              <div className="space-y-3">
                <div>
                  <label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Model (Stories)</label>
                  <select
                    value={settings.ollama_model_default}
                    onChange={e => update('ollama_model_default', e.target.value)}
                    className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
                  >
                    <option value="">Auto (largest available)</option>
                    {connectionResult.models.map(m => <option key={m} value={m}>{m}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Model (Translation)</label>
                  <select
                    value={settings.ollama_model_translation}
                    onChange={e => update('ollama_model_translation', e.target.value)}
                    className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
                  >
                    <option value="">Same as default</option>
                    {connectionResult.models.map(m => <option key={m} value={m}>{m}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Model (Background Tasks)</label>
                  <select
                    value={settings.ollama_model_background}
                    onChange={e => update('ollama_model_background', e.target.value)}
                    className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
                  >
                    <option value="">Same as default</option>
                    {connectionResult.models.map(m => <option key={m} value={m}>{m}</option>)}
                  </select>
                </div>
              </div>
            )}

            <div className="flex items-center justify-between">
              <div>
                <p className="text-[#aaa] text-xs font-medium">Auto-failover to Cloud AI</p>
                <p className="text-[#444] text-[10px]">Automatically use Anthropic when local is unavailable</p>
              </div>
              <button
                onClick={() => update('auto_failover', !settings.auto_failover)}
                className={`w-10 h-5 rounded-full transition-colors relative ${settings.auto_failover ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
              >
                <div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.auto_failover ? 'translate-x-5' : 'translate-x-0.5'}`} />
              </button>
            </div>

            <div>
              <label className="block text-[#aaa] text-xs font-medium mb-1.5">Failover Timeout (seconds)</label>
              <input
                type="number"
                value={settings.failover_timeout_seconds}
                onChange={e => update('failover_timeout_seconds', Number(e.target.value))}
                min={3} max={30}
                className="w-32 bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-[#3b82f6]"
              />
            </div>
          </div>
        </section>

        {/* Cloud AI */}
        <section className="bg-[#111827] border border-[#1e2a3a] rounded-xl p-6">
          <h2 className="text-white font-bold text-base mb-1">Cloud AI (Anthropic Failover)</h2>
          <p className="text-[#555] text-xs mb-5">Used when local Ollama is unavailable.</p>
          <div className="space-y-3">
            <div className="flex items-center justify-between py-2 border-b border-[#1e2a3a]">
              <span className="text-[#aaa] text-sm">Model</span>
              <span className="text-white text-sm font-mono">claude-sonnet-4-20250514</span>
            </div>
            <div className="flex items-center justify-between py-2 border-b border-[#1e2a3a]">
              <span className="text-[#aaa] text-sm">Fallback Model</span>
              <span className="text-[#555] text-sm font-mono">claude-3-5-sonnet-20241022</span>
            </div>
            <div className="flex items-center justify-between py-2">
              <span className="text-[#aaa] text-sm">API Key Status</span>
              <span className={`text-sm font-medium ${process.env.NEXT_PUBLIC_SITE_URL ? 'text-green-400' : 'text-red-400'}`}>
                {/* Key status shown via ping */}
                <span className="text-green-400">Configured</span>
              </span>
            </div>
          </div>
        </section>

        {/* Console Preferences */}
        <section className="bg-[#111827] border border-[#1e2a3a] rounded-xl p-6">
          <h2 className="text-white font-bold text-base mb-5">AI Console Preferences</h2>
          <div className="space-y-4">
            <div>
              <label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Site</label>
              <select
                value={settings.default_site_id}
                onChange={e => update('default_site_id', Number(e.target.value))}
                className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
              >
                <option value={1}>AV Beat</option>
                <option value={2}>AV Beat</option>
              </select>
            </div>
            <div>
              <label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Pen Name (AV Beat)</label>
              <select
                value={settings.default_pen_name_bb}
                onChange={e => update('default_pen_name_bb', e.target.value)}
                className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
              >
                {BB_PEN_NAMES.map(n => <option key={n} value={n}>{n}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-[#aaa] text-xs font-medium mb-1.5">Default Pen Name (AV Beat)</label>
              <select
                value={settings.default_pen_name_av}
                onChange={e => update('default_pen_name_av', e.target.value)}
                className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
              >
                {AV_PEN_NAMES.map(n => <option key={n} value={n}>{n}</option>)}
              </select>
            </div>

            <div className="flex items-center justify-between">
              <div>
                <p className="text-[#aaa] text-xs font-medium">Save Session History</p>
                <p className="text-[#444] text-[10px]">Store last 20 sessions</p>
              </div>
              <button
                onClick={() => update('save_session_history', !settings.save_session_history)}
                className={`w-10 h-5 rounded-full transition-colors relative ${settings.save_session_history ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
              >
                <div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.save_session_history ? 'translate-x-5' : 'translate-x-0.5'}`} />
              </button>
            </div>

            <div>
              <label className="block text-[#aaa] text-xs font-medium mb-1.5">History Retention</label>
              <select
                value={settings.history_retention_days}
                onChange={e => update('history_retention_days', Number(e.target.value))}
                className="w-full bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2.5 focus:outline-none focus:border-[#3b82f6]"
              >
                <option value={30}>30 days</option>
                <option value={60}>60 days</option>
                <option value={90}>90 days</option>
              </select>
            </div>

            <div className="flex items-center justify-between">
              <div>
                <p className="text-[#aaa] text-xs font-medium">Streaming Responses</p>
                <p className="text-[#444] text-[10px]">Text appears as it generates</p>
              </div>
              <button
                onClick={() => update('streaming_enabled', !settings.streaming_enabled)}
                className={`w-10 h-5 rounded-full transition-colors relative ${settings.streaming_enabled ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
              >
                <div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.streaming_enabled ? 'translate-x-5' : 'translate-x-0.5'}`} />
              </button>
            </div>
          </div>
        </section>

        {/* Background Tasks */}
        <section className="bg-[#111827] border border-[#1e2a3a] rounded-xl p-6">
          <h2 className="text-white font-bold text-base mb-5">Background AI Tasks</h2>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-[#aaa] text-xs font-medium">Route Background Tasks to Local AI</p>
                <p className="text-[#444] text-[10px]">Story generation, translation, classification</p>
              </div>
              <button
                onClick={() => update('background_use_local', !settings.background_use_local)}
                className={`w-10 h-5 rounded-full transition-colors relative ${settings.background_use_local ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
              >
                <div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.background_use_local ? 'translate-x-5' : 'translate-x-0.5'}`} />
              </button>
            </div>

            <div>
              <label className="block text-[#aaa] text-xs font-medium mb-1.5">Background Task Timeout (seconds)</label>
              <input
                type="number"
                value={settings.background_timeout_seconds}
                onChange={e => update('background_timeout_seconds', Number(e.target.value))}
                min={30} max={300}
                className="w-32 bg-[#0d1117] border border-[#2a3a50] text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:border-[#3b82f6]"
              />
            </div>

            <div className="flex items-center justify-between">
              <div>
                <p className="text-[#aaa] text-xs font-medium">Priority Queue</p>
                <p className="text-[#444] text-[10px]">Interactive requests take priority over background tasks</p>
              </div>
              <button
                onClick={() => update('priority_queue_enabled', !settings.priority_queue_enabled)}
                className={`w-10 h-5 rounded-full transition-colors relative ${settings.priority_queue_enabled ? 'bg-[#3b82f6]' : 'bg-[#2a3a50]'}`}
              >
                <div className={`w-4 h-4 bg-white rounded-full absolute top-0.5 transition-transform ${settings.priority_queue_enabled ? 'translate-x-5' : 'translate-x-0.5'}`} />
              </button>
            </div>

            <div className="bg-[#0d1117] border border-[#1e2a3a] rounded-lg p-4">
              <p className="text-[#555] text-xs font-semibold mb-2 uppercase tracking-wide">Priority Queue Order</p>
              <ol className="space-y-1">
                {[
                  'Interactive AI Console requests (admin typing)',
                  'Breaking news story generation',
                  'Show coverage auto-stories during show week',
                  'Standard background auto-stories',
                  'Translation backfill',
                  'Classification and extraction tasks',
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-2 text-xs text-[#555]">
                    <span className="w-4 h-4 rounded-full bg-[#1e2a3a] text-[#3b82f6] text-[10px] flex items-center justify-center font-bold flex-shrink-0">{i + 1}</span>
                    {item}
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </section>
      </div>

      {toast && (
        <div className={`fixed bottom-6 right-6 px-4 py-3 rounded-lg text-sm font-medium shadow-lg z-50 ${
          toast.type === 'error' ? 'bg-red-900 text-red-200 border border-red-700' : 'bg-green-900 text-green-200 border border-green-700'
        }`}>
          {toast.message}
        </div>
      )}
    </div>
  );
}