"use client"

import { useState } from "react"
import { Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  useMailWebhooks,
  useCreateMailWebhook,
  useDeleteMailWebhook,
} from "@/lib/api/hooks/use-mail-automation-queries"
import { useAuthReady } from "@/lib/api/use-auth-ready"
import { SettingsSyncBanner } from "@/components/gmail/settings/settings-sync-banner"
import { WebhookTemplateVariablesPanel } from "@/components/gmail/settings/automation/webhook-template-variables-panel"
import { AutomationTabMasonry } from "@/components/gmail/settings/automation/automation-tab-masonry"

export function WebhooksPanel() {
  const { ready, authenticated } = useAuthReady()
  const { data: webhooks = [], isFetching, isError, refetch, isPending } = useMailWebhooks()
  const createWebhook = useCreateMailWebhook()
  const deleteWebhook = useDeleteMailWebhook()
  const [name, setName] = useState("")
  const [url, setUrl] = useState("")
  const [template, setTemplate] = useState(
    '{"text":"Nouveau mail de $sender.name : $subject"}'
  )
  const showInitialLoad = ready && authenticated && isPending && webhooks.length === 0

  return (
    <div className="space-y-4">
      <SettingsSyncBanner isFetching={isFetching} isError={isError} onRetry={() => refetch()} />
      <AutomationTabMasonry columns={2}>
        <WebhookTemplateVariablesPanel />
        <div className="space-y-2 rounded-lg border border-border p-4">
          <Label className="text-xs">Nouveau webhook</Label>
          <Input placeholder="Nom" value={name} onChange={(e) => setName(e.target.value)} />
          <Input placeholder="URL HTTPS" value={url} onChange={(e) => setUrl(e.target.value)} />
          <textarea
            className="min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-xs"
            value={template}
            onChange={(e) => setTemplate(e.target.value)}
            placeholder="body_template JSON"
          />
          <Button
            type="button"
            disabled={!name.trim() || !url.trim() || createWebhook.isPending}
            onClick={() =>
              createWebhook.mutate({
                name: name.trim(),
                url: url.trim(),
                method: "POST",
                body_template: template,
              })
            }
          >
            Créer le webhook
          </Button>
        </div>

        {showInitialLoad ? (
          <p className="text-sm text-muted-foreground">Chargement…</p>
        ) : webhooks.length === 0 ? (
          <p className="text-sm text-muted-foreground">Aucun webhook.</p>
        ) : (
          <ul className="divide-y divide-border rounded-lg border border-border">
            {webhooks.map((hook) => (
              <li
                key={hook.id}
                className="flex items-start justify-between gap-2 px-3 py-3"
              >
                <div className="min-w-0">
                  <p className="text-sm font-medium">{hook.name}</p>
                  <p className="truncate text-xs text-muted-foreground">{hook.url}</p>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  onClick={() => deleteWebhook.mutate(hook.id)}
                >
                  <Trash2 className="size-4" />
                </Button>
              </li>
            ))}
          </ul>
        )}
      </AutomationTabMasonry>
    </div>
  )
}