"use client"

import { LayoutGrid } from "lucide-react"
import { AgendaMark } from "@/components/suite/agenda-mark"
import type { AutomationDomain } from "@/lib/mail-automation/domains"
import { AUTOMATION_DOMAIN_LABELS } from "@/lib/mail-automation/domains"
import { suitePublicAsset } from "@/lib/suite/suite-public-asset"
import { cn } from "@/lib/utils"

export const AUTOMATION_DOMAIN_MARK_SRC: Record<AutomationDomain, string> = {
  mail: suitePublicAsset("/ultimail-mark.svg"),
  drive: suitePublicAsset("/ultidrive-mark.svg"),
  contacts: suitePublicAsset("/contacts-mark.svg"),
  agenda: suitePublicAsset("/agenda-mark.svg"),
}

export function AutomationDomainMark({
  domain,
  className,
  alt,
}: {
  domain: AutomationDomain
  className?: string
  alt?: string
}) {
  const label = alt ?? AUTOMATION_DOMAIN_LABELS[domain]

  if (domain === "agenda") {
    return <AgendaMark className={cn("shrink-0 object-contain", className)} alt={label} />
  }

  return (
    <img
      src={AUTOMATION_DOMAIN_MARK_SRC[domain]}
      alt={label}
      className={cn("shrink-0 object-contain", className)}
      draggable={false}
    />
  )
}

export function AutomationDomainMarks({
  domains,
  className,
  markClassName = "size-5",
}: {
  domains: AutomationDomain[]
  className?: string
  markClassName?: string
}) {
  if (domains.length === 0) return null
  return (
    <div className={cn("flex shrink-0 items-center gap-1", className)}>
      {domains.map((domain) => (
        <AutomationDomainMark
          key={domain}
          domain={domain}
          className={markClassName}
          alt=""
        />
      ))}
    </div>
  )
}

export function AutomationDomainFilterTab({
  active,
  onClick,
  domain,
  label,
}: {
  active: boolean
  onClick: () => void
  domain: AutomationDomain | "all"
  label: string
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs transition-colors",
        active
          ? "border-primary bg-primary/10 text-primary"
          : "border-border bg-background text-muted-foreground hover:bg-muted"
      )}
    >
      {domain === "all" ? (
        <LayoutGrid className="size-4 shrink-0 opacity-80" aria-hidden />
      ) : (
        <AutomationDomainMark domain={domain} className="size-4" alt="" />
      )}
      <span>{label}</span>
    </button>
  )
}