please mkae the setting ocmpeint wokring and best like it should wrok saving and all cases after saving wait for server resopnie if succes go to /home and make it good 
"""
import api from './api';
import { User, AnalyticsData } from '../types/api.types';
import { authService } from './auth.service';

interface UpdateSettingsPayload {
  listOfUrls: string[];
  timePeriod: User['timePeriod'];
  emailSend: boolean;
}

interface UpdateSettingsResponse {
  message: string;
  user: User;
}

interface MonitoringResponse {
  message: string;
}

export const userService = {
  getSettings: async (): Promise<User> => {
    const token = authService.getToken();

    if (!token) {
      authService.logout();
      throw new Error('No token found');
    }

    try {
      const response: any = await api.get('/user/settings', {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.data;
    } catch (error: any) {
      if (error.response && (error.response.status === 403 || error.response.status === 401)) {
        authService.logout();
      }
      throw error;
    }
  },

  updateSettings: async (payload: UpdateSettingsPayload): Promise<UpdateSettingsResponse> => {
    const token = authService.getToken();

    if (!token) {
      authService.logout();
      throw new Error('No token found');
    }

    try {
      const response: any = await api.put('/user/settings', payload, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.data;
    } catch (error: any) {
      if (error.response && (error.response.status === 403 || error.response.status === 401)) {
        authService.logout();
      }
      throw error;
    }
  },

  startMonitoring: async (): Promise<MonitoringResponse> => {
    const token = authService.getToken();

    if (!token) {
      authService.logout();
      throw new Error('No token found');
    }

    try {
      const response: any = await api.post('/user/monitor/start', null, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.data;
    } catch (error: any) {
      if (error.response && (error.response.status === 403 || error.response.status === 401)) {
        authService.logout();
      }
      throw error;
    }
  },

  stopMonitoring: async (): Promise<MonitoringResponse> => {
    const token = authService.getToken();

    if (!token) {
      authService.logout();
      throw new Error('No token found');
    }

    try {
      const response: any = await api.post('/user/monitor/stop', null, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.data;
    } catch (error: any) {
      if (error.response && (error.response.status === 403 || error.response.status === 401)) {
        authService.logout();
      }
      throw error;
    }
  },
};
"""
"""
'use client'

import { useState, useEffect, useCallback } from 'react'
import { z } from 'zod'
import { motion, AnimatePresence } from 'framer-motion'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "../hooks/use-toast"
import { AlertCircle, CheckCircle2, Trash2, Plus, Save, RefreshCw, Settings2, Mail, Globe, Clock, Bell } from 'lucide-react'
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { userService } from '../app/services/user.service'
import { User, userSchema } from '../app/types/api.types'

const DEBOUNCE_DELAY = 500 // ms

export default function SettingsPage() {
  // State Management
  const [user, setUser] = useState<User | null>(null)
  const [isMonitoring, setIsMonitoring] = useState<boolean>(false)
  const [monitoringStatus, setMonitoringStatus] = useState<string>('')
  const [errors, setErrors] = useState<Partial<Record<keyof User, string>>>({})
  const [isSaving, setIsSaving] = useState<boolean>(false)
  const [showResetDialog, setShowResetDialog] = useState<boolean>(false)
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false)
  const { toast } = useToast()

  // Initial Data Fetching
  useEffect(() => {
    const fetchSettings = async () => {
      try {
        setIsLoading(true)
        const userData = await userService.getSettings()
        setUser(userData)
        setIsMonitoring(userData.verified)
        setHasUnsavedChanges(false)
      } catch (error: any) {
        console.error('Error fetching settings:', error)
        toast({
          title: "Error Loading Settings",
          description: error.message || "Failed to load settings. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

    fetchSettings()
  }, [toast])

  // Form Validation
  const validateForm = useCallback((): boolean => {
    try {
      if (user) {
        userSchema.parse(user)
        setErrors({})
        return true
      }
      return false
    } catch (error) {
      if (error instanceof z.ZodError) {
        const newErrors: Partial<Record<keyof User, string>> = {}
        error.errors.forEach((err) => {
          if (err.path[0]) {
            newErrors[err.path[0] as keyof User] = err.message
          }
        })
        setErrors(newErrors)
      }
      return false
    }
  }, [user])

  // Unsaved Changes Warning
  useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      if (hasUnsavedChanges) {
        e.preventDefault()
        e.returnValue = ''
      }
    }

    window.addEventListener('beforeunload', handleBeforeUnload)
    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
  }, [hasUnsavedChanges])

  // Settings Update Handler
  const handleUpdateSettings = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!user) return
    if (!validateForm()) {
      toast({
        title: "Validation Error",
        description: "Please check the form for errors.",
        variant: "destructive",
      })
      return
    }

    setIsSaving(true)
    try {
      const payload = {
        listOfUrls: user.listOfUrls,
        timePeriod: user.timePeriod,
        emailSend: user.emailSend,
      }
      const data = await userService.updateSettings(payload)
      setUser(data.user)
      setHasUnsavedChanges(false)
      toast({
        title: "Settings Updated",
        description: data.message,
      })
    } catch (error: any) {
      console.error('Error updating settings:', error)
      toast({
        title: "Update Failed",
        description: error.message || 'Failed to update settings. Please try again.',
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

  // Monitoring Toggle Handler
  const handleMonitoringToggle = async () => {
    if (!user) return
    try {
      setMonitoringStatus('Updating monitoring status...')
      if (isMonitoring) {
        await userService.stopMonitoring()
        setIsMonitoring(false)
        toast({
          title: "Monitoring Stopped",
          description: "Website monitoring has been deactivated.",
        })
      } else {
        await userService.startMonitoring()
        setIsMonitoring(true)
        toast({
          title: "Monitoring Started",
          description: "Website monitoring has been activated.",
        })
      }
    } catch (error: any) {
      console.error('Error toggling monitoring:', error)
      toast({
        title: "Error",
        description: error.message || "Failed to update monitoring status",
        variant: "destructive",
      })
      // Revert the monitoring state on error
      setIsMonitoring(!isMonitoring)
    } finally {
      setMonitoringStatus('')
    }
  }

  // URL Management Handlers
  const handleUrlChange = useCallback((index: number, value: string) => {
    if (!user) return
    const newUrls = [...user.listOfUrls]
    newUrls[index] = value
    setUser({ ...user, listOfUrls: newUrls })
    setHasUnsavedChanges(true)
  }, [user])

  const addUrl = useCallback(() => {
    if (!user) return
    setUser({ ...user, listOfUrls: [...user.listOfUrls, ''] })
    setHasUnsavedChanges(true)
  }, [user])

  const removeUrl = useCallback((index: number) => {
    if (!user) return
    const newUrls = user.listOfUrls.filter((_, i) => i !== index)
    setUser({ ...user, listOfUrls: newUrls })
    setHasUnsavedChanges(true)
  }, [user])

  // Reset Settings Handler
  const resetSettings = useCallback(() => {
    if (!user?.id) return
    setUser({
      id: user.id,
      username: user.username,
      email: user.email,
      listOfUrls: [],
      timePeriod: '5m',
      emailSend: false,
      verified: false,
    })
    setShowResetDialog(false)
    setHasUnsavedChanges(true)
    toast({
      title: "Settings Reset",
      description: "All settings have been reset to default values. Don't forget to save your changes.",
    })
  }, [user, toast])

  // Loading State
  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-screen">
        <Progress className="w-1/2" />
      </div>
    )
  }

  // Error State
  if (!user) {
    return (
      <div className="flex flex-col items-center justify-center h-screen">
        <AlertCircle className="h-12 w-12 text-destructive mb-4" />
        <h2 className="text-2xl font-bold mb-2">Failed to Load Settings</h2>
        <p className="text-muted-foreground mb-4">Please refresh the page to try again.</p>
        <Button onClick={() => window.location.reload()}>
          <RefreshCw className="mr-2 h-4 w-4" />
          Refresh Page
        </Button>
      </div>
    )
  }

  return (
    <TooltipProvider>
      <div className="container mx-auto py-8 px-4 md:px-0 max-w-4xl">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="flex items-center justify-between mb-8"
        >
          <h1 className="text-4xl font-bold">Account Settings</h1>
          <Settings2 className="h-8 w-8 text-primary" />
        </motion.div>

        <Tabs defaultValue="monitoring" className="space-y-8">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="monitoring">Monitoring</TabsTrigger>
            <TabsTrigger value="account">Account</TabsTrigger>
            <TabsTrigger value="notifications">Notifications</TabsTrigger>
          </TabsList>

          <form onSubmit={handleUpdateSettings}>
            <TabsContent value="monitoring" className="space-y-8">
              <Card>
                <CardHeader className="bg-gradient-to-r from-primary to-primary-foreground text-primary-foreground">
                  <CardTitle className="text-2xl flex items-center">
                    <Globe className="mr-2" /> Monitoring Settings
                  </CardTitle>
                  <CardDescription className="text-primary-foreground/90">
                    Configure your website monitoring preferences.
                  </CardDescription>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="space-y-6">
                    <div>
                      <Label htmlFor="timePeriod" className="text-lg font-semibold mb-2 block">
                        Check Interval
                      </Label>
                      <Select
                        value={user.timePeriod}
                        onValueChange={(value: string) => {
                          setUser(prev => prev ? { ...prev, timePeriod: value as User['timePeriod'] } : prev)
                          setHasUnsavedChanges(true)
                        }}
                      >
                        <SelectTrigger id="timePeriod" className="w-full">
                          <SelectValue placeholder="Select interval" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="30s">Every 30 seconds</SelectItem>
                          <SelectItem value="1m">Every 1 minute</SelectItem>
                          <SelectItem value="3m">Every 3 minutes</SelectItem>
                          <SelectItem value="5m">Every 5 minutes</SelectItem>
                          <SelectItem value="10m">Every 10 minutes</SelectItem>
                          <SelectItem value="1h">Every 1 hour</SelectItem>
                        </SelectContent>
                      </Select>
                      {errors.timePeriod && (
                        <p className="text-destructive text-sm mt-1">{errors.timePeriod}</p>
                      )}
                    </div>

                    <div>
                      <Label className="text-lg font-semibold mb-2 block">URLs to Monitor</Label>
                      <AnimatePresence>
                        {user.listOfUrls.map((url, index) => (
                          <motion.div
                            key={index}
                            initial={{ opacity: 0, height: 0 }}
                            animate={{ opacity: 1, height: 'auto' }}
                            exit={{ opacity: 0, height: 0 }}
                            transition={{ duration: 0.2 }}
                            className="flex items-center space-x-2 mb-2"
                          >
                            <Input
                              value={url}
                              onChange={(e) => handleUrlChange(index, e.target.value)}
                              placeholder="https://example.com"
                              className={errors.listOfUrls ? 'border-destructive' : ''}
                            />
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <Button
                                  type="button"
                                  variant="destructive"
                                  size="icon"
                                  onClick={() => removeUrl(index)}
                                  disabled={user.listOfUrls.length === 1}
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </TooltipTrigger>
                              <TooltipContent>
                                {user.listOfUrls.length === 1 
                                  ? "At least one URL is required" 
                                  : "Remove URL"
                                }
                              </TooltipContent>
                            </Tooltip>
                          </motion.div>
                        ))}
                      </AnimatePresence>
                      {errors.listOfUrls && (
                        <p className="text-destructive text-sm mt-1">{errors.listOfUrls}</p>
                      )}
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={addUrl}
                        className="mt-2"
                      >
                        <Plus className="mr-2 h-4 w-4" />
                        Add URL
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-2xl flex items-center">
                    <Clock className="mr-2" /> Monitoring Status
                  </CardTitle>
                  <CardDescription>Manage your website monitoring status.</CardDescription>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <Switch
                        id="monitoring-toggle"
                        checked={isMonitoring}
                        onCheckedChange={handleMonitoringToggle}
                        disabled={user.listOfUrls.length === 0}
                      />
                      <Label htmlFor="monitoring-toggle" className="text-lg select-none">
                        {isMonitoring ? 'Monitoring is Active' : 'Monitoring is Inactive'}
                      </Label>
                    </div>
                    {isMonitoring ? (
                      <CheckCircle2 className="h-6 w-6 text-green-500" />
                    ) : (
                      <AlertCircle className="h-6 w-6 text-yellow-500" />
                    )}
                  </div>
                  {monitoringStatus && (
                    <p className="text-blue-500 text-sm mt-2">{monitoringStatus}</p>
                  )}
                  {user.listOfUrls.length === 0 && (<p className="text-destructive text-sm mt-2">
                      Add at least one URL to enable monitoring
                    </p>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="account" className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle className="text-2xl flex items-center">
                    <Mail className="mr-2" /> Account Information
                  </CardTitle>
                  <CardDescription>Manage your account details.</CardDescription>
                </CardHeader>
                <CardContent className="p-6 space-y-4">
                  <div>
                    <Label className="text-lg font-semibold mb-2 block">Username</Label>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Input
                          value={user?.username}
                          disabled
                          className="bg-muted cursor-not-allowed"
                        />
                      </TooltipTrigger>
                      <TooltipContent>
                        Username cannot be changed
                      </TooltipContent>
                    </Tooltip>
                  </div>

                  <div>
                    <Label className="text-lg font-semibold mb-2 block">Email</Label>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Input
                          value={user?.email}
                          disabled
                          className="bg-muted cursor-not-allowed"
                        />
                      </TooltipTrigger>
                      <TooltipContent>
                        Contact support to change email
                      </TooltipContent>
                    </Tooltip>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="notifications" className="space-y-8">
              <Card>
                <CardHeader>
                  <CardTitle className="text-2xl flex items-center">
                    <Bell className="mr-2" /> Notification Preferences
                  </CardTitle>
                  <CardDescription>Manage how you receive notifications.</CardDescription>
                </CardHeader>
                <CardContent className="p-6">
                  <div className="flex items-center space-x-4">
                    <Switch
                      id="email-notifications"
                      checked={user?.emailSend || false}
                      onCheckedChange={(checked) => {
                        setUser(prev => prev ? { ...prev, emailSend: checked } : prev)
                        setHasUnsavedChanges(true)
                      }}
                    />
                    <Label htmlFor="email-notifications" className="text-lg select-none">
                      Receive email notifications
                    </Label>
                  </div>
                  {errors.emailSend && (
                    <p className="text-destructive text-sm mt-1">{errors.emailSend}</p>
                  )}
                  <p className="text-sm text-muted-foreground mt-2">
                    You will receive email notifications when your monitored websites experience downtime or issues.
                  </p>
                </CardContent>
              </Card>
            </TabsContent>

            <div className="flex justify-between items-center mt-8">
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => setShowResetDialog(true)}
                    className="border-destructive text-destructive hover:bg-destructive/10"
                  >
                    Reset to Defaults
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Reset all settings to default values</TooltipContent>
              </Tooltip>

              <div className="flex items-center gap-4">
                {hasUnsavedChanges && (
                  <span className="text-sm text-muted-foreground">
                    You have unsaved changes
                  </span>
                )}
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button 
                      type="submit" 
                      disabled={isSaving || !hasUnsavedChanges} 
                      className="px-8"
                    >
                      {isSaving ? (
                        <>
                          <RefreshCw className="animate-spin mr-2 h-4 w-4" />
                          Saving...
                        </>
                      ) : (
                        <>
                          <Save className="mr-2 h-4 w-4" />
                          Save Changes
                        </>
                      )}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    {!hasUnsavedChanges ? 'No changes to save' : 'Save all changes'}
                  </TooltipContent>
                </Tooltip>
              </div>
            </div>
          </form>
        </Tabs>

        <Dialog open={showResetDialog} onOpenChange={setShowResetDialog}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Are you sure you want to reset?</DialogTitle>
              <DialogDescription>
                This action will reset all your settings to their default values. This cannot be undone.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowResetDialog(false)}>
                Cancel
              </Button>
              <Button variant="destructive" onClick={resetSettings}>
                Reset
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </TooltipProvider>
  )
}
"""
each endpoint for each things ini the whole compoent everything has a use make it compelte nad perfectly wokring and best and comeplet give me whoel and coemplte