frontend/src/components/settings/NotificationsForm.tsx

'use client';

import { useState } from 'react';

interface NotificationSetting {
  id: string;
  label: string;
  description: string;
  enabled: boolean;
}

interface NotificationsFormProps {
  onSave?: (data: {
    emailNotifications: NotificationSetting[];
    pushNotifications: NotificationSetting[];
  }) => void;
}

export function NotificationsForm({ onSave }: NotificationsFormProps) {
  const [emailNotifications, setEmailNotifications] = useState<NotificationSetting[]>([
    {
      id: 'new_leads',
      label: 'New Leads',
      description: 'Get notified when you receive new leads',
      enabled: true,
    },
    {
      id: 'messages',
      label: 'Messages',
      description: 'Get notified when you receive new messages',
      enabled: true,
    },
    {
      id: 'connection_requests',
      label: 'Connection Requests',
      description: 'Get notified about new connection requests',
      enabled: true,
    },
    {
      id: 'property_updates',
      label: 'Property Updates',
      description: 'Get notified about property status changes',
      enabled: false,
    },
    {
      id: 'marketing',
      label: 'Marketing & Promotions',
      description: 'Receive marketing emails and promotions',
      enabled: false,
    },
  ]);

  const [pushNotifications, setPushNotifications] = useState<NotificationSetting[]>([
    {
      id: 'push_messages',
      label: 'Messages',
      description: 'Push notifications for new messages',
      enabled: true,
    },
    {
      id: 'push_leads',
      label: 'New Leads',
      description: 'Push notifications for new leads',
      enabled: true,
    },
    {
      id: 'push_reminders',
      label: 'Reminders',
      description: 'Push notifications for scheduled reminders',
      enabled: false,
    },
  ]);

  const toggleEmailNotification = (id: string) => {
    setEmailNotifications((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, enabled: !item.enabled } : item
      )
    );
  };

  const togglePushNotification = (id: string) => {
    setPushNotifications((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, enabled: !item.enabled } : item
      )
    );
  };

  const handleSave = () => {
    if (onSave) {
      onSave({ emailNotifications, pushNotifications });
    } else {
      console.log('Saving notification settings:', {
        emailNotifications,
        pushNotifications,
      });
    }
  };

  const ToggleSwitch = ({
    enabled,
    onToggle,
  }: {
    enabled: boolean;
    onToggle: () => void;
  }) => (
    <button
      onClick={onToggle}
      className={`relative w-[44px] h-[24px] rounded-full transition-colors cursor-pointer ${
        enabled ? 'bg-[#e58625]' : 'bg-[#00293D]/20'
      }`}
    >
      <div
        className={`absolute top-[2px] w-[20px] h-[20px] rounded-full bg-white shadow transition-transform ${
          enabled ? 'translate-x-[22px]' : 'translate-x-[2px]'
        }`}
      />
    </button>
  );

  return (
    <>
      {/* Email Notifications */}
      <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
        <div className="mb-6">
          <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
            Email Notifications
          </h2>
          <p className="font-serif text-[12px] text-[#00293D]/60">
            Manage your email notification preferences
          </p>
        </div>

        <div className="space-y-4">
          {emailNotifications.map((item) => (
            <div
              key={item.id}
              className="flex items-center justify-between py-3 border-b border-[#00293d]/10 last:border-0"
            >
              <div>
                <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
                  {item.label}
                </h3>
                <p className="font-serif text-[12px] text-[#00293D]/60">
                  {item.description}
                </p>
              </div>
              <ToggleSwitch
                enabled={item.enabled}
                onToggle={() => toggleEmailNotification(item.id)}
              />
            </div>
          ))}
        </div>
      </div>

      {/* Push Notifications */}
      <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mb-4">
        <div className="mb-6">
          <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
            Push Notifications
          </h2>
          <p className="font-serif text-[12px] text-[#00293D]/60">
            Manage your push notification preferences
          </p>
        </div>

        <div className="space-y-4">
          {pushNotifications.map((item) => (
            <div
              key={item.id}
              className="flex items-center justify-between py-3 border-b border-[#00293d]/10 last:border-0"
            >
              <div>
                <h3 className="font-serif font-medium text-[14px] text-[#00293D]">
                  {item.label}
                </h3>
                <p className="font-serif text-[12px] text-[#00293D]/60">
                  {item.description}
                </p>
              </div>
              <ToggleSwitch
                enabled={item.enabled}
                onToggle={() => togglePushNotification(item.id)}
              />
            </div>
          ))}
        </div>
      </div>

      {/* Save Button */}
      <div className="flex justify-end">
        <button
          onClick={handleSave}
          className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
        >
          Save Changes
        </button>
      </div>
    </>
  );
}