"use client"

import { Clock, Mail, Search } from "lucide-react"
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { getMailNavFolderLabel } from "@/lib/sidebar-nav-data"
import type { SearchParams } from "@/lib/mail-search/search-params"

export type EmailListEmptyProps = {
  variant: "scheduled" | "search" | "folder" | "split-pane"
  selectedFolder?: string
  inboxCategoryTabLabel?: string
  folderIdToLabel?: Record<string, string>
  searchParams?: SearchParams | null
}

export function EmailListEmpty({
  variant,
  selectedFolder = "inbox",
  inboxCategoryTabLabel = "",
  folderIdToLabel = {},
  searchParams = null,
}: EmailListEmptyProps) {
  if (variant === "scheduled") {
    return (
      <div className="flex min-h-[220px] flex-col items-center justify-center px-4 py-12 text-center">
        <p className="text-sm text-[#5f6368]">Aucun message planifié.</p>
      </div>
    )
  }

  if (variant === "search" && searchParams) {
    return (
      <Empty className="min-h-[240px] flex-1 border-0 bg-mail-surface py-10 shadow-none">
        <EmptyHeader className="max-w-md">
          <EmptyMedia
            variant="icon"
            className="mb-1 border-0 bg-[#f1f3f4] text-[#5f6368] [&_svg]:size-6"
          >
            <Search className="size-6" strokeWidth={1.5} aria-hidden />
          </EmptyMedia>
          <EmptyTitle className="text-[15px] font-medium text-[#3c4043]">
            Aucun résultat
          </EmptyTitle>
          <EmptyDescription className="text-[13px] text-[#5f6368]">
            Pas de résultats pour{" "}
            <span className="font-medium text-[#3c4043]">
              {searchParams.q || searchParams.hasWords || searchParams.from || searchParams.subject || "votre recherche"}
            </span>
            {(searchParams.has.length > 0 || searchParams.within || searchParams.from || searchParams.to || searchParams.subject) ? (
              <> avec les filtres choisis</>
            ) : null}
            .
          </EmptyDescription>
        </EmptyHeader>
      </Empty>
    )
  }

  if (variant === "split-pane") {
    return (
      <Empty className="min-h-[240px] flex-1 border-0 bg-mail-surface py-10 shadow-none">
        <EmptyHeader className="max-w-md">
          <EmptyMedia
            variant="icon"
            className="mb-1 border-0 bg-[#f1f3f4] text-[#5f6368] [&_svg]:size-6"
          >
            <Mail className="size-6" strokeWidth={1.5} aria-hidden />
          </EmptyMedia>
          <EmptyTitle className="text-[15px] font-medium text-[#3c4043]">
            Aucun message sélectionné
          </EmptyTitle>
          <EmptyDescription className="text-[13px] text-[#5f6368]">
            Choisissez un message dans la liste ou ouvrez une boîte contenant des messages.
          </EmptyDescription>
        </EmptyHeader>
      </Empty>
    )
  }

  return (
    <Empty className="min-h-[240px] flex-1 border-0 bg-mail-surface py-10 shadow-none">
      <EmptyHeader className="max-w-md">
        <EmptyMedia
          variant="icon"
          className="mb-1 border-0 bg-[#f1f3f4] text-[#5f6368] [&_svg]:size-6"
        >
          <Mail className="size-6" strokeWidth={1.5} aria-hidden />
        </EmptyMedia>
        <EmptyTitle className="text-[15px] font-medium text-[#3c4043]">
          Aucun message
        </EmptyTitle>
        <EmptyDescription className="text-[13px] text-[#5f6368]">
          {selectedFolder === "inbox" ? (
            <>
              Aucun message dans l&apos;onglet{" "}
              <span className="font-medium text-[#3c4043]">
                {inboxCategoryTabLabel}
              </span>{" "}
              de la boîte de réception.
            </>
          ) : (
            <>
              Aucun message dans{" "}
              <span className="font-medium text-[#3c4043]">
                {getMailNavFolderLabel(selectedFolder, folderIdToLabel)}
              </span>
              .
            </>
          )}
        </EmptyDescription>
      </EmptyHeader>
    </Empty>
  )
}

export function EmailListScheduledBanner() {
  return (
    <div className="flex shrink-0 items-start gap-3 border-b border-[#eceff1] bg-[#f8f9fa] px-4 py-3">
      <Clock
        className="h-5 w-5 shrink-0 text-[#5f6368]"
        strokeWidth={1.5}
        aria-hidden
      />
      <p className="text-sm leading-snug text-[#3c4043]">
        Les messages de la liste «&nbsp;Envois programmés&nbsp;» seront envoyés à l&apos;heure prévue pour chacun d&apos;eux.
      </p>
    </div>
  )
}