<template>
  <Card>
    <CardHeader>
      <CardTitle>Notification Preferences</CardTitle>
      <CardDescription>
        Configure how you want to receive notifications
      </CardDescription>
    </CardHeader>
    <CardContent class="space-y-6">
      <div v-if="loading" class="text-center py-8">
        <p class="text-muted-foreground">Loading preferences...</p>
      </div>

      <div v-else-if="preferences" class="space-y-6">
        <!-- Email Notifications -->
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium">Email Notifications</h3>
              <p class="text-sm text-muted-foreground">Receive notifications via email</p>
            </div>
            <Switch
              :checked="preferences.email_enabled"
              @update:checked="(val) => updatePreference('email_enabled', val)"
            />
          </div>

          <div v-if="preferences.email_enabled" class="ml-6 space-y-3">
            <div class="flex items-center justify-between">
              <Label>Task assigned to me</Label>
              <Switch
                :checked="preferences.email_task_assigned"
                @update:checked="(val) => updatePreference('email_task_assigned', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Task status changes</Label>
              <Switch
                :checked="preferences.email_task_status_changed"
                @update:checked="(val) => updatePreference('email_task_status_changed', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Submission reviewed</Label>
              <Switch
                :checked="preferences.email_submission_reviewed"
                @update:checked="(val) => updatePreference('email_submission_reviewed', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Work submitted for review</Label>
              <Switch
                :checked="preferences.email_work_submitted"
                @update:checked="(val) => updatePreference('email_work_submitted', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Deadline approaching</Label>
              <Switch
                :checked="preferences.email_deadline_approaching"
                @update:checked="(val) => updatePreference('email_deadline_approaching', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Project updates</Label>
              <Switch
                :checked="preferences.email_project_update"
                @update:checked="(val) => updatePreference('email_project_update', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Comments added</Label>
              <Switch
                :checked="preferences.email_comment_added"
                @update:checked="(val) => updatePreference('email_comment_added', val)"
              />
            </div>
          </div>
        </div>

        <Separator />

        <!-- In-App Notifications -->
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium">In-App Notifications</h3>
              <p class="text-sm text-muted-foreground">Show notifications in the application</p>
            </div>
            <Switch
              :checked="preferences.inapp_enabled"
              @update:checked="(val) => updatePreference('inapp_enabled', val)"
            />
          </div>

          <div v-if="preferences.inapp_enabled" class="ml-6 space-y-3">
            <div class="flex items-center justify-between">
              <Label>Task assigned to me</Label>
              <Switch
                :checked="preferences.inapp_task_assigned"
                @update:checked="(val) => updatePreference('inapp_task_assigned', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Task status changes</Label>
              <Switch
                :checked="preferences.inapp_task_status_changed"
                @update:checked="(val) => updatePreference('inapp_task_status_changed', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Submission reviewed</Label>
              <Switch
                :checked="preferences.inapp_submission_reviewed"
                @update:checked="(val) => updatePreference('inapp_submission_reviewed', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Work submitted for review</Label>
              <Switch
                :checked="preferences.inapp_work_submitted"
                @update:checked="(val) => updatePreference('inapp_work_submitted', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Deadline approaching</Label>
              <Switch
                :checked="preferences.inapp_deadline_approaching"
                @update:checked="(val) => updatePreference('inapp_deadline_approaching', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Project updates</Label>
              <Switch
                :checked="preferences.inapp_project_update"
                @update:checked="(val) => updatePreference('inapp_project_update', val)"
              />
            </div>

            <div class="flex items-center justify-between">
              <Label>Comments added</Label>
              <Switch
                :checked="preferences.inapp_comment_added"
                @update:checked="(val) => updatePreference('inapp_comment_added', val)"
              />
            </div>
          </div>
        </div>

        <Separator />

        <!-- Email Digest -->
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-medium">Email Digest</h3>
              <p class="text-sm text-muted-foreground">Receive a summary of notifications</p>
            </div>
            <Switch
              :checked="preferences.email_digest_enabled"
              @update:checked="(val) => updatePreference('email_digest_enabled', val)"
            />
          </div>

          <div v-if="preferences.email_digest_enabled" class="ml-6">
            <Label>Frequency</Label>
            <Select
              :model-value="preferences.email_digest_frequency"
              @update:model-value="(val) => updatePreference('email_digest_frequency', val)"
            >
              <SelectTrigger class="w-full mt-2">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="daily">Daily</SelectItem>
                <SelectItem value="weekly">Weekly</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useNotificationsStore } from '@/stores/notifications'
import { useToast } from '@/components/ui/toast/use-toast'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Separator } from '@/components/ui/separator'
import type { NotificationPreferences } from '@/types/notification'

const notificationsStore = useNotificationsStore()
const { toast } = useToast()

const loading = ref(false)
const preferences = ref<NotificationPreferences | null>(null)

onMounted(async () => {
  await loadPreferences()
})

async function loadPreferences() {
  loading.value = true
  try {
    await notificationsStore.fetchPreferences()
    preferences.value = notificationsStore.preferences
  } catch (error) {
    toast({
      variant: 'destructive',
      title: 'Error',
      description: 'Failed to load notification preferences'
    })
  } finally {
    loading.value = false
  }
}

async function updatePreference(key: keyof NotificationPreferences, value: boolean | string) {
  if (!preferences.value) return

  try {
    // Update local state immediately for better UX
    preferences.value = { ...preferences.value, [key]: value } as NotificationPreferences

    // Update on server
    await notificationsStore.updatePreferences({ [key]: value })

    toast({
      title: 'Success',
      description: 'Preferences updated'
    })
  } catch (error) {
    // Revert on error
    await loadPreferences()
    
    toast({
      variant: 'destructive',
      title: 'Error',
      description: 'Failed to update preferences'
    })
  }
}
</script>
