stadtwerke/innungsapp/apps/admin/app/dashboard/news/neu/page.tsx

'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { trpc } from '@/lib/trpc-client'
import { getTrpcErrorMessage } from '@/lib/trpc-error'
import Link from 'next/link'
import dynamic from 'next/dynamic'

const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false })

const KATEGORIEN = [
  { value: 'Wichtig', label: 'Wichtig' },
  { value: 'Pruefung', label: 'Prüfung' },
  { value: 'Foerderung', label: 'Förderung' },
  { value: 'Veranstaltung', label: 'Veranstaltung' },
  { value: 'Allgemein', label: 'Allgemein' },
]

export default function NewsNeuPage() {
  const router = useRouter()
  const [title, setTitle] = useState('')
  const [body, setBody] = useState('## Inhalt\n\nHier können Sie Ihren Beitrag verfassen.')
  const [kategorie, setKategorie] = useState('Allgemein')
  const [uploading, setUploading] = useState(false)
  const [attachments, setAttachments] = useState<
    Array<{ name: string; storagePath: string; sizeBytes: number; url: string }>
  >([])

  const createMutation = trpc.news.create.useMutation({
    onSuccess: () => router.push('/dashboard/news'),
  })

  function handleSubmit(publishNow: boolean) {
    if (!title.trim() || !body.trim()) return
    createMutation.mutate({
      title,
      body,
      kategorie: kategorie as never,
      publishedAt: publishNow ? new Date().toISOString() : null,
    })
  }

  async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return
    setUploading(true)
    const formData = new FormData()
    formData.append('file', file)
    try {
      const res = await fetch('/api/upload', { method: 'POST', body: formData })
      const data = await res.json()
      setAttachments((prev) => [...prev, data])
    } catch {
      alert('Upload fehlgeschlagen')
    } finally {
      setUploading(false)
    }
  }

  return (
    <div className="max-w-4xl space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/dashboard/news" className="text-gray-400 hover:text-gray-600">
          ← Zurück
        </Link>
        <h1 className="text-2xl font-bold text-gray-900">Beitrag erstellen</h1>
      </div>

      <div className="bg-white rounded-xl border shadow-sm p-6 space-y-4">
        <div className="grid grid-cols-3 gap-4">
          <div className="col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
            <input
              required
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="Aussagekräftiger Titel..."
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
            <select
              value={kategorie}
              onChange={(e) => setKategorie(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
            >
              {KATEGORIEN.map((k) => (
                <option key={k.value} value={k.value}>{k.label}</option>
              ))}
            </select>
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Inhalt *</label>
          <div data-color-mode="light">
            <MDEditor
              value={body}
              onChange={(v) => setBody(v ?? '')}
              height={400}
              preview="live"
            />
          </div>
        </div>

        {/* Attachments */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Anhänge (PDF)</label>
          <label className="cursor-pointer inline-flex items-center gap-2 px-4 py-2 border border-dashed border-gray-300 rounded-lg text-sm text-gray-500 hover:border-brand-500 hover:text-brand-500 transition-colors">
            {uploading ? '⏳ Hochladen...' : '📎 Datei anhängen'}
            <input
              type="file"
              accept=".pdf,image/*"
              onChange={handleFileUpload}
              disabled={uploading}
              className="hidden"
            />
          </label>
          {attachments.length > 0 && (
            <ul className="mt-2 space-y-1">
              {attachments.map((a, i) => (
                <li key={i} className="flex items-center gap-2 text-sm text-gray-600">
                  <span>📄</span>
                  <span>{a.name}</span>
                  <span className="text-gray-400">({Math.round(a.sizeBytes / 1024)} KB)</span>
                </li>
              ))}
            </ul>
          )}
        </div>

        {createMutation.error && (
          <p className="text-sm text-red-600 bg-red-50 px-4 py-2 rounded-lg">
            {getTrpcErrorMessage(createMutation.error)}
          </p>
        )}

        <div className="flex gap-3 pt-2 border-t">
          <button
            onClick={() => handleSubmit(true)}
            disabled={createMutation.isPending}
            className="bg-brand-500 text-white px-6 py-2 rounded-lg text-sm font-medium hover:bg-brand-600 disabled:opacity-60 transition-colors"
          >
            Jetzt publizieren
          </button>
          <button
            onClick={() => handleSubmit(false)}
            disabled={createMutation.isPending}
            className="px-6 py-2 rounded-lg text-sm font-medium text-gray-700 border hover:bg-gray-50 transition-colors"
          >
            Als Entwurf speichern
          </button>
        </div>
      </div>
    </div>
  )
}