"use client"

import type { ReactNode } from "react"
import { Clock } from "lucide-react"
import {
  ContextMenuItem,
  ContextMenuSeparator,
} from "@/components/ui/context-menu"
import {
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import type { MoveTarget } from "@/components/gmail/move-to-menu-items"

export type MoveToTargets = {
  recents: MoveTarget[]
  system: MoveTarget[]
  folders: MoveTarget[]
}

function MoveToSectionHeader({ children }: { children: ReactNode }) {
  return (
    <div className="px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
      {children}
    </div>
  )
}

export function MoveToDropdownItems({
  targets,
  onMoveTo,
}: {
  targets: MoveToTargets
  onMoveTo: (targetId: string) => void
}) {
  return (
    <>
      {targets.recents.length > 0 && (
        <>
          <MoveToSectionHeader>Récents</MoveToSectionHeader>
          {targets.recents.map((t) => (
            <DropdownMenuItem key={`recent-${t.id}`} onSelect={() => onMoveTo(t.id)}>
              <span className="flex items-center gap-2">
                {t.icon}
                <Clock className="size-3 shrink-0 text-muted-foreground/80" strokeWidth={1.5} />
              </span>
              {t.label}
            </DropdownMenuItem>
          ))}
          <DropdownMenuSeparator />
        </>
      )}
      {targets.system.map((t) => (
        <DropdownMenuItem key={t.id} onSelect={() => onMoveTo(t.id)}>
          {t.icon}
          {t.label}
        </DropdownMenuItem>
      ))}
      {targets.folders.length > 0 && (
        <>
          <DropdownMenuSeparator />
          <MoveToSectionHeader>Dossiers</MoveToSectionHeader>
          {targets.folders.map((t) => (
            <DropdownMenuItem
              key={t.id}
              onSelect={() => onMoveTo(t.id)}
              style={{ paddingLeft: `${12 + t.depth * 16}px` }}
            >
              {t.icon}
              {t.label}
            </DropdownMenuItem>
          ))}
        </>
      )}
    </>
  )
}

export function MoveToContextMenuItems({
  targets,
  onMoveTo,
}: {
  targets: MoveToTargets
  onMoveTo: (targetId: string) => void
}) {
  return (
    <>
      {targets.recents.length > 0 && (
        <>
          <MoveToSectionHeader>Récents</MoveToSectionHeader>
          {targets.recents.map((t) => (
            <ContextMenuItem key={`recent-${t.id}`} onSelect={() => onMoveTo(t.id)}>
              <span className="flex items-center gap-2">
                {t.icon}
                <Clock className="size-3 shrink-0 text-muted-foreground/80" strokeWidth={1.5} />
              </span>
              {t.label}
            </ContextMenuItem>
          ))}
          <ContextMenuSeparator />
        </>
      )}
      {targets.system.map((t) => (
        <ContextMenuItem key={t.id} onSelect={() => onMoveTo(t.id)}>
          {t.icon}
          {t.label}
        </ContextMenuItem>
      ))}
      {targets.folders.length > 0 && (
        <>
          <ContextMenuSeparator />
          <MoveToSectionHeader>Dossiers</MoveToSectionHeader>
          {targets.folders.map((t) => (
            <ContextMenuItem
              key={t.id}
              onSelect={() => onMoveTo(t.id)}
              style={{ paddingLeft: `${12 + t.depth * 16}px` }}
            >
              {t.icon}
              {t.label}
            </ContextMenuItem>
          ))}
        </>
      )}
    </>
  )
}