ultisuite-client/components/gmail/settings/automation/workflow-triggers-panel.tsx

'use client'

import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Plus, Trash2 } from 'lucide-react'
import type {
  AutomationTrigger,
  TriggerAndGroup,
  TriggerOrGroup,
  TriggerType,
} from '@/lib/mail-automation/types'
import {
  AUTOMATION_DOMAIN_LABELS,
  DOMAIN_TRIGGER_TYPES,
  TRIGGER_LABELS,
  defaultTriggerForDomain,
  inferDomainsFromTriggers,
  triggerDomain,
  triggerUsesCalendarId,
  triggerUsesContactLabel,
  triggerUsesFolderPath,
  triggerUsesMailFolder,
  triggerUsesMailLabel,
} from '@/lib/mail-automation/domains'
import type { AutomationDomain } from '@/lib/mail-automation/domains'
import { triggerValueSuggestionKind } from '@/lib/mail-automation/condition-helpers'
import { AutomationSuggestInput } from './automation-suggest-input'

const ALL_DOMAINS: AutomationDomain[] = ['mail', 'drive', 'contacts', 'agenda']

interface WorkflowTriggersPanelProps {
  triggers: TriggerOrGroup
  onChange: (triggers: TriggerOrGroup) => void
  disabled?: boolean
}

export function WorkflowTriggersPanel({
  triggers,
  onChange,
  disabled,
}: WorkflowTriggersPanelProps) {
  const groups =
    triggers.groups.length > 0
      ? triggers.groups
      : [{ operator: 'and' as const, items: [{ type: 'message_received' as const }] }]

  const activeDomains = inferDomainsFromTriggers(triggers)
  const multiDomain = activeDomains.length > 1

  function updateGroups(next: TriggerAndGroup[]) {
    onChange({
      operator: 'or',
      groups: next.length > 0 ? next : [{ operator: 'and', items: [] }],
    })
  }

  function updateGroup(gi: number, group: TriggerAndGroup) {
    const next = [...groups]
    next[gi] = group
    updateGroups(next)
  }

  function addOrGroup() {
    onChange({
      operator: 'or',
      groups: [...groups, { operator: 'and', items: [defaultTriggerForDomain(activeDomains[0] ?? 'mail')] }],
    })
  }

  function removeOrGroup(gi: number) {
    updateGroups(groups.filter((_, i) => i !== gi))
  }

  function removeTrigger(gi: number, ti: number) {
    const group = groups[gi]
    const items = group.items.filter((_, i) => i !== ti)
    if (items.length === 0) {
      removeOrGroup(gi)
      return
    }
    updateGroup(gi, { ...group, items })
  }

  return (
    <div className="space-y-3 rounded-lg border border-border bg-muted/20 p-3">
      <div className="flex items-center justify-between gap-2">
        <div>
          <Label className="text-xs font-medium">Déclencheurs (OU entre groupes, ET dans un groupe)</Label>
          {multiDomain ? (
            <p className="mt-0.5 text-[10px] text-muted-foreground">
              Domaines actifs : {activeDomains.map((d) => AUTOMATION_DOMAIN_LABELS[d]).join(', ')} — seules les
              conditions et actions compatibles sont proposées.
            </p>
          ) : null}
        </div>
        <Button type="button" variant="outline" size="sm" disabled={disabled} onClick={addOrGroup}>
          <Plus className="mr-1 size-3" />
          Groupe OU
        </Button>
      </div>

      {groups.map((group, gi) => (
        <div key={gi} className="space-y-2 rounded-md border border-border/60 bg-background p-2">
          <div className="flex items-center justify-between gap-2">
            {gi > 0 ? (
              <p className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">OU</p>
            ) : (
              <span />
            )}
            {groups.length > 1 ? (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="h-6 px-2 text-[10px] text-muted-foreground hover:text-destructive"
                disabled={disabled}
                onClick={() => removeOrGroup(gi)}
              >
                <Trash2 className="mr-1 size-3" />
                Retirer le groupe
              </Button>
            ) : null}
          </div>

          {group.items.length === 0 ? (
            <p className="text-xs text-muted-foreground italic">Aucun déclencheur — ajoutez-en un ci-dessous</p>
          ) : null}
          {group.items.map((item, ti) => (
            <TriggerRow
              key={ti}
              item={item}
              disabled={disabled}
              onChange={(next) => {
                const items = [...group.items]
                items[ti] = next
                updateGroup(gi, { ...group, items })
              }}
              onRemove={() => removeTrigger(gi, ti)}
            />
          ))}

          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="h-7 text-xs"
            disabled={disabled}
            onClick={() =>
              updateGroup(gi, {
                ...group,
                items: [...group.items, defaultTriggerForDomain(activeDomains[0] ?? 'mail')],
              })
            }
          >
            <Plus className="mr-1 size-3" />
            ET — ajouter déclencheur
          </Button>
        </div>
      ))}
    </div>
  )
}

function TriggerRow({
  item,
  onChange,
  onRemove,
  disabled,
}: {
  item: AutomationTrigger
  onChange: (item: AutomationTrigger) => void
  onRemove: () => void
  disabled?: boolean
}) {
  function onTypeChange(type: TriggerType) {
    const domain = triggerDomain(type)
    const base = defaultTriggerForDomain(domain)
    onChange({ ...base, type })
  }

  return (
    <div className="flex flex-wrap items-end gap-2">
      <div className="min-w-[160px] flex-1">
        <Label className="text-[10px] text-muted-foreground">Événement</Label>
        <Select value={item.type} disabled={disabled} onValueChange={(v) => onTypeChange(v as TriggerType)}>
          <SelectTrigger className="h-8 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {ALL_DOMAINS.map((domain) => (
              <SelectGroup key={domain}>
                <SelectLabel className="text-[10px]">{AUTOMATION_DOMAIN_LABELS[domain]}</SelectLabel>
                {DOMAIN_TRIGGER_TYPES[domain].map((t) => (
                  <SelectItem key={t} value={t} className="text-xs">
                    {TRIGGER_LABELS[t]}
                  </SelectItem>
                ))}
              </SelectGroup>
            ))}
          </SelectContent>
        </Select>
      </div>
      {triggerUsesMailFolder(item.type) ? (
        <div className="min-w-[120px] flex-1">
          <Label className="text-[10px] text-muted-foreground">Dossier mail (optionnel)</Label>
          <AutomationSuggestInput
            kind={triggerValueSuggestionKind('folder_id')}
            placeholder="Choisir un dossier…"
            value={item.folder_id ?? ''}
            disabled={disabled}
            onChange={(value) => onChange({ ...item, folder_id: value || undefined })}
          />
        </div>
      ) : null}
      {triggerUsesMailLabel(item.type) ? (
        <div className="min-w-[120px] flex-1">
          <Label className="text-[10px] text-muted-foreground">Libellé mail</Label>
          <AutomationSuggestInput
            kind={triggerValueSuggestionKind('label')}
            placeholder="Nom libellé"
            value={item.label ?? ''}
            disabled={disabled}
            onChange={(value) => onChange({ ...item, label: value || undefined })}
          />
        </div>
      ) : null}
      {triggerUsesFolderPath(item.type) ? (
        <div className="min-w-[120px] flex-1">
          <Label className="text-[10px] text-muted-foreground">Dossier Drive (optionnel)</Label>
          <AutomationSuggestInput
            kind={triggerValueSuggestionKind('folder_path')}
            placeholder="/Documents"
            value={item.folder_path ?? ''}
            disabled={disabled}
            onChange={(value) => onChange({ ...item, folder_path: value || undefined })}
          />
        </div>
      ) : null}
      {triggerUsesContactLabel(item.type) ? (
        <div className="min-w-[120px] flex-1">
          <Label className="text-[10px] text-muted-foreground">Libellé contact (optionnel)</Label>
          <AutomationSuggestInput
            kind={triggerValueSuggestionKind('contact_label')}
            placeholder="Libellé"
            value={item.contact_label ?? ''}
            disabled={disabled}
            onChange={(value) => onChange({ ...item, contact_label: value || undefined })}
          />
        </div>
      ) : null}
      {triggerUsesCalendarId(item.type) ? (
        <div className="min-w-[120px] flex-1">
          <Label className="text-[10px] text-muted-foreground">Agenda (optionnel)</Label>
          <AutomationSuggestInput
            kind={triggerValueSuggestionKind('calendar_id')}
            placeholder="Choisir un agenda…"
            value={item.calendar_id ?? ''}
            disabled={disabled}
            onChange={(value) => onChange({ ...item, calendar_id: value || undefined })}
          />
        </div>
      ) : null}
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className="size-8 shrink-0"
        disabled={disabled}
        title="Retirer ce déclencheur"
        onClick={onRemove}
      >
        <Trash2 className="size-3.5" />
      </Button>
    </div>
  )
}