"use client";

import { toast } from "sonner";
import { useNotificationPreferences, useUpdatePreferences } from "@/lib/hooks/use-notifications";
import { Switch } from "@/components/ui/switch";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Label } from "@/components/ui/label";
import type { NotificationPreferencesResponse, UpdatePreferencesRequest } from "@/lib/api/notifications";

const preferenceItems: {
  key: keyof NotificationPreferencesResponse;
  label: string;
  description: string;
}[] = [
  {
    key: "task_reminders",
    label: "Task Reminders",
    description: "Get notified about upcoming and overdue tasks",
  },
  {
    key: "task_completions",
    label: "Task Completions",
    description: "Get notified when tasks are completed",
  },
  {
    key: "residence_updates",
    label: "Residence Updates",
    description: "Get notified about residence changes",
  },
  {
    key: "share_notifications",
    label: "Share Notifications",
    description: "Get notified about sharing activity",
  },
  {
    key: "marketing",
    label: "Marketing",
    description: "Receive product updates and tips",
  },
];

export function NotificationPreferences() {
  const { data: preferences, isLoading } = useNotificationPreferences();
  const updatePreferences = useUpdatePreferences();

  function handleToggle(key: keyof NotificationPreferencesResponse, checked: boolean) {
    const update: UpdatePreferencesRequest = { [key]: checked };
    updatePreferences.mutate(update, {
      onSuccess: () => {
        toast.success("Preferences updated");
      },
      onError: () => {
        toast.error("Failed to update preferences");
      },
    });
  }

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Notification Preferences</CardTitle>
          <CardDescription>Control which notifications you receive.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className="flex items-center justify-between gap-4">
              <div className="space-y-1.5">
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-3 w-56" />
              </div>
              <Skeleton className="h-5 w-9 rounded-full" />
            </div>
          ))}
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Notification Preferences</CardTitle>
        <CardDescription>Control which notifications you receive.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {preferenceItems.map((item) => {
          const isChecked = preferences?.[item.key] ?? false;
          return (
            <div key={item.key} className="flex items-center justify-between gap-4">
              <div className="space-y-0.5">
                <Label htmlFor={item.key} className="text-sm font-medium">
                  {item.label}
                </Label>
                <p className="text-sm text-muted-foreground">{item.description}</p>
              </div>
              <Switch
                id={item.key}
                checked={isChecked}
                onCheckedChange={(checked) => handleToggle(item.key, checked as boolean)}
                disabled={updatePreferences.isPending}
              />
            </div>
          );
        })}
      </CardContent>
    </Card>
  );
}
