"use client"

import { Pencil } from "lucide-react"
import { cn } from "@/lib/utils"
import { useComposeActions } from "@/lib/compose-context"
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
import { Button } from "@/components/ui/button"
import { Icon } from "@iconify/react"
import { UltiMailLogo } from "@/components/ultimail-logo"

export function SidebarHeader({
  splitView,
  isExpanded,
  panelSurfaceClass,
  splitViewLogoHeaderClass,
  splitViewLogoIconClass,
  touchNav,
}: {
  splitView: boolean
  isExpanded: boolean
  panelSurfaceClass: string
  splitViewLogoHeaderClass: string
  splitViewLogoIconClass: string
  touchNav: boolean
}) {
  const { openCompose } = useComposeActions()

  return (
    <>
      <div
        className={cn(
          "flex shrink-0 items-center",
          panelSurfaceClass,
          splitView
            ? cn(
                splitViewLogoHeaderClass,
                isExpanded ? "justify-between" : "justify-start"
              )
            : "justify-between px-4 pt-4 pb-4 sm:hidden"
        )}
      >
        {splitView && !isExpanded ? (
          <UltiMailLogo variant="mark" className={splitViewLogoIconClass} />
        ) : (
          <>
            <UltiMailLogo
              className={cn(
                "shrink-0",
                splitView
                  ? "max-w-[140px] gap-4 [&_img]:size-9"
                  : "min-h-8"
              )}
            />
            {(splitView || touchNav) && isExpanded && (
              <Button
                variant="ghost"
                size="icon"
                className="size-9 shrink-0 text-gray-600"
                aria-label="Réglages"
                onClick={() =>
                  useMailSettingsStore.getState().setQuickSettingsOpen(true)
                }
              >
                <Icon icon="mdi:cog" className="size-5 shrink-0" aria-hidden />
              </Button>
            )}
          </>
        )}
      </div>

      <div
        className={cn(
          "hidden shrink-0 z-10 pt-1 pl-2 max-sm:pb-3 sm:pb-0 sm:flex",
          panelSurfaceClass,
          isExpanded ? "pr-3.5" : "pr-2",
          splitView && "!hidden"
        )}
      >
        <button
          type="button"
          title={!isExpanded ? "Nouveau message" : undefined}
          aria-label={!isExpanded ? "Nouveau message" : undefined}
          onClick={openCompose}
          className={cn(
            "inline-flex h-[52px] min-w-0 shrink-0 cursor-pointer items-center rounded-2xl border border-border bg-mail-surface text-sm font-medium text-foreground shadow-sm outline-none transition-[box-shadow,background-color,border-color,color] duration-200 hover:bg-accent hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0",
            isExpanded
              ? "w-auto max-w-full justify-start gap-3 self-start pl-4 pr-8"
              : "w-[52px] justify-center px-0 py-0"
          )}
        >
          <Pencil className="size-5 shrink-0" />
          {isExpanded && (
            <span className="min-w-0 truncate text-sm font-medium">
              Nouveau message
            </span>
          )}
        </button>
      </div>
    </>
  )
}