PnvPanel/frontend/src/features/admin/news/NewsFormDialog.tsx

import { useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { toast } from '@/shared/ui/toast-store'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/shared/ui/dialog'
import { Button } from '@/shared/ui/button'
import { Input } from '@/shared/ui/input'
import { Label } from '@/shared/ui/label'
import { Textarea } from '@/shared/ui/textarea'
import { HttpError } from '@/shared/api/client'
import type { NewsPostDto } from '@/shared/api/types'
import { createPost, updatePost } from './api'

export function NewsFormDialog({
  post,
  open,
  onOpenChange,
}: {
  post?: NewsPostDto
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {
  const { t } = useTranslation()
  const queryClient = useQueryClient()
  const [internalOpen, setInternalOpen] = useState(false)
  const [title, setTitle] = useState(post?.title ?? '')
  const [body, setBody] = useState(post?.body ?? '')
  const [previewMode, setPreviewMode] = useState(false)

  const isControlled = open !== undefined
  const dialogOpen = isControlled ? open : internalOpen
  const setDialogOpen = isControlled ? onOpenChange! : setInternalOpen

  const mutation = useMutation({
    mutationFn: () => (post ? updatePost(post.id, title.trim(), body.trim()) : createPost(title.trim(), body.trim())),
    onSuccess: async () => {
      toast.success(post ? t('admin.news.updated') : t('admin.news.created'))
      await queryClient.invalidateQueries({ queryKey: ['admin-news'] })
      setDialogOpen(false)
    },
    onError: (error) => toast.error(error instanceof HttpError ? error.detail : t('auth.genericError')),
  })

  const canSubmit = title.trim() && body.trim()

  return (
    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
      {!isControlled && (
        <DialogTrigger asChild>
          <Button size="sm">{t('admin.news.create')}</Button>
        </DialogTrigger>
      )}
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{post ? post.title : t('admin.news.create')}</DialogTitle>
        </DialogHeader>
        <form
          className="flex flex-col gap-4"
          onSubmit={(e) => {
            e.preventDefault()
            if (canSubmit) mutation.mutate()
          }}
        >
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="newsTitle">{t('admin.news.title')}</Label>
            <Input id="newsTitle" value={title} onChange={(e) => setTitle(e.target.value)} required />
          </div>
          <div className="flex flex-col gap-1.5">
            <div className="flex items-center justify-between">
              <Label htmlFor="newsBody">{t('admin.news.body')}</Label>
              <Button type="button" size="sm" variant="ghost" onClick={() => setPreviewMode((v) => !v)}>
                {t('admin.news.preview')}
              </Button>
            </div>
            {previewMode ? (
              <div className="flex min-h-32 flex-col gap-2 rounded-md border border-border px-3 py-2 text-sm [&_a]:text-primary [&_a]:hover:underline [&_li]:ml-4 [&_ul]:list-disc [&_ol]:list-decimal">
                <ReactMarkdown remarkPlugins={[remarkGfm]}>{body || t('admin.news.body')}</ReactMarkdown>
              </div>
            ) : (
              <Textarea id="newsBody" value={body} onChange={(e) => setBody(e.target.value)} required />
            )}
          </div>
          <Button type="submit" disabled={!canSubmit || mutation.isPending}>
            {post ? t('admin.roles.save') : t('admin.news.create')}
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  )
}