'use client';

import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { type WebhookEvent } from '@/lib/services/webhook-event-map';

// ─── Event Groups ─────────────────────────────────────────────────────────────

const EVENT_GROUPS: { label: string; events: WebhookEvent[] }[] = [
  {
    label: 'Clients',
    events: ['client.created', 'client.updated', 'client.archived', 'client.merged'],
  },
  {
    label: 'Interests',
    events: ['interest.created', 'interest.stage_changed', 'interest.berth_linked'],
  },
  {
    label: 'Berths',
    events: ['berth.status_changed', 'berth.updated'],
  },
  {
    label: 'Documents',
    events: ['document.sent', 'document.signed', 'document.completed', 'document.expired'],
  },
  {
    label: 'Expenses',
    events: ['expense.created', 'expense.updated'],
  },
  {
    label: 'Invoices',
    events: ['invoice.created', 'invoice.sent', 'invoice.paid', 'invoice.overdue'],
  },
  {
    label: 'Registrations',
    events: ['registration.new'],
  },
];

interface WebhookEventSelectorProps {
  selected: WebhookEvent[];
  onChange: (events: WebhookEvent[]) => void;
}

export function WebhookEventSelector({ selected, onChange }: WebhookEventSelectorProps) {
  function toggle(event: WebhookEvent) {
    if (selected.includes(event)) {
      onChange(selected.filter((e) => e !== event));
    } else {
      onChange([...selected, event]);
    }
  }

  function toggleGroup(events: WebhookEvent[]) {
    const allSelected = events.every((e) => selected.includes(e));
    if (allSelected) {
      onChange(selected.filter((e) => !events.includes(e)));
    } else {
      const newEvents = [...selected];
      for (const e of events) {
        if (!newEvents.includes(e)) newEvents.push(e);
      }
      onChange(newEvents);
    }
  }

  return (
    <div className="space-y-4">
      {EVENT_GROUPS.map((group) => {
        const allChecked = group.events.every((e) => selected.includes(e));
        const someChecked = group.events.some((e) => selected.includes(e));
        return (
          <div key={group.label}>
            <div className="flex items-center gap-2 mb-2">
              <Checkbox
                id={`group-${group.label}`}
                checked={allChecked}
                data-state={someChecked && !allChecked ? 'indeterminate' : undefined}
                onCheckedChange={() => toggleGroup(group.events)}
              />
              <Label
                htmlFor={`group-${group.label}`}
                className="font-semibold text-sm cursor-pointer"
              >
                {group.label}
              </Label>
            </div>
            <div className="ml-6 grid grid-cols-2 gap-1">
              {group.events.map((event) => (
                <div key={event} className="flex items-center gap-2">
                  <Checkbox
                    id={`event-${event}`}
                    checked={selected.includes(event)}
                    onCheckedChange={() => toggle(event)}
                  />
                  <Label htmlFor={`event-${event}`} className="text-xs font-mono cursor-pointer">
                    {event}
                  </Label>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}
