'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { ArrowLeft, Bell, Mail, MessageSquare, Calendar, Clock, Users } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';

interface NotificationsSettingsContentProps {
  locale: string;
}

interface NotificationSetting {
  id: string;
  label: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  email: boolean;
  push: boolean;
  inApp: boolean;
}

const defaultSettings: NotificationSetting[] = [
  {
    id: 'tasks',
    label: 'Aufgaben',
    description: 'Benachrichtigungen bei neuen oder faelligen Aufgaben',
    icon: Clock,
    email: true,
    push: true,
    inApp: true,
  },
  {
    id: 'absences',
    label: 'Abwesenheiten',
    description: 'Urlaubsantraege und Genehmigungen',
    icon: Calendar,
    email: true,
    push: false,
    inApp: true,
  },
  {
    id: 'meetings',
    label: 'Termine',
    description: 'Erinnerungen und Einladungen',
    icon: Users,
    email: true,
    push: true,
    inApp: true,
  },
  {
    id: 'messages',
    label: 'Nachrichten',
    description: 'Direktnachrichten und Erwaechnungen',
    icon: MessageSquare,
    email: false,
    push: true,
    inApp: true,
  },
];

/**
 * Simple toggle switch component
 */
function Toggle({
  enabled,
  onChange,
  disabled = false,
}: {
  enabled: boolean;
  onChange: (enabled: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={enabled}
      disabled={disabled}
      onClick={() => onChange(!enabled)}
      className={cn(
        'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
        'disabled:cursor-not-allowed disabled:opacity-50',
        enabled ? 'bg-primary' : 'bg-input'
      )}
    >
      <span
        className={cn(
          'pointer-events-none inline-block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform',
          enabled ? 'translate-x-5' : 'translate-x-0'
        )}
      />
    </button>
  );
}

/**
 * Notifications settings content - Manage notification preferences
 */
export function NotificationsSettingsContent({ locale }: NotificationsSettingsContentProps) {
  const t = useTranslations('settings');
  const [settings, setSettings] = useState(defaultSettings);
  const [masterEmail, setMasterEmail] = useState(true);
  const [masterPush, setMasterPush] = useState(true);

  const updateSetting = (id: string, field: 'email' | 'push' | 'inApp', value: boolean) => {
    setSettings((prev) =>
      prev.map((s) => (s.id === id ? { ...s, [field]: value } : s))
    );
  };

  return (
    <div className="space-y-6">
      {/* Header with back button */}
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
        className="flex items-center gap-4"
      >
        <Link href={`/${locale}/settings`}>
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{t('notificationsTitle')}</h1>
          <p className="text-muted-foreground">{t('notificationsDescription')}</p>
        </div>
      </motion.div>

      {/* Master Toggles */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3, delay: 0.1 }}
      >
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Bell className="h-5 w-5" />
              Globale Einstellungen
            </CardTitle>
            <CardDescription>Hauptschalter fuer Benachrichtigungen</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Mail className="h-5 w-5 text-muted-foreground" />
                <div>
                  <Label>E-Mail-Benachrichtigungen</Label>
                  <p className="text-sm text-muted-foreground">
                    Benachrichtigungen per E-Mail erhalten
                  </p>
                </div>
              </div>
              <Toggle enabled={masterEmail} onChange={setMasterEmail} />
            </div>

            <Separator />

            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Bell className="h-5 w-5 text-muted-foreground" />
                <div>
                  <Label>Push-Benachrichtigungen</Label>
                  <p className="text-sm text-muted-foreground">
                    Browser-Benachrichtigungen erhalten
                  </p>
                </div>
              </div>
              <Toggle enabled={masterPush} onChange={setMasterPush} />
            </div>
          </CardContent>
        </Card>
      </motion.div>

      {/* Detailed Settings */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3, delay: 0.2 }}
      >
        <Card>
          <CardHeader>
            <CardTitle>Detaillierte Einstellungen</CardTitle>
            <CardDescription>
              Passen Sie Benachrichtigungen fuer einzelne Kategorien an
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {settings.map((setting, index) => {
                const Icon = setting.icon;

                return (
                  <motion.div
                    key={setting.id}
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.2, delay: index * 0.05 }}
                  >
                    <div className="flex items-start gap-4">
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                        <Icon className="h-5 w-5 text-muted-foreground" />
                      </div>

                      <div className="flex-1 space-y-3">
                        <div>
                          <Label>{setting.label}</Label>
                          <p className="text-sm text-muted-foreground">{setting.description}</p>
                        </div>

                        <div className="flex flex-wrap gap-6">
                          <div className="flex items-center gap-2">
                            <Toggle
                              enabled={setting.email}
                              onChange={(v) => updateSetting(setting.id, 'email', v)}
                              disabled={!masterEmail}
                            />
                            <span className="text-sm">E-Mail</span>
                          </div>

                          <div className="flex items-center gap-2">
                            <Toggle
                              enabled={setting.push}
                              onChange={(v) => updateSetting(setting.id, 'push', v)}
                              disabled={!masterPush}
                            />
                            <span className="text-sm">Push</span>
                          </div>

                          <div className="flex items-center gap-2">
                            <Toggle
                              enabled={setting.inApp}
                              onChange={(v) => updateSetting(setting.id, 'inApp', v)}
                            />
                            <span className="text-sm">In-App</span>
                          </div>
                        </div>
                      </div>
                    </div>

                    {index < settings.length - 1 && <Separator className="mt-6" />}
                  </motion.div>
                );
              })}
            </div>
          </CardContent>
        </Card>
      </motion.div>

      {/* Save Button */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3, delay: 0.3 }}
        className="flex justify-end"
      >
        <Button>Einstellungen speichern</Button>
      </motion.div>
    </div>
  );
}
