"use client"

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { ApiTokenDriveScopeEditor } from "@/components/gmail/settings/automation/api-token-drive-scope-editor"
import { ApiTokenMailScopeEditor } from "@/components/gmail/settings/automation/api-token-mail-scope-editor"
import { WebhookContactsScopeEditor } from "@/components/gmail/settings/automation/webhook-contacts-scope-editor"
import { WebhookAgendaScopeEditor } from "@/components/gmail/settings/automation/webhook-agenda-scope-editor"
import {
  AUTOMATION_DOMAIN_LABELS,
  type AutomationDomain,
} from "@/lib/mail-automation/domains"
import { AutomationBorderedFieldset } from "@/components/gmail/settings/automation/automation-bordered-fieldset"
import { AutomationDomainMark } from "@/components/gmail/settings/automation/automation-domain-mark"
import type { TriggerType } from "@/lib/mail-automation/types"
import {
  hasAgendaWebhookEvents,
  hasContactsWebhookEvents,
  hasDriveWebhookEvents,
  hasMailWebhookEvents,
  WEBHOOK_EVENT_OPTIONS,
} from "@/lib/mail-automation/webhook-config"
import type { ApiTokenDriveScope, ApiTokenMailScope } from "@/lib/api/types"
import type { WebhookContactsScope, WebhookAgendaScope } from "@/lib/mail-automation/webhook-config"
import { cn } from "@/lib/utils"

const DOMAINS: AutomationDomain[] = ["mail", "drive", "contacts", "agenda"]

export function WebhookEventScopeEditor({
  eventTypes,
  onEventTypesChange,
  mailScope,
  onMailScopeChange,
  driveScope,
  onDriveScopeChange,
  contactsScope,
  onContactsScopeChange,
  agendaScope,
  onAgendaScopeChange,
  className,
}: {
  eventTypes: TriggerType[]
  onEventTypesChange: (types: TriggerType[]) => void
  mailScope: ApiTokenMailScope
  onMailScopeChange: (scope: ApiTokenMailScope) => void
  driveScope: ApiTokenDriveScope
  onDriveScopeChange: (scope: ApiTokenDriveScope) => void
  contactsScope: WebhookContactsScope
  onContactsScopeChange: (scope: WebhookContactsScope) => void
  agendaScope: WebhookAgendaScope
  onAgendaScopeChange: (scope: WebhookAgendaScope) => void
  className?: string
}) {
  function toggleEvent(type: TriggerType) {
    if (eventTypes.includes(type)) {
      onEventTypesChange(eventTypes.filter((t) => t !== type))
    } else {
      onEventTypesChange([...eventTypes, type])
    }
  }

  return (
    <div className={cn("space-y-4", className)}>
      <div className="space-y-2">
        <Label className="text-sm font-medium">Événements déclencheurs</Label>
        <p className="text-xs text-muted-foreground">
          Le webhook part uniquement pour les événements cochés, dans le périmètre défini ci-dessous.
        </p>
        <div className="flex flex-col gap-4">
        {DOMAINS.map((domain) => {
          const options = WEBHOOK_EVENT_OPTIONS.filter((o) => o.domain === domain)
          return (
            <AutomationBorderedFieldset
              key={domain}
              className="shrink-0"
              legend={
                <>
                  <AutomationDomainMark domain={domain} className="size-3.5" alt="" />
                  {AUTOMATION_DOMAIN_LABELS[domain]}
                </>
              }
              legendClassName="flex items-center gap-1.5 text-xs"
            >
              <ul className="space-y-1.5">
                {options.map((opt) => (
                  <li key={opt.value}>
                    <label className="flex cursor-pointer items-center gap-2 text-sm">
                      <Checkbox
                        checked={eventTypes.includes(opt.value)}
                        onCheckedChange={() => toggleEvent(opt.value)}
                      />
                      {opt.label}
                    </label>
                  </li>
                ))}
              </ul>
            </AutomationBorderedFieldset>
          )
        })}
        </div>
      </div>

      <ApiTokenMailScopeEditor
        enabled={hasMailWebhookEvents(eventTypes)}
        scope={mailScope}
        onChange={onMailScopeChange}
      />
      <ApiTokenDriveScopeEditor
        enabled={hasDriveWebhookEvents(eventTypes)}
        scope={driveScope}
        onChange={onDriveScopeChange}
      />
      <WebhookContactsScopeEditor
        enabled={hasContactsWebhookEvents(eventTypes)}
        scope={contactsScope}
        onChange={onContactsScopeChange}
      />
      <WebhookAgendaScopeEditor
        enabled={hasAgendaWebhookEvents(eventTypes)}
        scope={agendaScope}
        onChange={onAgendaScopeChange}
      />
    </div>
  )
}