'use client';

import {useState} from 'react';
import {VStack, HStack} from '@astryxdesign/core/Layout';
import {Switch} from '@astryxdesign/core/Switch';
import {Button} from '@astryxdesign/core/Button';
import {Text} from '@astryxdesign/core/Text';
import {Divider} from '@astryxdesign/core/Divider';
import {useToast} from '@astryxdesign/core/Toast';
import {StaticPanel} from '@/shared/components/patterns/PanelCard';

export interface EventNotification {
  id: string;
  label: string;
  description: string;
  email: boolean;
  sms: boolean;
  whatsapp: boolean;
  push: boolean;
}

const DEFAULT_EVENTS: EventNotification[] = [
  {
    id: 'dailySummary',
    label: 'Daily Performance Summary',
    description: 'Daily morning dispatch with footfall, revenue and LYT redemptions.',
    email: true,
    sms: false,
    whatsapp: true,
    push: true,
  },
  {
    id: 'expiryAlerts',
    label: 'Reward Expiry Warning',
    description: 'Alert when active rewards are within 48 hours of expiration.',
    email: true,
    sms: true,
    whatsapp: true,
    push: true,
  },
  {
    id: 'staffAbsence',
    label: 'Staff Absence & Late Check-in',
    description: 'Instant alert when a scheduled shift starts without rostered staff.',
    email: true,
    sms: true,
    whatsapp: false,
    push: true,
  },
  {
    id: 'lowConversion',
    label: 'Low Conversion Drop Alert',
    description: 'Triggered if a store conversion rate drops below 15% threshold.',
    email: true,
    sms: false,
    whatsapp: true,
    push: false,
  },
  {
    id: 'settlementReceipt',
    label: 'LYT Settlement Receipts',
    description: 'Weekly payout summary and bank credit confirmations.',
    email: true,
    sms: true,
    whatsapp: true,
    push: false,
  },
  {
    id: 'securityAlerts',
    label: 'Security & New Login Alerts',
    description: 'Immediate notification on unrecognized IP or new device login.',
    email: true,
    sms: true,
    whatsapp: true,
    push: true,
  },
];

export function NotificationsForm() {
  const toast = useToast();
  const [events, setEvents] = useState<EventNotification[]>(DEFAULT_EVENTS);
  const [isSaving, setIsSaving] = useState(false);

  const toggleChannel = (
    id: string,
    channel: 'email' | 'sms' | 'whatsapp' | 'push',
  ) => {
    setEvents((prev) =>
      prev.map((e) => (e.id === id ? {...e, [channel]: !e[channel]} : e)),
    );
  };

  const handleSave = () => {
    setIsSaving(true);
    setTimeout(() => {
      setIsSaving(false);
      toast({body: 'Multi-channel notification settings saved'});
    }, 400);
  };

  return (
    <StaticPanel
      title="Notification Preferences & Channels"
      subtitle="Configure delivery channels (Email, SMS, WhatsApp, Push) for business alerts."
      actions={
        <Button
          variant="primary"
          size="sm"
          label="Save Preferences"
          isLoading={isSaving}
          onClick={handleSave}
        />
      }
    >
      <VStack gap={4}>
        {events.map((evt, idx) => (
          <VStack key={evt.id} gap={3}>
            <HStack hAlign="between" vAlign="center" wrap="wrap" gap={3}>
              <VStack gap={0.5} width={380}>
                <Text size="sm" weight="medium">
                  {evt.label}
                </Text>
                <Text size="sm" color="secondary">
                  {evt.description}
                </Text>
              </VStack>

              <HStack gap={3} vAlign="center" wrap="wrap">
                <Switch
                  label="Email"
                  value={evt.email}
                  onChange={() => toggleChannel(evt.id, 'email')}
                />
                <Switch
                  label="SMS"
                  value={evt.sms}
                  onChange={() => toggleChannel(evt.id, 'sms')}
                />
                <Switch
                  label="WhatsApp"
                  value={evt.whatsapp}
                  onChange={() => toggleChannel(evt.id, 'whatsapp')}
                />
                <Switch
                  label="Push"
                  value={evt.push}
                  onChange={() => toggleChannel(evt.id, 'push')}
                />
              </HStack>
            </HStack>
            {idx === events.length - 1 ? null : <Divider />}
          </VStack>
        ))}
      </VStack>
    </StaticPanel>
  );
}
