holacompi/app/dashboard/notifications/page.tsx

'use client';

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

const formatTimestamp = (value: any) => {
  if (!value) return '';
  if (typeof value === 'string') return new Date(value).toLocaleString();
  if (value?.seconds) return new Date(value.seconds * 1000).toLocaleString();
  return value.toString();
};

const getFallbackSettings = (userId: string): NotificationSettings => ({
  userId,
  notifyOnSuccess: true,
  notifyOnFailure: true,
  emailSummary: false,
  autoAddToCalendar: false,
  googleCalendarConnected: false,
  iCloudCalendarConnected: false,
  createdAt: null as unknown as NotificationSettings['createdAt'],
  updatedAt: null as unknown as NotificationSettings['updatedAt'],
});

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

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

  const fetchSettings = async () => {
    try {
      const response = await fetch('/api/notifications');
      if (!response.ok) {
        toast.error('Unable to load notification 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 notification settings.');
      setSettings(getFallbackSettings(user?.uid ?? 'test-user-id'));
    }
  };

  const fetchAppointments = async () => {
    try {
      const response = await fetch('/api/appointments');
      if (!response.ok) {
        throw new Error('Failed to load appointments');
      }
      const data = await response.json();
      setAppointments(data.appointments || []);
    } catch (error) {
      console.error('Error loading appointments', error);
      toast.error('Unable to load appointments.');
    }
  };

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

  const toggleSetting = (key: 'notifyOnSuccess' | 'notifyOnFailure' | 'emailSummary') => {
    if (!settings) return;
    setSettings({ ...settings, [key]: !settings[key] });
  };

  const handleSave = async () => {
    if (!settings || isSaving) return;
    setIsSaving(true);
    try {
      const payload = {
        notifyOnSuccess: settings.notifyOnSuccess,
        notifyOnFailure: settings.notifyOnFailure,
        emailSummary: settings.emailSummary,
        autoAddToCalendar: settings.autoAddToCalendar,
        googleCalendarConnected: settings.googleCalendarConnected,
        iCloudCalendarConnected: settings.iCloudCalendarConnected,
      };
      const response = await fetch('/api/notifications', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!response.ok) throw new Error('Failed');
      await fetchSettings();
      toast.success('Notification settings saved.');
    } catch (error) {
      console.error('Error saving settings', error);
      toast.error('Unable to save 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 pb-24">
      <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">Notifications & Calendar</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>

        <section className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 space-y-4 shadow-lg">
          <h2 className="text-sm uppercase text-[#9ca3af]">Preferences</h2>
          {[
            { key: 'notifyOnSuccess', label: 'Successful booking' },
            { key: 'notifyOnFailure', label: 'Call failure' },
            { key: 'emailSummary', label: 'Email summary' },
          ].map((item) => (
            <div key={item.key} className="flex items-center justify-between">
              <p className="text-sm">{item.label}</p>
              <button
                type="button"
                onClick={() => toggleSetting(item.key as keyof NotificationSettings)}
                className={`h-6 w-12 rounded-full transition flex items-center ${
                  settings[item.key as keyof NotificationSettings]
                    ? 'bg-[#8b5cf6]'
                    : 'bg-white/10'
                }`}
              >
                <span
                  className={`h-5 w-5 rounded-full bg-white shadow transform transition ${
                    settings[item.key as keyof NotificationSettings]
                      ? 'translate-x-6'
                      : 'translate-x-1'
                  }`}
                />
              </button>
            </div>
          ))}
        </section>

        <section className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 space-y-4 shadow-lg">
          <h2 className="text-sm uppercase text-[#9ca3af]">Integrations</h2>
          <button className="w-full rounded-2xl bg-[#8b5cf6] text-white py-3 font-semibold shadow-2xl hover:bg-[#7c3aed] transition">
            Connect Google Calendar
          </button>
          <button className="w-full rounded-2xl bg-[#8b5cf6] text-white py-3 font-semibold shadow-2xl hover:bg-[#7c3aed] transition">
            Connect iCloud Calendar
          </button>
        </section>

        <section className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 space-y-4 shadow-lg">
          <div className="flex items-center justify-between">
            <h2 className="text-sm uppercase text-[#9ca3af]">Upcoming</h2>
            <button className="text-xs text-[#9ca3af] hover:text-white">
              View All
            </button>
          </div>
          <div className="space-y-3">
            {appointments.length === 0 && (
              <div className="rounded-2xl border border-purple-500/20 bg-white/5 p-4 text-sm text-[#9ca3af]">
                No upcoming appointments yet.
              </div>
            )}
            {appointments.map((appointment) => (
              <div
                key={appointment.id}
                className="rounded-2xl border border-purple-500/20 bg-[#1a1625] p-4 flex items-center justify-between"
              >
                <div>
                  <p className="text-xs text-[#9ca3af]">
                    {formatTimestamp(appointment.dateTime)}
                  </p>
                  <p className="text-sm font-semibold">{appointment.title}</p>
                  {appointment.location && (
                    <p className="text-xs text-[#9ca3af] mt-1">{appointment.location}</p>
                  )}
                </div>
                <span
                  className={`text-xs px-3 py-1 rounded-full border ${
                    appointment.calendarEventId
                      ? 'bg-blue-500/20 text-blue-200 border-blue-400/30'
                      : 'bg-emerald-500/20 text-emerald-200 border-emerald-400/30'
                  }`}
                >
                  {appointment.calendarEventId ? 'GOOGLE' : 'ICLOUD'}
                </span>
              </div>
            ))}
          </div>
        </section>
      </div>

      <nav className="fixed bottom-0 left-0 right-0 bg-[#0f0b1a] border-t border-purple-500/20 px-6 py-3">
        <div className="max-w-4xl mx-auto flex items-center justify-between text-xs text-[#9ca3af]">
          {[
            { label: 'Home', path: '/dashboard' },
            { label: 'Assistant', path: '/dashboard/agent-settings' },
            { label: 'Schedule', path: '/dashboard/scheduled-calls' },
            { label: 'Settings', path: '/dashboard/notifications' },
          ].map((item) => (
            <button
              key={item.label}
              onClick={() => router.push(item.path)}
              className="flex flex-col items-center gap-1 text-[#9ca3af] hover:text-white"
            >
              <span className="text-base">●</span>
              {item.label.toUpperCase()}
            </button>
          ))}
        </div>
      </nav>
    </div>
  );
}