holacompi/app/dashboard/agent-settings/page.tsx

'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/contexts/AuthContext';
import type { AgentSettings } from '@/lib/types';
import toast from 'react-hot-toast';

const SECONDARY_LANGUAGES = ['Spanish', 'Catalan', 'German', 'French'];

const getFallbackSettings = (userId: string): AgentSettings => ({
  userId,
  agentName: 'HolaCompi',
  appLanguage: 'English',
  primaryCallLanguage: 'English (UK)',
  secondaryCallLanguages: [],
  tone: 'Friendly',
  agentInstructions:
    'You are HolaCompi, a helpful Spanish friend who makes phone calls on behalf of users.',
  createdAt: null as unknown as AgentSettings['createdAt'],
  updatedAt: null as unknown as AgentSettings['updatedAt'],
});

export default function AgentSettingsPage() {
  const { user, isLoading } = useAuth();
  const router = useRouter();
  const [settings, setSettings] = useState<AgentSettings | null>(null);
  const [isSaving, setIsSaving] = useState(false);

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

  const fetchSettings = async () => {
    try {
      const response = await fetch('/api/agent-settings');
      if (!response.ok) {
        toast.error('Unable to load agent settings.');
        setSettings(getFallbackSettings(user?.uid ?? 'test-user-id'));
        return;
      }
      const data = await response.json();
      setSettings(data.settings ?? getFallbackSettings(user?.uid ?? 'test-user-id'));
    } catch (error) {
      toast.error('Unable to load agent settings.');
      setSettings(getFallbackSettings(user?.uid ?? 'test-user-id'));
    }
  };

  useEffect(() => {
    if (user) {
      fetchSettings();
    }
  }, [user]);

  const updateSettings = (patch: Partial<AgentSettings>) => {
    setSettings((prev) =>
      prev
        ? {
            ...prev,
            ...patch,
            secondaryCallLanguages:
              patch.secondaryCallLanguages ?? prev.secondaryCallLanguages ?? [],
          }
        : prev
    );
  };

  const toggleSecondaryLanguage = (language: string) => {
    if (!settings) return;
    const current = settings.secondaryCallLanguages || [];
    const next = current.includes(language)
      ? current.filter((item) => item !== language)
      : [...current, language];
    updateSettings({ secondaryCallLanguages: next });
  };

  const handleSave = async () => {
    if (!settings || isSaving) return;
    setIsSaving(true);
    try {
      const payload = {
        agentName: settings.agentName,
        appLanguage: settings.appLanguage,
        primaryCallLanguage: settings.primaryCallLanguage,
        secondaryCallLanguages: settings.secondaryCallLanguages ?? [],
        tone: settings.tone,
        agentInstructions: settings.agentInstructions,
      };
      const response = await fetch('/api/agent-settings', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        throw new Error('Failed to save');
      }
      await fetchSettings();
      toast.success('Agent settings saved.');
    } catch (error) {
      console.error('Error saving agent settings', error);
      toast.error('Unable to save agent settings.');
    } finally {
      setIsSaving(false);
    }
  };

  if (isLoading || !settings) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#0f0b1a] text-white">
        <div className="animate-pulse text-lg">Loading...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#0f0b1a] text-white px-6 py-10">
      <div className="max-w-4xl mx-auto space-y-6">
        <header className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <button
              onClick={() => router.push('/dashboard')}
              className="text-[#9ca3af] hover:text-white transition"
            >
              ←
            </button>
            <h1 className="text-2xl font-semibold">Voice Agent Settings</h1>
          </div>
          <button
            onClick={handleSave}
            className="text-sm px-4 py-2 rounded-full bg-[#8b5cf6]/20 text-white border border-[#8b5cf6]/40 hover:bg-[#8b5cf6]/30 transition"
            disabled={isSaving}
          >
            {isSaving ? 'Saving...' : 'Save'}
          </button>
        </header>

        <div className="bg-[#1a1625] border border-purple-500/20 rounded-xl p-6 shadow-lg space-y-4">
          <h2 className="text-sm uppercase text-[#9ca3af] flex items-center gap-2">
            <span className="text-[#8b5cf6]">◆</span> Agent Identity
          </h2>
          <div>
            <label className="text-xs text-[#9ca3af] uppercase">Agent Name</label>
            <input
              value={settings.agentName}
              onChange={(event) => updateSettings({ agentName: event.target.value })}
              className="mt-2 w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
              placeholder="HolaCompi"
            />
          </div>
        </div>

        <div className="bg-[#1a1625] border border-purple-500/20 rounded-xl p-6 shadow-lg space-y-5">
          <h2 className="text-sm uppercase text-[#9ca3af] flex items-center gap-2">
            <span className="text-[#8b5cf6]">◆</span> Linguistics
          </h2>
          <div>
            <label className="text-xs text-[#9ca3af] uppercase">App Language</label>
            <div className="mt-2 rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm text-white/80">
              English (fixed)
            </div>
          </div>
          <div>
            <label className="text-xs text-[#9ca3af] uppercase">Primary Language</label>
            <select
              value={settings.primaryCallLanguage}
              onChange={(event) =>
                updateSettings({ primaryCallLanguage: event.target.value })
              }
              className="mt-2 w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
            >
              <option>English (UK)</option>
              <option>English (US)</option>
              <option>Spanish</option>
            </select>
          </div>
          <div>
            <label className="text-xs text-[#9ca3af] uppercase">
              Secondary Languages
            </label>
            <div className="mt-3 flex flex-wrap gap-2">
              {SECONDARY_LANGUAGES.map((language) => {
                const active = settings.secondaryCallLanguages?.includes(language);
                return (
                  <button
                    key={language}
                    type="button"
                    onClick={() => toggleSecondaryLanguage(language)}
                    className={`px-4 py-2 rounded-full border text-sm transition ${
                      active
                        ? 'bg-[#8b5cf6]/30 border-[#8b5cf6]/60 text-white'
                        : 'bg-white/5 border-white/10 text-[#9ca3af] hover:text-white'
                    }`}
                  >
                    {language}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        <div className="bg-[#1a1625] border border-purple-500/20 rounded-xl p-6 shadow-lg space-y-5">
          <h2 className="text-sm uppercase text-[#9ca3af] flex items-center gap-2">
            <span className="text-[#8b5cf6]">◆</span> Voice Persona
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {(['Professional', 'Friendly'] as const).map((tone) => {
              const active = settings.tone === tone;
              return (
                <button
                  key={tone}
                  type="button"
                  onClick={() => updateSettings({ tone })}
                  className={`flex items-center justify-between rounded-2xl border px-4 py-4 text-left transition ${
                    active
                      ? 'border-[#8b5cf6]/70 bg-[#8b5cf6]/20 text-white'
                      : 'border-white/10 bg-white/5 text-[#9ca3af] hover:text-white'
                  }`}
                >
                  <div>
                    <p className="font-semibold">{tone}</p>
                    <p className="text-xs text-[#9ca3af] mt-1">
                      {tone === 'Professional'
                        ? 'Clear, polite, and authoritative'
                        : 'Warm, friendly, and supportive'}
                    </p>
                  </div>
                  <span
                    className={`h-4 w-4 rounded-full border ${
                      active ? 'border-[#8b5cf6] bg-[#8b5cf6]' : 'border-white/20'
                    }`}
                  />
                </button>
              );
            })}
          </div>
          <div>
            <label className="text-xs text-[#9ca3af] uppercase">
              Agent Instructions
            </label>
            <textarea
              value={settings.agentInstructions}
              onChange={(event) =>
                updateSettings({ agentInstructions: event.target.value })
              }
              className="mt-2 w-full rounded-2xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-4 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6] min-h-[160px]"
            />
          </div>
        </div>
      </div>
    </div>
  );
}