"use client"

import { useEffect, useMemo, useState } from "react"
import {
  Building2,
  Copy,
  Eye,
  Globe,
  Link2,
  Loader2,
  Mail,
  Pencil,
  RefreshCw,
  Shield,
  SlidersHorizontal,
  Trash2,
  UserRound,
  Users,
} from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { useSearchContacts } from "@/lib/api/hooks/use-contact-queries"
import { useDriveShares, useDriveMutations } from "@/lib/api/hooks/use-drive-queries"
import type { DriveShare } from "@/lib/api/types"
import { displayFileName } from "@/lib/drive/display-file-name"
import {
  FOLDER_SHARE_PERMISSION_OPTIONS,
  folderPermissionsFromRole,
  folderPermissionsToBitmask,
  type FolderSharePermissionId,
  type FolderSharePermissions,
} from "@/lib/drive/drive-share-permissions"
import {
  NC_SHARE_TYPE,
  SHARE_SECTION_LABELS,
  formatShareDate,
  groupSharesBySection,
  shareAccessLabel,
  shareLinkForCopy,
  shareOwnerLabel,
  sharePermissionsLabel,
  shareRecipientLabel,
  type ShareListSection,
} from "@/lib/drive/drive-share-types"
import { useDriveUIStore } from "@/lib/stores/drive-ui-store"
import {
  DRIVE_BTN_GHOST,
  DRIVE_BTN_PRIMARY,
  DRIVE_DIALOG_CONTENT,
  DRIVE_DIALOG_DIVIDER,
  DRIVE_DIALOG_FOOTER,
  DRIVE_DIALOG_HEADER,
  DRIVE_DIALOG_OVERLAY,
  DRIVE_FIELD_CLASS,
  DRIVE_PANEL_MUTED,
  DRIVE_TEXT_PRIMARY,
  DRIVE_TEXT_SECONDARY,
  DRIVE_TEXT_TITLE,
  DRIVE_TEXTAREA_CLASS,
} from "@/lib/drive/drive-dialog-styles"
import { cn } from "@/lib/utils"

function shareItemLabel(path: string) {
  const trimmed = path.replace(/\/+$/, "")
  const base = trimmed.slice(trimmed.lastIndexOf("/") + 1)
  return displayFileName(base || path)
}

type SharePermissionMode = "viewer" | "editor" | "advanced"
type LinkAccessMode = "public" | "internal"

const PERMISSION_OPTIONS: {
  id: SharePermissionMode
  label: string
  icon: typeof Eye
  folderOnly?: boolean
}[] = [
  { id: "viewer", label: "Lecteur", icon: Eye },
  { id: "editor", label: "Éditeur", icon: Pencil },
  { id: "advanced", label: "Avancé", icon: SlidersHorizontal, folderOnly: true },
]

const LINK_ACCESS_OPTIONS: {
  id: LinkAccessMode
  label: string
  description: string
  icon: typeof Globe
}[] = [
  {
    id: "public",
    label: "Lien public",
    description: "Toute personne disposant du lien peut consulter l'élément.",
    icon: Globe,
  },
  {
    id: "internal",
    label: "Lien interne",
    description: "Réservé aux utilisateurs inscrits et connectés.",
    icon: Users,
  },
]

function shareSectionIcon(section: ShareListSection) {
  if (section === "people") return UserRound
  if (section === "groups") return Building2
  return Link2
}

function RoleChip({ permissions }: { permissions: number }) {
  return (
    <span className="inline-flex shrink-0 items-center rounded-full bg-[#e8eaed] px-2 py-0.5 text-[11px] font-medium text-[#3c4043] dark:bg-[#3c4043] dark:text-[#e8eaed]">
      {sharePermissionsLabel(permissions)}
    </span>
  )
}

function shareTooltipLines(share: DriveShare): string[] {
  const lines: string[] = []
  const owner = shareOwnerLabel(share)
  if (owner) lines.push(`Propriétaire · ${owner}`)
  const created = formatShareDate(share.created_at)
  if (created) lines.push(`Créé le ${created}`)
  const expires = formatShareDate(share.expires_at)
  if (expires) lines.push(`Expire le ${expires}`)
  if (share.has_password) lines.push("Protégé par mot de passe")
  const url = shareLinkForCopy(share)
  if (url) lines.push(url)
  if (share.note?.trim()) lines.push(`« ${share.note.trim()} »`)
  return lines
}

function ShareEntryRow({
  share,
  onDelete,
  deleting,
}: {
  share: DriveShare
  onDelete: () => void
  deleting: boolean
}) {
  const url = shareLinkForCopy(share)
  const recipient = shareRecipientLabel(share)
  const accessLabel = shareAccessLabel(share)
  const isLink = share.share_type === NC_SHARE_TYPE.LINK
  const tooltipLines = shareTooltipLines(share)

  const copy = async () => {
    if (!url) return
    try {
      await navigator.clipboard.writeText(url)
      toast.success("Lien copié")
    } catch {
      toast.error("Impossible de copier le lien")
    }
  }

  const primaryLabel = isLink ? accessLabel : (recipient ?? accessLabel)

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <div
          className={cn(
            "group flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-[#f1f3f4] dark:hover:bg-[#3c4043]/50",
            tooltipLines.length > 0 && "cursor-default"
          )}
        >
          <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#e8f0fe] text-[#1967d2] dark:bg-[#1a377a]/50 dark:text-[#8ab4f8]">
            {isLink ? (
              <Link2 className="h-3.5 w-3.5" aria-hidden />
            ) : share.share_type === NC_SHARE_TYPE.GROUP ? (
              <Building2 className="h-3.5 w-3.5" aria-hidden />
            ) : (
              <UserRound className="h-3.5 w-3.5" aria-hidden />
            )}
          </div>

          <div className="min-w-0 flex-1">
            <p className={cn("truncate text-sm", DRIVE_TEXT_PRIMARY)}>{primaryLabel}</p>
          </div>

          {share.has_password ? (
            <Shield className="h-3.5 w-3.5 shrink-0 text-[#5f6368] dark:text-[#9aa0a6]" aria-label="Mot de passe" />
          ) : null}

          <RoleChip permissions={share.permissions} />

          <div className="flex shrink-0 items-center opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
            {url ? (
              <Button
                type="button"
                variant="ghost"
                size="icon-sm"
                className={DRIVE_BTN_GHOST}
                aria-label="Copier le lien"
                onClick={() => void copy()}
              >
                <Copy className="h-3.5 w-3.5" />
              </Button>
            ) : null}
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              className={cn(DRIVE_TEXT_SECONDARY, "hover:bg-[#fce8e6] hover:text-[#d93025] dark:hover:bg-[#5c2b29]/50")}
              aria-label="Supprimer le partage"
              disabled={deleting}
              onClick={onDelete}
            >
              {deleting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Trash2 className="h-3.5 w-3.5" />}
            </Button>
          </div>
        </div>
      </TooltipTrigger>
      {tooltipLines.length > 0 ? (
        <TooltipContent side="top" className="max-w-xs space-y-0.5 text-left">
          {tooltipLines.map((line) => (
            <p key={line} className="break-all">
              {line}
            </p>
          ))}
        </TooltipContent>
      ) : null}
    </Tooltip>
  )
}

function ActiveSharesPanel({
  shares,
  loading,
  error,
  onRetry,
  deletingShareId,
  onDeleteShare,
}: {
  shares: DriveShare[]
  loading: boolean
  error: boolean
  onRetry: () => void
  deletingShareId: string | null
  onDeleteShare: (shareId: string) => void
}) {
  const grouped = useMemo(() => groupSharesBySection(shares), [shares])
  const sectionOrder: ShareListSection[] = ["people", "groups", "links"]
  const hasShares = shares.length > 0

  if (loading) {
    return (
      <div className={cn("flex items-center gap-2 py-2 text-sm", DRIVE_TEXT_SECONDARY)}>
        <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
        Chargement…
      </div>
    )
  }

  if (error) {
    return (
      <div className="space-y-2 py-2">
        <p className={cn("text-sm", DRIVE_TEXT_PRIMARY)}>Impossible de charger les partages.</p>
        <Button type="button" variant="ghost" size="sm" className={cn(DRIVE_BTN_GHOST, "h-8 px-2 text-xs")} onClick={onRetry}>
          <RefreshCw className="h-3.5 w-3.5" aria-hidden />
          Réessayer
        </Button>
      </div>
    )
  }

  if (!hasShares) return null

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between gap-2">
        <p className={cn("text-sm font-medium", DRIVE_TEXT_PRIMARY)}>Utilisateurs avec accès</p>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className={cn(DRIVE_BTN_GHOST, "h-7 px-2 text-xs")}
          onClick={onRetry}
        >
          <RefreshCw className="h-3 w-3" aria-hidden />
        </Button>
      </div>

      <div className="max-h-44 space-y-3 overflow-y-auto pr-0.5">
        {sectionOrder.map((section) => {
          const items = grouped[section]
          if (items.length === 0) return null
          const SectionIcon = shareSectionIcon(section)
          return (
            <div key={section} className="space-y-0.5">
              <p className={cn("flex items-center gap-1 px-2 text-[11px] font-medium uppercase tracking-wide", DRIVE_TEXT_SECONDARY)}>
                <SectionIcon className="h-3 w-3" aria-hidden />
                {SHARE_SECTION_LABELS[section]}
              </p>
              {items.map((share) => (
                <ShareEntryRow
                  key={share.id}
                  share={share}
                  deleting={deletingShareId === share.id}
                  onDelete={() => onDeleteShare(share.id)}
                />
              ))}
            </div>
          )
        })}
      </div>
    </div>
  )
}

function AdvancedPermissionsPanel({
  folderPermissions,
  onFolderPermissionChange,
}: {
  folderPermissions: FolderSharePermissions
  onFolderPermissionChange: (id: FolderSharePermissionId, checked: boolean) => void
}) {
  const advancedPermissionBits = folderPermissionsToBitmask(folderPermissions)

  return (
    <div className={cn(DRIVE_PANEL_MUTED, "mt-2 space-y-2 px-3 py-2.5")}>
      {FOLDER_SHARE_PERMISSION_OPTIONS.map((option) => {
        const checkboxId = `drive-share-perm-${option.id}`
        return (
          <div key={option.id} className="flex items-center gap-2.5 py-0.5">
            <Checkbox
              id={checkboxId}
              checked={folderPermissions[option.id]}
              onCheckedChange={(value) => onFolderPermissionChange(option.id, value === true)}
            />
            <Label htmlFor={checkboxId} className={cn("cursor-pointer text-sm font-normal", DRIVE_TEXT_PRIMARY)}>
              {option.label}
            </Label>
          </div>
        )
      })}
      {!folderPermissions.viewContent && folderPermissions.addFiles ? (
        <p className={cn("border-t pt-2 text-xs leading-relaxed", DRIVE_DIALOG_DIVIDER, DRIVE_TEXT_SECONDARY)}>
          Dépôt uniquement : les visiteurs pourront ajouter des fichiers sans voir le contenu existant.
        </p>
      ) : null}
      {advancedPermissionBits === 0 ? (
        <p className="text-xs text-[#d93025]" role="alert">
          Sélectionnez au moins une autorisation.
        </p>
      ) : null}
    </div>
  )
}

function PermissionSelect({
  value,
  isFolder,
  onChange,
  className,
}: {
  value: SharePermissionMode
  isFolder: boolean
  onChange: (mode: SharePermissionMode) => void
  className?: string
}) {
  const options = PERMISSION_OPTIONS.filter((o) => isFolder || !o.folderOnly)
  const selected = options.find((o) => o.id === value) ?? options[0]

  return (
    <Select value={value} onValueChange={(v) => onChange(v as SharePermissionMode)}>
      <SelectTrigger
        size="sm"
        className={cn(
          "h-9 min-w-[132px] shrink-0 border-[#dadce0] bg-transparent px-3 text-sm shadow-none dark:border-[#5f6368]/40",
          className
        )}
      >
        <SelectValue>{selected.label}</SelectValue>
      </SelectTrigger>
      <SelectContent>
        {options.map((option) => {
          const Icon = option.icon
          return (
            <SelectItem key={option.id} value={option.id}>
              <span className="flex items-center gap-2">
                <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden />
                {option.label}
              </span>
            </SelectItem>
          )
        })}
      </SelectContent>
    </Select>
  )
}

export function ShareDialog() {
  const path = useDriveUIStore((s) => s.sharePath)
  const shareItemType = useDriveUIStore((s) => s.shareItemType)
  const setSharePath = useDriveUIStore((s) => s.setSharePath)
  const [linkAccessMode, setLinkAccessMode] = useState<LinkAccessMode>("public")
  const [permissionMode, setPermissionMode] = useState<SharePermissionMode>("viewer")
  const [folderPermissions, setFolderPermissions] = useState<FolderSharePermissions>(
    () => folderPermissionsFromRole("viewer")
  )
  const [contactEmail, setContactEmail] = useState("")
  const [contactQuery, setContactQuery] = useState("")
  const [contactNote, setContactNote] = useState("")
  const [recipientRegistered, setRecipientRegistered] = useState<boolean | null>(null)
  const [deletingShareId, setDeletingShareId] = useState<string | null>(null)

  const { data, isLoading: sharesLoading, isError: sharesError, refetch: refetchShares } = useDriveShares(
    path ?? "",
    Boolean(path)
  )
  const { createShare, deleteShare, lookupShareRecipient } = useDriveMutations()
  const lookupRecipientEmail = lookupShareRecipient.mutateAsync
  const { data: contactResults = [] } = useSearchContacts(contactQuery)

  const itemLabel = useMemo(() => (path ? shareItemLabel(path) : ""), [path])
  const isFolder = shareItemType === "directory"
  const selectedLinkAccess = LINK_ACCESS_OPTIONS.find((o) => o.id === linkAccessMode) ?? LINK_ACCESS_OPTIONS[0]
  const LinkAccessIcon = selectedLinkAccess.icon
  const showContactExtras = contactEmail.trim().length > 0
  const hasValidContactEmail = contactEmail.trim().includes("@")

  useEffect(() => {
    if (path) {
      setLinkAccessMode("public")
      setPermissionMode("viewer")
      setFolderPermissions(folderPermissionsFromRole("viewer"))
      setContactEmail("")
      setContactQuery("")
      setContactNote("")
      setRecipientRegistered(null)
    }
  }, [path])

  useEffect(() => {
    const email = contactEmail.trim().toLowerCase()
    if (!email.includes("@")) {
      setRecipientRegistered(null)
      return
    }
    const timer = window.setTimeout(() => {
      lookupRecipientEmail(email)
        .then((res) => setRecipientRegistered(res.registered))
        .catch(() => setRecipientRegistered(null))
    }, 350)
    return () => window.clearTimeout(timer)
  }, [contactEmail, lookupRecipientEmail])

  const advancedPermissionBits = folderPermissionsToBitmask(folderPermissions)
  const canCreateLink =
    !isFolder || permissionMode !== "advanced" || advancedPermissionBits > 0
  const canShareWithContact = hasValidContactEmail && canCreateLink

  const setFolderPermission = (id: FolderSharePermissionId, checked: boolean) => {
    setFolderPermissions((prev) => ({ ...prev, [id]: checked }))
  }

  const onPermissionModeChange = (nextMode: SharePermissionMode) => {
    setPermissionMode(nextMode)
    if (nextMode === "advanced") {
      setFolderPermissions(folderPermissionsFromRole(permissionMode === "editor" ? "editor" : "viewer"))
    }
  }

  const close = () => setSharePath(null, null)

  const sharePayload = () => {
    const base =
      isFolder && permissionMode === "advanced"
        ? { path: path!, permissions: advancedPermissionBits }
        : { path: path!, role: permissionMode === "editor" ? "editor" : "viewer" }
    return base
  }

  const onCreateLink = async () => {
    if (!path || !canCreateLink) return
    try {
      const share = await createShare.mutateAsync({
        ...sharePayload(),
        mode: linkAccessMode,
      })
      const link = shareLinkForCopy(share)
      if (link) {
        await navigator.clipboard.writeText(link)
        toast.success(
          linkAccessMode === "internal"
            ? "Lien interne copié"
            : "Lien public copié"
        )
      } else {
        toast.success("Partage créé")
      }
      void refetchShares()
    } catch {
      toast.error("Partage impossible")
    }
  }

  const onShareWithContact = async () => {
    if (!path || !canShareWithContact) return
    try {
      const share = await createShare.mutateAsync({
        ...sharePayload(),
        mode: "contact",
        share_with: contactEmail.trim().toLowerCase(),
        note: contactNote.trim() || undefined,
        send_mail: true,
      })

      if (share.access_mode === "user" || share.share_type === NC_SHARE_TYPE.USER) {
        toast.success("Partagé — visible dans « Partagés avec moi »")
      } else {
        toast.success("Invitation envoyée par e-mail")
      }
      setContactEmail("")
      setContactNote("")
      setContactQuery("")
      void refetchShares()
    } catch {
      toast.error("Partage impossible")
    }
  }

  const onDeleteShare = async (shareId: string) => {
    setDeletingShareId(shareId)
    try {
      await deleteShare.mutateAsync(shareId)
      toast.success("Partage supprimé")
      void refetchShares()
    } catch {
      toast.error("Suppression impossible")
    } finally {
      setDeletingShareId(null)
    }
  }

  const existingShares = data?.shares ?? []

  return (
    <TooltipProvider delayDuration={400}>
      <Dialog open={Boolean(path)} onOpenChange={(open) => !open && close()}>
        <DialogContent
          overlayClassName={DRIVE_DIALOG_OVERLAY}
          className={cn(DRIVE_DIALOG_CONTENT, "sm:max-w-[480px]")}
        >
          <DialogHeader className={cn(DRIVE_DIALOG_HEADER, "pb-4")}>
            <DialogTitle className={cn("text-base font-medium", DRIVE_TEXT_TITLE)}>
              Partager « {itemLabel} »
            </DialogTitle>
            <DialogDescription className="sr-only">
              {isFolder ? "Partager le dossier" : "Partager le fichier"} {itemLabel}
            </DialogDescription>
          </DialogHeader>

          <div className="max-h-[min(70vh,520px)] space-y-5 overflow-y-auto px-6 py-4">
            {/* Ajouter des personnes */}
            <div className="space-y-2">
              <div className="flex items-start gap-2">
                <div className="relative min-w-0 flex-1">
                  <Input
                    id="drive-share-contact-email"
                    type="email"
                    value={contactEmail}
                    onChange={(e) => {
                      setContactEmail(e.target.value)
                      setContactQuery(e.target.value)
                    }}
                    placeholder="Ajouter des personnes par e-mail"
                    autoComplete="off"
                    className={cn(DRIVE_FIELD_CLASS, "h-10 pr-3")}
                  />
                  {contactQuery.length >= 2 && contactResults.length > 0 ? (
                    <div className="absolute top-full z-10 mt-1 w-full overflow-hidden rounded-lg border border-[#dadce0] bg-white shadow-md dark:border-[#5f6368]/40 dark:bg-[#292a2d]">
                      {contactResults.slice(0, 6).map((c) =>
                        c.email ? (
                          <button
                            key={c.uid}
                            type="button"
                            className="flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left hover:bg-[#f1f3f4] dark:hover:bg-[#3c4043]/50"
                            onClick={() => {
                              setContactEmail(c.email!)
                              setContactQuery("")
                            }}
                          >
                            <span className={cn("text-sm font-medium", DRIVE_TEXT_PRIMARY)}>{c.full_name}</span>
                            <span className={cn("text-xs", DRIVE_TEXT_SECONDARY)}>{c.email}</span>
                          </button>
                        ) : null
                      )}
                    </div>
                  ) : null}
                </div>
                {showContactExtras ? (
                  <PermissionSelect
                    value={permissionMode}
                    isFolder={isFolder}
                    onChange={onPermissionModeChange}
                    className="min-w-[132px]"
                  />
                ) : null}
              </div>

              {showContactExtras ? (
                <div className="space-y-2 animate-in fade-in-0 slide-in-from-top-1 duration-150">
                  <Textarea
                    id="drive-share-contact-note"
                    value={contactNote}
                    onChange={(e) => setContactNote(e.target.value)}
                    placeholder="Message (optionnel)"
                    rows={2}
                    className={DRIVE_TEXTAREA_CLASS}
                  />
                  {recipientRegistered === true ? (
                    <p className="flex items-center gap-1.5 text-xs text-[#188038] dark:text-[#81c995]">
                      <UserRound className="h-3 w-3" aria-hidden />
                      Compte inscrit — partage direct
                    </p>
                  ) : recipientRegistered === false ? (
                    <p className={cn("flex items-center gap-1.5 text-xs", DRIVE_TEXT_SECONDARY)}>
                      <Mail className="h-3 w-3" aria-hidden />
                      Invitation par e-mail avec lien public
                    </p>
                  ) : null}
                  {isFolder && permissionMode === "advanced" ? (
                    <AdvancedPermissionsPanel
                      folderPermissions={folderPermissions}
                      onFolderPermissionChange={setFolderPermission}
                    />
                  ) : null}
                </div>
              ) : null}
            </div>

            <ActiveSharesPanel
              shares={existingShares}
              loading={sharesLoading}
              error={sharesError}
              onRetry={() => void refetchShares()}
              deletingShareId={deletingShareId}
              onDeleteShare={(shareId) => void onDeleteShare(shareId)}
            />

            {/* Accès général */}
            <div className={cn("space-y-2", existingShares.length > 0 && "border-t pt-4")}>
              <p className={cn("text-sm font-medium", DRIVE_TEXT_PRIMARY)}>Accès général</p>
              <div className="flex items-start gap-3">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#e6f4ea] text-[#188038] dark:bg-[#1e3a2f]/50 dark:text-[#81c995]">
                  <LinkAccessIcon className="h-4 w-4" aria-hidden />
                </div>
                <div className="min-w-0 flex-1 space-y-0.5">
                  <Select value={linkAccessMode} onValueChange={(v) => setLinkAccessMode(v as LinkAccessMode)}>
                    <SelectTrigger
                      variant="ghost"
                      size="sm"
                      className="h-auto w-full justify-start gap-1 p-0 text-sm font-medium"
                    >
                      <SelectValue>{selectedLinkAccess.label}</SelectValue>
                    </SelectTrigger>
                    <SelectContent>
                      {LINK_ACCESS_OPTIONS.map((option) => {
                        const Icon = option.icon
                        return (
                          <SelectItem key={option.id} value={option.id}>
                            <span className="flex items-center gap-2">
                              <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden />
                              {option.label}
                            </span>
                          </SelectItem>
                        )
                      })}
                    </SelectContent>
                  </Select>
                  <p className={cn("text-xs leading-relaxed", DRIVE_TEXT_SECONDARY)}>
                    {selectedLinkAccess.description}
                  </p>
                </div>
                {!showContactExtras ? (
                  <PermissionSelect
                    value={permissionMode}
                    isFolder={isFolder}
                    onChange={onPermissionModeChange}
                    className="min-w-[132px]"
                  />
                ) : null}
              </div>

              {!showContactExtras && isFolder && permissionMode === "advanced" ? (
                <AdvancedPermissionsPanel
                  folderPermissions={folderPermissions}
                  onFolderPermissionChange={setFolderPermission}
                />
              ) : null}
            </div>
          </div>

          <DialogFooter className={cn(DRIVE_DIALOG_FOOTER, "justify-between sm:justify-between")}>
            <Button
              type="button"
              variant="outline"
              className={cn(
                "rounded-full border-[#dadce0] bg-white text-sm font-medium text-[#1a73e8] hover:bg-[#f8f9fa] dark:border-[#5f6368]/40 dark:bg-transparent dark:text-[#8ab4f8] dark:hover:bg-[#3c4043]/50"
              )}
              disabled={createShare.isPending || !canCreateLink}
              onClick={() => void onCreateLink()}
            >
              {createShare.isPending && !showContactExtras ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Link2 className="h-4 w-4" />
              )}
              Copier le lien
            </Button>

            <div className="flex gap-2">
              {showContactExtras ? (
                <Button
                  type="button"
                  className={cn(DRIVE_BTN_PRIMARY, "rounded-full px-6")}
                  disabled={createShare.isPending || !canShareWithContact}
                  onClick={() => void onShareWithContact()}
                >
                  {createShare.isPending ? (
                    <>
                      <Loader2 className="h-4 w-4 animate-spin" />
                      Envoi…
                    </>
                  ) : (
                    <>
                      <Mail className="h-4 w-4" />
                      Partager
                    </>
                  )}
                </Button>
              ) : null}
              <Button
                type="button"
                className={cn(DRIVE_BTN_PRIMARY, "rounded-full px-6")}
                onClick={close}
              >
                {showContactExtras ? "Annuler" : "Terminé"}
              </Button>
            </div>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </TooltipProvider>
  )
}