'use client';

import { useState, useEffect, useCallback } from 'react';
import { useAuth } from '@/context/AuthContext';
import { storage, db, requestNotificationPermission, onMessageListener } from '@/lib/firebase';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { doc, getDoc, updateDoc } from 'firebase/firestore';
import { useTheme } from 'next-themes';
import Image from 'next/image';

interface UserProfile {
  avatarUrl?: string;
  theme?: string;
  categories?: string[];
  notificationsEnabled?: boolean;
  fcmToken?: string;
}

export default function Profile() {
  const { user } = useAuth();
  const { theme, setTheme } = useTheme();
  const [profile, setProfile] = useState<UserProfile>({});
  const [uploading, setUploading] = useState(false);
  const [newCategory, setNewCategory] = useState('');
  const [notificationsEnabled, setNotificationsEnabled] = useState(false);

  const loadProfile = useCallback(async () => {
    if (!user) return;
    try {
      const docRef = doc(db, 'users', user.uid);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        setProfile(docSnap.data() as UserProfile);
        setNotificationsEnabled(docSnap.data().notificationsEnabled ?? false);
      }
    } catch (error) {
      console.error('Error loading profile:', error);
    }
  }, [user]);

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

  // Listen for FCM messages
  useEffect(() => {
    if (notificationsEnabled) {
      onMessageListener().then((payload: any) => {
        console.log('Message received:', payload);
        // Handle incoming messages (e.g., show notification)
        new Notification(payload.notification.title, {
          body: payload.notification.body,
          icon: '/icon-192x192.png'
        });
      }).catch(err => console.log('Failed to listen for messages:', err));
    }
  }, [notificationsEnabled]);

  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !user) return;

    setUploading(true);
    try {
      const storageRef = ref(storage, `avatars/${user.uid}`);
      await uploadBytes(storageRef, file);
      const url = await getDownloadURL(storageRef);
      await updateDoc(doc(db, 'users', user.uid), { avatarUrl: url });
      setProfile(prev => ({ ...prev, avatarUrl: url }));
    } catch (error) {
      console.error('Error uploading avatar:', error);
    } finally {
      setUploading(false);
    }
  };

  const handleThemeChange = async (newTheme: string) => {
    setTheme(newTheme);
    if (user) {
      await updateDoc(doc(db, 'users', user.uid), { theme: newTheme });
      setProfile(prev => ({ ...prev, theme: newTheme }));
    }
  };

  const handleNotificationToggle = async (enabled: boolean) => {
    if (!user) return;

    try {
      if (enabled) {
        const token = await requestNotificationPermission();
        if (token) {
          await updateDoc(doc(db, 'users', user.uid), { 
            notificationsEnabled: true, 
            fcmToken: token 
          });
          setProfile(prev => ({ ...prev, notificationsEnabled: true, fcmToken: token }));
          setNotificationsEnabled(true);
        } else {
          alert('Notification permission denied. Please enable notifications in your browser settings.');
        }
      } else {
        await updateDoc(doc(db, 'users', user.uid), { 
          notificationsEnabled: false, 
          fcmToken: null 
        });
        setProfile(prev => ({ ...prev, notificationsEnabled: false, fcmToken: undefined }));
        setNotificationsEnabled(false);
      }
    } catch (error) {
      console.error('Error updating notification settings:', error);
    }
  };

  const addCategory = async () => {
    if (!newCategory.trim() || !user) return;
    const updatedCategories = [...(profile.categories || []), newCategory.trim()];
    await updateDoc(doc(db, 'users', user.uid), { categories: updatedCategories });
    setProfile(prev => ({ ...prev, categories: updatedCategories }));
    setNewCategory('');
  };

  const removeCategory = async (category: string) => {
    if (!user) return;
    const updatedCategories = (profile.categories || []).filter(c => c !== category);
    await updateDoc(doc(db, 'users', user.uid), { categories: updatedCategories });
    setProfile(prev => ({ ...prev, categories: updatedCategories }));
  };

  const toggleNotifications = async () => {
    if (!user) return;
    const newStatus = !notificationsEnabled;
    setNotificationsEnabled(newStatus);
    await updateDoc(doc(db, 'users', user.uid), { notificationsEnabled: newStatus });
    if (newStatus) {
      requestNotificationPermission();
    }
  };

  return (
    <div className="max-w-2xl mx-auto p-6 space-y-8">
      <div className="text-center">
        <h1 className="text-3xl font-bold text-white mb-2">Profile Settings</h1>
        <p className="text-gray-400">Manage your account and preferences</p>
      </div>

      {/* Avatar Section */}
      <div className="bg-gray-800 p-6 rounded-lg shadow-lg">
        <h2 className="text-xl font-semibold mb-4 text-white">Profile Picture</h2>
        <div className="flex items-center space-x-4">
          {profile.avatarUrl ? (
            <Image src={profile.avatarUrl} alt="Avatar" width={80} height={80} className="w-20 h-20 rounded-full border-2 border-gray-600" />
          ) : (
            <div className="w-20 h-20 rounded-full bg-gray-600 flex items-center justify-center text-gray-400">No Image</div>
          )}
          <div className="flex-1">
            <input
              type="file"
              accept="image/*"
              onChange={handleAvatarUpload}
              disabled={uploading}
              className="block w-full text-sm text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 disabled:opacity-50"
            />
            {uploading && <p className="text-sm text-blue-400 mt-2">Uploading...</p>}
          </div>
        </div>
      </div>

      {/* Theme Section */}
      <div className="bg-gray-800 p-6 rounded-lg shadow-lg">
        <h2 className="text-xl font-semibold mb-4 text-white">Appearance</h2>
        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">Theme</label>
          <select
            value={theme}
            onChange={(e) => handleThemeChange(e.target.value)}
            className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            <option value="dark">Dark</option>
            <option value="light">Light</option>
            <option value="system">System</option>
          </select>
        </div>
      </div>

      {/* Notifications Section */}
      <div className="bg-gray-800 p-6 rounded-lg shadow-lg">
        <h2 className="text-xl font-semibold mb-4 text-white">Notifications</h2>
        <div className="space-y-3">
          <div className="flex items-center">
            <input
              type="checkbox"
              checked={notificationsEnabled}
              onChange={(e) => handleNotificationToggle(e.target.checked)}
              className="w-5 h-5 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
            />
            <label className="ml-3 text-sm font-medium text-gray-300">
              Enable push notifications for prayer reminders
            </label>
          </div>
          <p className="text-sm text-gray-400">
            Get notified about your prayer schedule and when prayers are answered.
          </p>
        </div>
      </div>

      {/* Categories Section */}
      <div className="bg-gray-800 p-6 rounded-lg shadow-lg">
        <h2 className="text-xl font-semibold mb-4 text-white">Prayer Categories</h2>
        <div className="space-y-4">
          <div className="flex space-x-2">
            <input
              type="text"
              value={newCategory}
              onChange={(e) => setNewCategory(e.target.value)}
              placeholder="Add a new category"
              className="flex-1 p-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <button
              onClick={addCategory}
              className="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors"
            >
              Add
            </button>
          </div>
          <div className="flex flex-wrap gap-2">
            {(profile.categories || []).map(category => (
              <span key={category} className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-700 text-gray-300">
                {category}
                <button
                  onClick={() => removeCategory(category)}
                  className="ml-2 text-red-400 hover:text-red-300 transition-colors"
                >
                  ×
                </button>
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}