'use client'

import { useTransition } from 'react'
import { LayoutGrid, PanelsTopLeft } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { updateAISettings } from '@/app/actions/ai-settings'
import { useLanguage } from '@/lib/i18n'
import type { NotesViewMode } from '@/components/notes-main-section'

interface NotesViewToggleProps {
  mode: NotesViewMode
  onModeChange: (mode: NotesViewMode) => void
  className?: string
}

export function NotesViewToggle({ mode, onModeChange, className }: NotesViewToggleProps) {
  const { t, language } = useLanguage()
  const [pending, startTransition] = useTransition()

  const setMode = (next: NotesViewMode) => {
    if (next === mode) return
    const previous = mode
    onModeChange(next)
    startTransition(async () => {
      try {
        await updateAISettings({ notesViewMode: next })
      } catch {
        onModeChange(previous)
      }
    })
  }

  return (
    <TooltipProvider delayDuration={300}>
      <div
        dir={language === 'fa' || language === 'ar' ? 'rtl' : 'ltr'}
        className={cn(
          'inline-flex rounded-full border border-border bg-muted/40 p-0.5 shadow-sm',
          className
        )}
        role="group"
        aria-label={t('notes.viewModeGroup')}
      >
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              disabled={pending}
              className={cn(
                'h-9 rounded-full px-3 gap-1.5',
                mode === 'masonry' && 'bg-background shadow-sm text-foreground'
              )}
              onClick={() => setMode('masonry')}
              aria-pressed={mode === 'masonry'}
            >
              <LayoutGrid className="h-4 w-4" aria-hidden />
              <span className="hidden sm:inline text-xs font-medium">{t('notes.viewCards')}</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent side="bottom">{t('notes.viewCardsTooltip')}</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              disabled={pending}
              className={cn(
                'h-9 rounded-full px-3 gap-1.5',
                mode === 'tabs' && 'bg-background shadow-sm text-foreground'
              )}
              onClick={() => setMode('tabs')}
              aria-pressed={mode === 'tabs'}
            >
              <PanelsTopLeft className="h-4 w-4" aria-hidden />
              <span className="hidden sm:inline text-xs font-medium">{t('notes.viewTabs')}</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent side="bottom">{t('notes.viewTabsTooltip')}</TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}