ultisuite-client/components/gmail/settings/sections/signatures-settings-section.tsx

"use client"

import { useMemo, useState } from "react"
import { PenLine, Plus, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { SettingsSectionHeader } from "@/components/gmail/settings/settings-section-header"
import { SettingsSyncBanner } from "@/components/gmail/settings/settings-sync-banner"
import {
  MAIL_SETTINGS_PAGE_MASONRY_CLASS,
  MAIL_SETTINGS_PAGE_MASONRY_ITEM_CLASS,
} from "@/lib/mail-chrome-classes"
import { cn } from "@/lib/utils"
import { useAuthReady } from "@/lib/api/use-auth-ready"
import { useMailAccounts } from "@/lib/api/hooks/use-mail-queries"
import { useIdentities } from "@/lib/api/hooks/use-folder-label-queries"
import {
  useCreateMailSignature,
  useDeleteMailSignature,
  useMailSignatures,
  useUpdateMailSignature,
} from "@/lib/api/hooks/use-mail-signatures"
import { useUpdateIdentity } from "@/lib/api/hooks/use-identity-mutations"
import type { ApiIdentity, ApiMailSignature } from "@/lib/api/types"

const NONE_SIGNATURE = "__none__"

export function SignaturesSettingsSection() {
  const { ready, authenticated } = useAuthReady()
  const {
    data: signatures = [],
    isFetching,
    isError,
    refetch,
    isPending,
  } = useMailSignatures()
  const showInitialLoad = ready && authenticated && isPending && signatures.length === 0

  return (
    <>
      <SettingsSectionHeader
        title="Signatures"
        description="Bibliothèque de signatures réutilisables et attribution par identité d'envoi."
      />
      <SettingsSyncBanner isFetching={isFetching} isError={isError} onRetry={() => refetch()} />

      <div className={cn("space-y-6 lg:space-y-0", MAIL_SETTINGS_PAGE_MASONRY_CLASS)}>
        <div className={MAIL_SETTINGS_PAGE_MASONRY_ITEM_CLASS}>
          <SignatureLibrary
            signatures={signatures}
            showInitialLoad={showInitialLoad}
          />
        </div>
        <div className={MAIL_SETTINGS_PAGE_MASONRY_ITEM_CLASS}>
          <IdentitySignatureAssignments signatures={signatures} />
        </div>
      </div>
    </>
  )
}

function SignatureLibrary({
  signatures,
  showInitialLoad,
}: {
  signatures: ApiMailSignature[]
  showInitialLoad: boolean
}) {
  const createSignature = useCreateMailSignature()
  const updateSignature = useUpdateMailSignature()
  const deleteSignature = useDeleteMailSignature()
  const [showAddForm, setShowAddForm] = useState(false)
  const [draft, setDraft] = useState({ name: "", html: "" })

  function handleCreate() {
    const name = draft.name.trim()
    if (!name) return
    createSignature.mutate(
      { name, html: draft.html },
      {
        onSuccess: () => {
          setShowAddForm(false)
          setDraft({ name: "", html: "" })
        },
      }
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base flex items-center gap-2">
          <PenLine className="size-4" />
          Bibliothèque
        </CardTitle>
        <CardDescription>
          Créez des signatures nommées que vous pourrez réutiliser sur plusieurs identités.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {showInitialLoad ? null : signatures.length === 0 ? (
          <p className="text-sm text-muted-foreground">Aucune signature enregistrée.</p>
        ) : (
          <ul className="space-y-3">
            {signatures.map((signature) => (
              <li
                key={signature.id}
                className="rounded-lg border border-border p-3 space-y-2"
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="flex-1 space-y-2">
                    <div className="space-y-1">
                      <Label className="text-xs">Nom</Label>
                      <Input
                        defaultValue={signature.name}
                        onBlur={(e) => {
                          const next = e.target.value.trim()
                          if (!next || next === signature.name) return
                          updateSignature.mutate({
                            signatureId: signature.id,
                            name: next,
                            html: signature.html,
                          })
                        }}
                      />
                    </div>
                  </div>
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    aria-label="Supprimer la signature"
                    onClick={() => deleteSignature.mutate(signature.id)}
                  >
                    <Trash2 className="size-3.5" />
                  </Button>
                </div>
                <div className="space-y-1">
                  <Label className="text-xs">Contenu HTML</Label>
                  <textarea
                    className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono"
                    defaultValue={signature.html}
                    placeholder="<div>…</div>"
                    onBlur={(e) => {
                      if (e.target.value === signature.html) return
                      updateSignature.mutate({
                        signatureId: signature.id,
                        name: signature.name,
                        html: e.target.value,
                      })
                    }}
                  />
                </div>
                {signature.html?.trim() ? (
                  <div className="rounded-md border border-dashed border-border bg-muted/30 p-3 text-sm">
                    <p className="mb-2 text-xs text-muted-foreground">Aperçu</p>
                    <div
                      className="prose prose-sm max-w-none dark:prose-invert"
                      dangerouslySetInnerHTML={{ __html: signature.html }}
                    />
                  </div>
                ) : null}
              </li>
            ))}
          </ul>
        )}

        {showAddForm ? (
          <div className="rounded-lg border border-border p-3 space-y-3 max-w-2xl">
            <div className="space-y-1">
              <Label className="text-xs">Nom</Label>
              <Input
                value={draft.name}
                placeholder="Professionnelle"
                onChange={(e) => setDraft({ ...draft, name: e.target.value })}
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Contenu HTML</Label>
              <textarea
                className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono"
                value={draft.html}
                placeholder="<div style=&quot;color:#5f6368&quot;>…</div>"
                onChange={(e) => setDraft({ ...draft, html: e.target.value })}
              />
            </div>
            <div className="flex gap-2">
              <Button
                type="button"
                size="sm"
                disabled={createSignature.isPending || !draft.name.trim()}
                onClick={handleCreate}
              >
                Enregistrer
              </Button>
              <Button
                type="button"
                size="sm"
                variant="ghost"
                onClick={() => {
                  setShowAddForm(false)
                  setDraft({ name: "", html: "" })
                }}
              >
                Annuler
              </Button>
            </div>
          </div>
        ) : (
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={() => setShowAddForm(true)}
          >
            <Plus className="size-3.5 mr-1.5" />
            Ajouter une signature
          </Button>
        )}
      </CardContent>
    </Card>
  )
}

function IdentitySignatureAssignments({
  signatures,
}: {
  signatures: ApiMailSignature[]
}) {
  const { data: accounts = [] } = useMailAccounts()

  if (accounts.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Attribution par identité</CardTitle>
          <CardDescription>
            Ajoutez un compte mail pour configurer les signatures par défaut.
          </CardDescription>
        </CardHeader>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Attribution par identité</CardTitle>
        <CardDescription>
          Choisissez la signature insérée par défaut pour chaque adresse d&apos;envoi.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {accounts.map((account) => (
          <AccountIdentitySignatures
            key={account.id}
            accountId={account.id}
            accountLabel={`${account.name} · ${account.email}`}
            signatures={signatures}
          />
        ))}
      </CardContent>
    </Card>
  )
}

function AccountIdentitySignatures({
  accountId,
  accountLabel,
  signatures,
}: {
  accountId: string
  accountLabel: string
  signatures: ApiMailSignature[]
}) {
  const { data: identities = [] } = useIdentities(accountId)
  const updateIdentity = useUpdateIdentity(accountId)

  const signatureOptions = useMemo(
    () => [
      { value: NONE_SIGNATURE, label: "Aucune" },
      ...signatures.map((s) => ({ value: s.id, label: s.name })),
    ],
    [signatures]
  )

  if (identities.length === 0) {
    return (
      <div className="space-y-1">
        <p className="text-sm font-medium">{accountLabel}</p>
        <p className="text-xs text-muted-foreground">Aucune identité d&apos;envoi.</p>
      </div>
    )
  }

  return (
    <div className="space-y-3">
      <p className="text-sm font-medium">{accountLabel}</p>
      <ul className="space-y-2">
        {identities.map((identity) => (
          <IdentitySignatureRow
            key={identity.id}
            identity={identity}
            options={signatureOptions}
            pending={updateIdentity.isPending}
            onAssign={(defaultSignatureId) =>
              updateIdentity.mutate({
                identityId: identity.id,
                email: identity.email,
                name: identity.name,
                is_default: identity.is_default,
                signature_html: identity.signature_html ?? "",
                default_signature_id: defaultSignatureId,
                reply_to_addrs: identity.reply_to_addrs,
              })
            }
          />
        ))}
      </ul>
    </div>
  )
}

function IdentitySignatureRow({
  identity,
  options,
  pending,
  onAssign,
}: {
  identity: ApiIdentity
  options: Array<{ value: string; label: string }>
  pending: boolean
  onAssign: (defaultSignatureId: string) => void
}) {
  const current =
    identity.default_signature_id && identity.default_signature_id !== ""
      ? identity.default_signature_id
      : NONE_SIGNATURE

  return (
    <li className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2 rounded-lg border border-border p-3">
      <div className="min-w-[10rem] max-w-full flex-1">
        <p className="text-sm font-medium">{identity.name}</p>
        <p className="text-xs text-muted-foreground break-all">{identity.email}</p>
        {identity.is_default ? (
          <p className="text-xs text-muted-foreground mt-0.5">Identité par défaut</p>
        ) : null}
      </div>
      <div className="min-w-[10rem] max-w-full flex-[1_1_10rem]">
        <Label className="text-xs sr-only">Signature par défaut</Label>
        <Select
          value={current}
          disabled={pending}
          onValueChange={(value) =>
            onAssign(value === NONE_SIGNATURE ? "" : value)
          }
        >
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Signature" />
          </SelectTrigger>
          <SelectContent>
            {options.map((opt) => (
              <SelectItem key={opt.value} value={opt.value}>
                {opt.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </li>
  )
}