'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import { 
  FileText, 
  Briefcase, 
  Mail, 
  Facebook, 
  Twitter, 
  Instagram, 
  Linkedin,
  Menu,
  X,
  Zap,
  FileSignature,
  Receipt,
  UserCircle,
  ChevronRight,
  Calendar,
  Plus,
  Pencil,
  Trash2,
  KeyRound
} from 'lucide-react'

// Article type
interface Article {
  id: string
  title: string
  slug: string
  excerpt: string
  content: string
  category: string
  image: string
  createdAt: string
}

// Navigation items (removed Tentang and Kontak)
const navItems = [
  { name: 'Beranda', href: '#beranda' },
  { name: 'Layanan', href: '#layanan' },
  { name: 'Artikel', href: '#artikel' },
]

// Services data - Updated with new services
const services = [
  {
    icon: Receipt,
    title: 'Pembuatan Faktur',
    description: 'Buat faktur profesional dengan mudah dan cepat. Lengkapi detail barang, harga, dan pajak secara otomatis.',
    href: '/faktur',
  },
  {
    icon: UserCircle,
    title: 'Pembuatan CV',
    description: 'Rancang CV profesional yang menarik dengan format terstruktur dan tampilan modern.',
    href: '/cv',
  },
  {
    icon: FileSignature,
    title: 'Pembuatan Slip Gaji',
    description: 'Generate slip gaji karyawan dengan perhitungan otomatis untuk pendapatan dan potongan.',
    href: '/slip-gaji',
  },
]

// Social media links
const socialLinks = [
  { name: 'Facebook', icon: Facebook, href: '#' },
  { name: 'Twitter', icon: Twitter, href: '#' },
  { name: 'Instagram', icon: Instagram, href: '#' },
  { name: 'LinkedIn', icon: Linkedin, href: '#' },
]

// Categories for articles
const categories = ['Tips & Trik', 'Produktivitas', 'Karir', 'Teknologi', 'Bisnis']

// Default images for articles
const defaultImages = ['/article-1.png', '/article-2.png', '/article-3.png']

export default function Home() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [articles, setArticles] = useState<Article[]>([])
  const [loading, setLoading] = useState(true)
  
  // Admin modal states
  const [adminModalOpen, setAdminModalOpen] = useState(false)
  const [passwordInput, setPasswordInput] = useState('')
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [authError, setAuthError] = useState('')
  
  // Article form states
  const [articleModalOpen, setArticleModalOpen] = useState(false)
  const [editingArticle, setEditingArticle] = useState<Article | null>(null)
  const [formData, setFormData] = useState({
    title: '',
    slug: '',
    excerpt: '',
    content: '',
    category: 'Tips & Trik',
    image: '/article-1.png',
  })
  const [saving, setSaving] = useState(false)
  
  // Delete confirmation
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
  const [articleToDelete, setArticleToDelete] = useState<Article | null>(null)

  // Fetch articles
  const fetchArticles = async () => {
    try {
      const res = await fetch('/api/articles')
      const data = await res.json()
      if (data.articles) {
        setArticles(data.articles)
      }
    } catch (error) {
      console.error('Failed to fetch articles:', error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchArticles()
  }, [])

  // Generate slug from title
  const generateSlug = (title: string) => {
    return title
      .toLowerCase()
      .replace(/[^a-z0-9\s-]/g, '')
      .replace(/\s+/g, '-')
      .replace(/-+/g, '-')
      .trim()
  }

  // Handle form change
  const handleFormChange = (field: string, value: string) => {
    setFormData(prev => {
      const newData = { ...prev, [field]: value }
      if (field === 'title') {
        newData.slug = generateSlug(value)
      }
      return newData
    })
  }

  // Handle admin login
  const handleAdminLogin = async () => {
    try {
      const res = await fetch('/api/admin/auth', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password: passwordInput }),
      })
      const data = await res.json()
      
      if (data.success) {
        setIsAuthenticated(true)
        setAuthError('')
        setPasswordInput('')
      } else {
        setAuthError(data.error || 'Password salah!')
      }
    } catch {
      setAuthError('Terjadi kesalahan. Coba lagi.')
    }
  }

  // Open create article modal
  const openCreateModal = () => {
    setEditingArticle(null)
    setFormData({
      title: '',
      slug: '',
      excerpt: '',
      content: '',
      category: 'Tips & Trik',
      image: defaultImages[Math.floor(Math.random() * defaultImages.length)],
    })
    setArticleModalOpen(true)
  }

  // Open edit article modal
  const openEditModal = (article: Article) => {
    setEditingArticle(article)
    setFormData({
      title: article.title,
      slug: article.slug,
      excerpt: article.excerpt,
      content: article.content,
      category: article.category,
      image: article.image,
    })
    setArticleModalOpen(true)
  }

  // Save article (create or update)
  const handleSaveArticle = async () => {
    if (!formData.title || !formData.excerpt) {
      alert('Judul dan ringkasan wajib diisi!')
      return
    }

    setSaving(true)
    try {
      if (editingArticle) {
        // Update existing article
        const res = await fetch(`/api/articles/${editingArticle.id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            ...formData,
            published: true,
          }),
        })
        if (!res.ok) throw new Error('Failed to update article')
      } else {
        // Create new article
        const res = await fetch('/api/articles', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData),
        })
        if (!res.ok) throw new Error('Failed to create article')
      }
      
      setArticleModalOpen(false)
      fetchArticles()
    } catch (error) {
      console.error('Error saving article:', error)
      alert('Gagal menyimpan artikel!')
    } finally {
      setSaving(false)
    }
  }

  // Delete article
  const handleDeleteArticle = async () => {
    if (!articleToDelete) return

    try {
      const res = await fetch(`/api/articles/${articleToDelete.id}`, {
        method: 'DELETE',
      })
      if (!res.ok) throw new Error('Failed to delete article')
      
      setDeleteConfirmOpen(false)
      setArticleToDelete(null)
      fetchArticles()
    } catch (error) {
      console.error('Error deleting article:', error)
      alert('Gagal menghapus artikel!')
    }
  }

  // Format date to Indonesian
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('id-ID', {
      day: 'numeric',
      month: 'long',
      year: 'numeric'
    })
  }

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      {/* Header / Navigation */}
      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <Link href="/" className="flex items-center gap-2">
              <Zap className="h-8 w-8 text-teal-600" />
              <span className="text-xl font-bold text-gray-900">Admin Kilat</span>
            </Link>

            {/* Desktop Navigation */}
            <div className="hidden md:flex items-center gap-8">
              {navItems.map((item) => (
                <a
                  key={item.name}
                  href={item.href}
                  className="text-gray-600 hover:text-teal-600 transition-colors font-medium"
                >
                  {item.name}
                </a>
              ))}
              {/* Admin Button */}
              <Button
                variant="outline"
                size="sm"
                onClick={() => setAdminModalOpen(true)}
                className="border-teal-600 text-teal-600 hover:bg-teal-50"
              >
                <KeyRound className="h-4 w-4 mr-1" />
                Admin
              </Button>
            </div>

            {/* Mobile Menu Button */}
            <button
              className="md:hidden p-2 text-gray-600"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>

          {/* Mobile Navigation */}
          {mobileMenuOpen && (
            <div className="md:hidden py-4 border-t border-gray-100">
              {navItems.map((item) => (
                <a
                  key={item.name}
                  href={item.href}
                  className="block py-2 text-gray-600 hover:text-teal-600 transition-colors"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  {item.name}
                </a>
              ))}
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  setAdminModalOpen(true)
                  setMobileMenuOpen(false)
                }}
                className="mt-2 w-full border-teal-600 text-teal-600"
              >
                <KeyRound className="h-4 w-4 mr-1" />
                Admin
              </Button>
            </div>
          )}
        </nav>
      </header>

      {/* Main Content */}
      <main className="flex-grow">
        {/* Hero Section */}
        <section id="beranda" className="relative bg-gradient-to-br from-teal-600 via-teal-700 to-teal-800 text-white">
          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
            <div className="flex flex-col md:flex-row items-center gap-8 md:gap-12">
              {/* Hero Illustration */}
              <div className="relative w-48 h-48 md:w-64 md:h-64 flex-shrink-0">
                <Image
                  src="/hero-illustration.png"
                  alt="Document Generator Illustration"
                  fill
                  className="object-contain drop-shadow-2xl"
                  priority
                />
              </div>

              {/* Hero Text */}
              <div className="text-center md:text-left">
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
                  <span className="text-teal-200">Admin Kilat</span>
                </h1>
                <p className="text-xl md:text-2xl text-teal-100 max-w-2xl">
                  Membantu Anda membuat dokumen profesional dengan cepat.
                </p>
              </div>
            </div>
          </div>
          {/* Wave divider */}
          <div className="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="#F9FAFB"/>
            </svg>
          </div>
        </section>

        {/* Services Section */}
        <section id="layanan" className="py-16 md:py-24 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Layanan Yang Ditawarkan</h2>
              <div className="w-24 h-1 bg-teal-600 mx-auto rounded-full" />
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              {services.map((service) => (
                <Link key={service.title} href={service.href}>
                  <Card className="border border-gray-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 cursor-pointer h-full">
                    <CardHeader>
                      <div className="w-14 h-14 bg-teal-100 rounded-xl flex items-center justify-center mb-4">
                        <service.icon className="h-7 w-7 text-teal-600" />
                      </div>
                      <CardTitle className="text-xl">{service.title}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <CardDescription className="text-gray-600 text-base leading-relaxed">
                        {service.description}
                      </CardDescription>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* Articles Section */}
        <section id="artikel" className="py-16 md:py-24 bg-gray-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Artikel Terbaru</h2>
              <div className="w-24 h-1 bg-teal-600 mx-auto rounded-full" />
            </div>

            {loading ? (
              <div className="grid md:grid-cols-3 gap-8">
                {[1, 2, 3].map((i) => (
                  <Card key={i} className="overflow-hidden">
                    <div className="h-48 bg-gray-200 animate-pulse" />
                    <CardContent className="p-6">
                      <div className="h-4 bg-gray-200 rounded mb-4 animate-pulse" />
                      <div className="h-6 bg-gray-200 rounded mb-2 animate-pulse" />
                      <div className="h-16 bg-gray-200 rounded animate-pulse" />
                    </CardContent>
                  </Card>
                ))}
              </div>
            ) : articles.length > 0 ? (
              <div className="grid md:grid-cols-3 gap-8">
                {articles.map((article) => (
                  <Card key={article.id} className="overflow-hidden border border-gray-200 hover:shadow-xl transition-all duration-300 group">
                    <div className="relative h-48 overflow-hidden">
                      <Image
                        src={article.image}
                        alt={article.title}
                        fill
                        className="object-cover group-hover:scale-105 transition-transform duration-500"
                      />
                    </div>
                    <CardContent className="p-6">
                      <div className="flex items-center gap-3 mb-3">
                        <Badge variant="secondary" className="bg-teal-100 text-teal-700">
                          {article.category}
                        </Badge>
                        <span className="text-sm text-gray-500 flex items-center gap-1">
                          <Calendar className="h-3 w-3" />
                          {formatDate(article.createdAt)}
                        </span>
                      </div>
                      <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-teal-600 transition-colors">
                        {article.title}
                      </h3>
                      <p className="text-gray-600 text-sm mb-4 line-clamp-2">{article.excerpt}</p>
                      <a
                        href="#"
                        className="inline-flex items-center text-teal-600 font-medium hover:text-teal-700 transition-colors"
                      >
                        Baca Selengkapnya
                        <ChevronRight className="h-4 w-4 ml-1" />
                      </a>
                    </CardContent>
                  </Card>
                ))}
              </div>
            ) : (
              <div className="text-center py-12">
                <FileText className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                <p className="text-gray-500 text-lg">Belum ada artikel. Login sebagai admin untuk menambah artikel.</p>
              </div>
            )}

            {/* View All Button */}
            <div className="text-center mt-10">
              <Button size="lg" variant="outline" className="border-teal-600 text-teal-600 hover:bg-teal-50">
                Lihat Semua Artikel
                <ChevronRight className="ml-2 h-5 w-5" />
              </Button>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-gray-900 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Logo & Description */}
            <div className="md:col-span-1">
              <Link href="/" className="flex items-center gap-2 mb-4">
                <Zap className="h-8 w-8 text-teal-400" />
                <span className="text-xl font-bold">Admin Kilat</span>
              </Link>
              <p className="text-gray-400 text-sm">
                Membantu Anda membuat dokumen profesional dengan cepat.
              </p>
            </div>

            {/* Quick Links */}
            <div>
              <h4 className="font-semibold mb-4">Link Cepat</h4>
              <ul className="space-y-2">
                {navItems.map((item) => (
                  <li key={item.name}>
                    <a href={item.href} className="text-gray-400 hover:text-teal-400 transition-colors text-sm">
                      {item.name}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            {/* Social Media */}
            <div>
              <h4 className="font-semibold mb-4">Sosial Media</h4>
              <div className="flex gap-3">
                {socialLinks.map((social) => (
                  <a
                    key={social.name}
                    href={social.href}
                    className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-teal-600 transition-colors"
                    aria-label={social.name}
                  >
                    <social.icon className="h-5 w-5" />
                  </a>
                ))}
              </div>
            </div>
          </div>

          {/* Copyright */}
          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400">
            <p>Copyright © 2024 Admin Kilat. All rights reserved.</p>
          </div>
        </div>
      </footer>

      {/* Admin Login Modal */}
      <Dialog open={adminModalOpen} onOpenChange={setAdminModalOpen}>
        <DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-y-auto">
          {!isAuthenticated ? (
            <>
              <DialogHeader>
                <DialogTitle>Login Admin</DialogTitle>
                <DialogDescription>
                  Masukkan password untuk mengakses panel admin.
                </DialogDescription>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="password">Password</Label>
                  <Input
                    id="password"
                    type="password"
                    value={passwordInput}
                    onChange={(e) => setPasswordInput(e.target.value)}
                    placeholder="Masukkan password"
                    onKeyDown={(e) => e.key === 'Enter' && void handleAdminLogin()}
                  />
                  {authError && <p className="text-sm text-red-500">{authError}</p>}
                </div>
                <Button onClick={handleAdminLogin} className="w-full bg-teal-600 hover:bg-teal-700">
                  Login
                </Button>
                <p className="text-xs text-gray-500 text-center">Password dapat diubah di file .env</p>
              </div>
            </>
          ) : (
            <>
              <DialogHeader>
                <DialogTitle className="flex items-center justify-between">
                  <span>Kelola Artikel</span>
                  <Button size="sm" onClick={openCreateModal} className="bg-teal-600 hover:bg-teal-700">
                    <Plus className="h-4 w-4 mr-1" />
                    Tambah Artikel
                  </Button>
                </DialogTitle>
                <DialogDescription>
                  Kelola semua artikel di website Anda.
                </DialogDescription>
              </DialogHeader>
              
              <div className="py-4">
                {articles.length === 0 ? (
                  <div className="text-center py-8">
                    <FileText className="h-12 w-12 text-gray-300 mx-auto mb-3" />
                    <p className="text-gray-500">Belum ada artikel</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {articles.map((article) => (
                      <div
                        key={article.id}
                        className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200"
                      >
                        <div className="relative w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
                          <Image
                            src={article.image}
                            alt={article.title}
                            fill
                            className="object-cover"
                          />
                        </div>
                        <div className="flex-grow min-w-0">
                          <h4 className="font-medium text-gray-900 truncate">{article.title}</h4>
                          <div className="flex items-center gap-2 text-sm text-gray-500">
                            <Badge variant="secondary" className="text-xs">{article.category}</Badge>
                            <span>{formatDate(article.createdAt)}</span>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => openEditModal(article)}
                          >
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button
                            size="sm"
                            variant="destructive"
                            onClick={() => {
                              setArticleToDelete(article)
                              setDeleteConfirmOpen(true)
                            }}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              
              <DialogFooter>
                <Button variant="outline" onClick={() => {
                  setIsAuthenticated(false)
                  setAdminModalOpen(false)
                }}>
                  Keluar
                </Button>
              </DialogFooter>
            </>
          )}
        </DialogContent>
      </Dialog>

      {/* Article Form Modal */}
      <Dialog open={articleModalOpen} onOpenChange={setArticleModalOpen}>
        <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editingArticle ? 'Edit Artikel' : 'Tambah Artikel Baru'}</DialogTitle>
            <DialogDescription>
              {editingArticle ? 'Ubah detail artikel.' : 'Isi detail artikel baru.'}
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="title">Judul Artikel *</Label>
              <Input
                id="title"
                value={formData.title}
                onChange={(e) => handleFormChange('title', e.target.value)}
                placeholder="Judul artikel"
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="slug">Slug (URL)</Label>
              <Input
                id="slug"
                value={formData.slug}
                onChange={(e) => handleFormChange('slug', e.target.value)}
                placeholder="judul-artikel"
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="category">Kategori</Label>
              <select
                id="category"
                value={formData.category}
                onChange={(e) => handleFormChange('category', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent outline-none"
              >
                {categories.map((cat) => (
                  <option key={cat} value={cat}>{cat}</option>
                ))}
              </select>
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="excerpt">Ringkasan *</Label>
              <Textarea
                id="excerpt"
                value={formData.excerpt}
                onChange={(e) => handleFormChange('excerpt', e.target.value)}
                placeholder="Ringkasan singkat artikel..."
                rows={2}
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="content">Konten</Label>
              <Textarea
                id="content"
                value={formData.content}
                onChange={(e) => handleFormChange('content', e.target.value)}
                placeholder="Tulis konten artikel..."
                rows={5}
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="image">URL Gambar</Label>
              <Input
                id="image"
                value={formData.image}
                onChange={(e) => handleFormChange('image', e.target.value)}
                placeholder="/article-1.png"
              />
              <div className="flex gap-2 mt-2">
                {defaultImages.map((img) => (
                  <button
                    key={img}
                    type="button"
                    onClick={() => handleFormChange('image', img)}
                    className={`relative w-16 h-16 rounded-lg overflow-hidden border-2 ${
                      formData.image === img ? 'border-teal-600' : 'border-gray-200'
                    }`}
                  >
                    <Image src={img} alt="" fill className="object-cover" />
                  </button>
                ))}
              </div>
            </div>
          </div>
          
          <DialogFooter>
            <Button variant="outline" onClick={() => setArticleModalOpen(false)}>
              Batal
            </Button>
            <Button onClick={handleSaveArticle} disabled={saving} className="bg-teal-600 hover:bg-teal-700">
              {saving ? 'Menyimpan...' : (editingArticle ? 'Update' : 'Simpan')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Modal */}
      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus Artikel</DialogTitle>
            <DialogDescription>
              Apakah Anda yakin ingin menghapus artikel &quot;{articleToDelete?.title}&quot;? 
              Tindakan ini tidak dapat dibatalkan.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteConfirmOpen(false)}>
              Batal
            </Button>
            <Button variant="destructive" onClick={handleDeleteArticle}>
              Hapus
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}