'use client'

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { CheckCheck } from 'lucide-react'
import { toast } from 'sonner'
import { api, type NotificationItem } from '@/lib/api'
import { Button } from '@/components/ui/Button'
import { Badge } from '@/components/ui/Badge'

export function NotificationsPage() {
  const { t } = useTranslation()
  const queryClient = useQueryClient()

  const { data, isLoading } = useQuery({
    queryKey: ['notifications'],
    queryFn: () =>
      api.get<{ data: NotificationItem[]; meta: { unread_count: number } }>('/notifications'),
  })

  const markRead = useMutation({
    mutationFn: (id: number) => api.post(`/notifications/${id}/read`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['notifications'] }),
  })

  const markAll = useMutation({
    mutationFn: () => api.post('/notifications/read-all'),
    onSuccess: () => {
      toast.success(t('notifications.messages.allRead'))
      queryClient.invalidateQueries({ queryKey: ['notifications'] })
    },
  })

  const rows = data?.data.data ?? []
  const unread = data?.data.meta?.unread_count ?? 0

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="premium-heading text-2xl font-bold">{t('notifications.title')}</h1>
          <p className="mt-1 text-sm text-[var(--premium-muted-text)]">
            {t('notifications.unreadCount', { count: unread })}
          </p>
        </div>
        <Button size="sm" variant="secondary" onClick={() => markAll.mutate()} disabled={!unread}>
          <CheckCheck size={14} />
          {t('notifications.markAllRead')}
        </Button>
      </div>

      <div className="animate-fade-in-up stagger-1 space-y-2">
        {isLoading ? (
          <div className="premium-card rounded-2xl p-6 text-sm text-[var(--premium-muted-text)]">
            {t('common.loading')}
          </div>
        ) : rows.length === 0 ? (
          <div className="premium-card rounded-2xl p-6 text-sm text-[var(--premium-muted-text)]">
            {t('common.noResults')}
          </div>
        ) : (
          rows.map((n) => (
            <button
              key={n.id}
              type="button"
              onClick={() => !n.read_at && markRead.mutate(n.id)}
              className={`premium-card w-full rounded-2xl p-4 text-left transition hover:border-brand-400/40 ${
                n.read_at ? 'opacity-70' : ''
              }`}
            >
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="font-semibold text-[var(--premium-text)]">{n.title}</div>
                  {n.body ? (
                    <p className="mt-1 text-sm text-[var(--premium-muted-text)]">{n.body}</p>
                  ) : null}
                  <p className="mt-2 text-xs text-[var(--premium-label)]">
                    {new Date(n.created_at).toLocaleString()}
                  </p>
                </div>
                {!n.read_at ? <Badge variant="success">{t('notifications.unread')}</Badge> : null}
              </div>
            </button>
          ))
        )}
      </div>
    </div>
  )
}