'use client'

import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Plus, Trash2 } from 'lucide-react'
import type {
  AutomationTrigger,
  TriggerAndGroup,
  TriggerOrGroup,
  TriggerType,
} from '@/lib/mail-automation/types'
import { TRIGGER_LABELS } from '@/lib/mail-automation/node-definitions'
import { AutomationSuggestInput } from './automation-suggest-input'

const TRIGGER_TYPES: TriggerType[] = ['message_received', 'label_added', 'label_removed']

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 }] }]

  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: [{ type: 'message_received' }] }],
    })
  }

  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">
        <Label className="text-xs font-medium">Déclencheurs (OU entre groupes, ET dans un groupe)</Label>
        <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, { type: 'message_received' }],
              })
            }
          >
            <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
}) {
  return (
    <div className="flex flex-wrap items-end gap-2">
      <div className="min-w-[140px] flex-1">
        <Label className="text-[10px] text-muted-foreground">Type</Label>
        <Select
          value={item.type}
          disabled={disabled}
          onValueChange={(v) => onChange({ ...item, type: v as TriggerType })}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {TRIGGER_TYPES.map((t) => (
              <SelectItem key={t} value={t} className="text-xs">
                {TRIGGER_LABELS[t]}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      {item.type === 'message_received' ? (
        <div className="min-w-[120px] flex-1">
          <Label className="text-[10px] text-muted-foreground">Dossier (optionnel)</Label>
          <AutomationSuggestInput
            kind="folder_id"
            placeholder="Choisir un dossier…"
            value={item.folder_id ?? ''}
            disabled={disabled}
            onChange={(value) => onChange({ ...item, folder_id: value || undefined })}
          />
        </div>
      ) : (
        <div className="min-w-[120px] flex-1">
          <Label className="text-[10px] text-muted-foreground">Libellé</Label>
          <AutomationSuggestInput
            kind="label"
            placeholder="Nom libellé"
            value={item.label ?? ''}
            disabled={disabled}
            onChange={(value) => onChange({ ...item, label: value || undefined })}
          />
        </div>
      )}
      <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>
  )
}