Keep/keep-notes/components/notification-panel.tsx

'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Bell, Check, X, Clock, User } from 'lucide-react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { getPendingShareRequests, respondToShareRequest, removeSharedNoteFromView } from '@/app/actions/notes'
import { toast } from 'sonner'
import { useNoteRefresh } from '@/context/NoteRefreshContext'
import { cn } from '@/lib/utils'

interface ShareRequest {
  id: string
  status: string
  permission: string
  createdAt: Date
  note: {
    id: string
    title: string | null
    content: string
    color: string
    createdAt: Date
  }
  sharer: {
    id: string
    name: string | null
    email: string
    image: string | null
  }
}

export function NotificationPanel() {
  const router = useRouter()
  const { triggerRefresh } = useNoteRefresh()
  const [requests, setRequests] = useState<ShareRequest[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [pendingCount, setPendingCount] = useState(0)

  const loadRequests = async () => {
    setIsLoading(true)
    try {
      const data = await getPendingShareRequests()
      setRequests(data)
      setPendingCount(data.length)
    } catch (error: any) {
      console.error('Failed to load share requests:', error)
    } finally {
      setIsLoading(false)
    }
  }

  useEffect(() => {
    loadRequests()
    const interval = setInterval(loadRequests, 10000)
    return () => clearInterval(interval)
  }, [])

  const handleAccept = async (shareId: string) => {
    console.log('[NOTIFICATION] Accepting share:', shareId)
    try {
      await respondToShareRequest(shareId, 'accept')
      console.log('[NOTIFICATION] Share accepted, calling router.refresh()')
      router.refresh()
      console.log('[NOTIFICATION] Calling triggerRefresh()')
      triggerRefresh()
      setRequests(prev => prev.filter(r => r.id !== shareId))
      setPendingCount(prev => prev - 1)
      toast.success('Note shared successfully!', {
        description: 'The note now appears in your list',
        duration: 3000,
      })
      console.log('[NOTIFICATION] Done! Note should appear now')
    } catch (error: any) {
      console.error('[NOTIFICATION] Error:', error)
      toast.error(error.message || 'Error')
    }
  }

  const handleDecline = async (shareId: string) => {
    console.log('[NOTIFICATION] Declining share:', shareId)
    try {
      await respondToShareRequest(shareId, 'decline')
      router.refresh()
      triggerRefresh()
      setRequests(prev => prev.filter(r => r.id !== shareId))
      setPendingCount(prev => prev - 1)
      toast.info('Share declined')
    } catch (error: any) {
      console.error('[NOTIFICATION] Error:', error)
      toast.error(error.message || 'Error')
    }
  }

  const handleRemove = async (shareId: string) => {
    try {
      await removeSharedNoteFromView(shareId)
      router.refresh()
      triggerRefresh()
      setRequests(prev => prev.filter(r => r.id !== shareId))
      toast.info('Request hidden')
    } catch (error: any) {
      toast.error(error.message || 'Error')
    }
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className="relative h-9 w-9 p-0 hover:bg-accent/50 transition-all duration-200"
        >
          <Bell className="h-4 w-4 transition-transform duration-200 hover:scale-110" />
          {pendingCount > 0 && (
            <Badge
              variant="destructive"
              className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs animate-pulse shadow-lg"
            >
              {pendingCount > 9 ? '9+' : pendingCount}
            </Badge>
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-80">
        <div className="px-4 py-3 border-b bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Bell className="h-4 w-4 text-blue-600 dark:text-blue-400" />
              <span className="font-semibold text-sm">Pending Shares</span>
            </div>
            {pendingCount > 0 && (
              <Badge className="bg-blue-600 hover:bg-blue-700 text-white shadow-md">
                {pendingCount}
              </Badge>
            )}
          </div>
        </div>

        {isLoading ? (
          <div className="p-6 text-center text-sm text-muted-foreground">
            <div className="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full mx-auto mb-2" />
            Loading...
          </div>
        ) : requests.length === 0 ? (
          <div className="p-6 text-center text-sm text-muted-foreground">
            <Bell className="h-10 w-10 mx-auto mb-3 opacity-30" />
            <p className="font-medium">No pending share requests</p>
          </div>
        ) : (
          <div className="max-h-96 overflow-y-auto">
            {requests.map((request) => (
              <div
                key={request.id}
                className="p-4 border-b last:border-0 hover:bg-accent/50 transition-colors duration-150"
              >
                <div className="flex items-start gap-3 mb-3">
                  <div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-semibold text-xs shadow-md">
                    {(request.sharer.name || request.sharer.email)[0].toUpperCase()}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-semibold truncate">
                      {request.sharer.name || request.sharer.email}
                    </p>
                    <p className="text-xs text-muted-foreground truncate mt-0.5">
                      shared &quot;{request.note.title || 'Untitled'}&quot;
                    </p>
                  </div>
                  <Badge
                    variant="secondary"
                    className="text-xs capitalize bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 border-0"
                  >
                    {request.permission}
                  </Badge>
                </div>

                <div className="flex gap-2 mt-3">
                  <button
                    onClick={() => handleAccept(request.id)}
                    className={cn(
                      "flex-1 h-9 px-4 text-xs font-semibold rounded-lg",
                      "bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700",
                      "text-white shadow-md hover:shadow-lg",
                      "transition-all duration-200",
                      "flex items-center justify-center gap-1.5",
                      "active:scale-95"
                    )}
                  >
                    <Check className="h-3.5 w-3.5" />
                    YES
                  </button>
                  <button
                    onClick={() => handleDecline(request.id)}
                    className={cn(
                      "flex-1 h-9 px-4 text-xs font-semibold rounded-lg",
                      "bg-white dark:bg-gray-800",
                      "border-2 border-gray-200 dark:border-gray-700",
                      "text-gray-700 dark:text-gray-300",
                      "hover:bg-gray-50 dark:hover:bg-gray-700",
                      "hover:border-gray-300 dark:hover:border-gray-600",
                      "transition-all duration-200",
                      "flex items-center justify-center gap-1.5",
                      "active:scale-95"
                    )}
                  >
                    <X className="h-3.5 w-3.5" />
                    NO
                  </button>
                </div>

                <div className="flex items-center gap-1.5 mt-3 text-xs text-muted-foreground">
                  <Clock className="h-3 w-3" />
                  <span>{new Date(request.createdAt).toLocaleDateString()}</span>
                  <button
                    onClick={() => handleRemove(request.id)}
                    className="ml-auto text-muted-foreground hover:text-foreground transition-colors duration-150"
                  >
                    Hide
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}