"use client";

import {
  ChangeEvent,
  FormEvent,
  useEffect,
  useState,
} from "react";
import { useParams, useRouter } from "next/navigation";

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

type ArticleImage = {
  id: number;
  image: string;
  articleId: number;
  createdAt: string;
};

type Article = {
  id: number;
  title: string;
  slug: string;
  excerpt: string | null;
  content: string;
  category: string | null;
  published: boolean;
  publishedAt: string | null;
  thumbnail: string | null;
  articleimage: ArticleImage[];

  author: {
    id: string;
    name: string | null;
    email: string | null;
    articleAccess: boolean;
  } | null;
};

export default function EditArticlePage() {
  const params = useParams();
  const router = useRouter();

  const articleId = params.id;

  const [article, setArticle] = useState<Article | null>(null);
  const [articleAccess, setArticleAccess] =
  useState<boolean | null>(null);

  const formDisabled = articleAccess === false;

  const [title, setTitle] = useState("");
  const [slug, setSlug] = useState("");
  const [excerpt, setExcerpt] = useState("");
  const [content, setContent] = useState("");
  const [category, setCategory] = useState("");
  const [published, setPublished] = useState(false);
  const [publishedAt, setPublishedAt] = useState("");

  const [images, setImages] = useState<string[]>([]);
  const [newImages, setNewImages] = useState<File[]>([]);
  const [newPreviews, setNewPreviews] = useState<string[]>([]);

  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  const [alertDialog, setAlertDialog] = useState({
  show: false,
  type: "info" as "success" | "error" | "warning" | "info",
  title: "",
  message: "",
});

const showAlert = (
  type: "success" | "error" | "warning" | "info",
  title: string,
  message: string
) => {
  setAlertDialog({
    show: true,
    type,
    title,
    message,
  });
};

const closeAlert = () => {
  const shouldRedirect =
    alertDialog.type === "success" &&
    alertDialog.title === "Article Updated";

  setAlertDialog((previous) => ({
    ...previous,
    show: false,
  }));

  if (shouldRedirect) {
    router.push("/blog");
  }
};

  useEffect(() => {
    const loadArticle = async () => {
      try {
        const response = await fetch(
          `/api/user/articles/${articleId}`
        );

        const result = await response.json();

        if (!response.ok || !result.success) {
          throw new Error(
            result.message || "Failed to load Article"
          );
        }

        const data = result.article;

setArticle(data);
setArticleAccess(data.author?.articleAccess ?? true);

        setTitle(data.title || "");
        setSlug(data.slug || "");
        setExcerpt(data.excerpt || "");
        setContent(data.content || "");
        setCategory(data.category || "");
        setPublished(Boolean(data.published));

        if (data.publishedAt) {
          setPublishedAt(
            new Date(data.publishedAt)
              .toISOString()
              .split("T")[0]
          );
        }

        setImages(
          Array.isArray(data.articleimage)
            ? data.articleimage.map(
                (item: ArticleImage) => item.image
              )
            : []
        );
      } catch (error) {
        console.error(
          "LOAD EDIT ARTICLE ERROR:",
          error
        );

        setError(
          error instanceof Error
            ? error.message
            : "Failed to load Article"
        );
      } finally {
        setLoading(false);
      }
    };

    if (articleId) {
      loadArticle();
    }
  }, [articleId]);

  const handleNewImagesChange = (
    event: ChangeEvent<HTMLInputElement>
  ) => {

    if (articleAccess !== true) {
  return;
}
    const selectedFiles = Array.from(
      event.target.files || []
    );

    if (selectedFiles.length === 0) {
      return;
    }

    const imageFiles = selectedFiles.filter((file) =>
      file.type.startsWith("image/")
    );

    if (imageFiles.length === 0) {
      showAlert(
  "warning",
  "Invalid File",
  "The selected file is not an image. Please select an image file."
);
      event.target.value = "";
      return;
    }

    setNewImages((previous) => [
      ...previous,
      ...imageFiles,
    ]);

    const previews = imageFiles.map((file) =>
      URL.createObjectURL(file)
    );

    setNewPreviews((previous) => [
      ...previous,
      ...previews,
    ]);

    event.target.value = "";
  };

  const removeExistingImage = (index: number) => {
  if (articleAccess !== true) {
    return;
  }

  setImages((previous) =>
    previous.filter(
      (_, imageIndex) => imageIndex !== index
    )
  );
};

  const removeNewImage = (index: number) => {
  if (articleAccess !== true) {
    return;
  }

  const preview = newPreviews[index];

  if (preview) {
    URL.revokeObjectURL(preview);
  }

  setNewImages((previous) =>
    previous.filter(
      (_, imageIndex) => imageIndex !== index
    )
  );

  setNewPreviews((previous) =>
    previous.filter(
      (_, imageIndex) => imageIndex !== index
    )
  );
};

  const uploadNewImages = async () => {
  if (articleAccess !== true) {
    return [];
  }

  if (newImages.length === 0) {
    return [];
  }

    const formData = new FormData();

    newImages.forEach((file) => {
      formData.append("images", file);
    });

    setUploading(true);

    try {
      const response = await fetch(
        "/api/user/articles/upload",
        {
          method: "POST",
          body: formData,
        }
      );

      const result = await response.json();

      if (!response.ok || !result.success) {
        throw new Error(
          result.message || "Failed to upload images"
        );
      }

      return result.data as string[];
    } finally {
      setUploading(false);
    }
  };

  const handleSubmit = async (
    event: FormEvent<HTMLFormElement>
  ) => {
    event.preventDefault();

    if (articleAccess === false) {
  showAlert(
    "warning",
    "Article Access Disabled",
    "Your access to edit Articles has been disabled by the Admin"
  );
  return;
}

    if (!title.trim()) {
      showAlert(
  "warning",
  "Title Required",
  "Title is required before the article can be updated."
);
      return;
    }

    if (!slug.trim()) {
      showAlert(
  "warning",
  "Slug Required",
  "Slug is required before the article can be updated."
);
      return;
    }

    if (!content.trim()) {
      showAlert(
  "warning",
  "Content Required",
  "Content is required before the article can be updated."
);
      return;
    }

    setSaving(true);

    try {
      const uploadedImages =
        await uploadNewImages();

      const finalImages = [
        ...images,
        ...uploadedImages,
      ];

      const response = await fetch(
        `/api/user/articles/${articleId}`,
        {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            title: title.trim(),
            slug: slug.trim(),
            excerpt: excerpt.trim() || null,
            content: content.trim(),
            category: category.trim() || null,
            published,
            publishedAt: publishedAt
              ? new Date(
                  `${publishedAt}T00:00:00`
                ).toISOString()
              : null,
            images: finalImages,
          }),
        }
      );

      const result = await response.json();

      if (!response.ok || !result.success) {
        throw new Error(
          result.message ||
            "Failed to update Article"
        );
      }

      showAlert(
  "success",
  "Article Updated",
  "Article has been updated successfully."
);
    } catch (error) {
      console.error(
        "UPDATE ARTICLE ERROR:",
        error
      );

      showAlert(
  "error",
  "Update Failed",
  error instanceof Error
    ? error.message
    : "Failed to update Article"
);
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <>
        <Navbar />

        <style>{`
  .edit-article-page {
    min-height: 100vh;
    padding: 120px 0 90px;
    background:
      radial-gradient(
        circle at 10% 0%,
        rgba(25, 135, 84, 0.08),
        transparent 28%
      ),
      #f4f7f5;
  }

  .edit-wrapper {
    max-width: 1050px;
    margin: 0 auto;
  }

  /* =========================
     PAGE HEADER
  ========================= */

  .edit-page-header {
    text-align: center;
    margin-bottom: 30px;
    animation: fadeDown 0.7s ease both;
  }

  .edit-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-bottom: 14px;

    border-radius: 999px;

    background: #e7f4ed;
    border: 1px solid #cde7d8;

    color: #198754;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  .edit-page-badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #198754;

    box-shadow:
      0 0 0 5px rgba(25, 135, 84, 0.10);

    animation: pulseDot 2s ease-in-out infinite;
  }

  .edit-page-header h1 {
    margin: 0 0 9px;

    color: #17231d;

    font-size: clamp(30px, 4vw, 42px);
    font-weight: 750;
    letter-spacing: -1px;
  }

  .edit-page-header p {
    max-width: 650px;
    margin: 0 auto;

    color: #6f7d75;

    font-size: 14px;
    line-height: 1.7;
  }

  /* =========================
     MAIN CARD
  ========================= */

  .edit-article-card {
    position: relative;

    max-width: 100%;
    margin: 0 auto;

    background: #ffffff;

    /*
      Lebih jelas daripada sebelumnya
    */
    border: 1px solid #d9e2dc;
    border-radius: 22px;

    /*
      Shadow lebih tegas agar card
      benar-benar terpisah dari background
    */
    box-shadow:
      0 2px 4px rgba(21, 54, 37, 0.03),
      0 10px 25px rgba(21, 54, 37, 0.06),
      0 25px 60px rgba(21, 54, 37, 0.07);

    padding: 38px;

    overflow: hidden;

    animation: cardAppear 0.7s ease both;
  }

  /*
    Garis atas card
  */

  .edit-article-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: linear-gradient(
      90deg,
      #198754,
      #49a978,
      #198754
    );

    background-size: 200% 100%;

    animation: greenFlow 5s linear infinite;
  }

  /*
    Highlight tipis di bagian dalam
  */

  .edit-article-card::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: 22px;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  /* =========================
     FORM SECTION
  ========================= */

  .form-section {
    position: relative;

    margin-bottom: 34px;
    padding-bottom: 30px;

    border-bottom: 1px solid #e7ece9;
  }

  .form-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;

    border-bottom: none;
  }

  /*
    Section heading dibuat lebih jelas
  */

  .section-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 24px;
    padding: 13px 15px;

    background: #f7faf8;

    border: 1px solid #e4ebe6;
    border-radius: 13px;
  }

  .section-number {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #198754;
    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    box-shadow:
      0 5px 12px rgba(25, 135, 84, 0.18);
  }

  .section-heading h3 {
    margin: 0;

    color: #26332c;

    font-size: 15px;
    font-weight: 750;
  }

  .section-heading p {
    margin: 3px 0 0;

    color: #89948e;

    font-size: 11px;
  }

  /* =========================
     FORM
  ========================= */

  .form-label {
    display: block;

    margin-bottom: 8px;

    color: #34413a;

    font-size: 13px;
    font-weight: 700;
  }

  .form-control,
  .form-select {
    min-height: 45px;

    border: 1px solid #d5dfd9;
    border-radius: 10px;

    background: #ffffff;

    color: #26332c;

    padding: 11px 13px;

    font-size: 13px;

    transition:
      border-color 0.25s ease,
      box-shadow 0.25s ease,
      background 0.25s ease;
  }

  .form-control:hover,
  .form-select:hover {
    border-color: #b9cbbf;
    background: #fcfefd;
  }

  .form-control:focus,
  .form-select:focus {
    border-color: #198754;

    background: #ffffff;

    box-shadow:
      0 0 0 3px rgba(25, 135, 84, 0.09);

    outline: none;
  }

  .form-control::placeholder {
    color: #adb6b1;
  }

  .content-input {
    min-height: 340px;

    resize: vertical;

    line-height: 1.75;
  }

  .excerpt-input {
    min-height: 125px;

    resize: vertical;

    line-height: 1.65;
  }

  .field-hint {
    display: block;

    margin-top: 7px;

    color: #929d97;

    font-size: 10px;
  }

  /* =========================
     IMAGE AREA
  ========================= */

  .image-upload-box {
    padding: 22px;

    background: #f9fbfa;

    border: 1px solid #dce6df;
    border-radius: 15px;
  }

  .upload-title {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 14px;
  }

  .upload-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #e5f3eb;
    color: #198754;

    font-size: 20px;
    font-weight: 500;
  }

  .upload-title strong {
    display: block;

    color: #34413a;

    font-size: 13px;
  }

  .upload-title span {
    display: block;

    margin-top: 2px;

    color: #929d97;

    font-size: 10px;
  }

  .image-file-input {
    min-height: 46px;

    background: #ffffff;
  }

  .image-file-input::file-selector-button {
    border: none;

    background: #198754;
    color: #ffffff;

    border-radius: 7px;

    padding: 8px 13px;

    margin-right: 10px;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
  }

  .image-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 25px 0 13px;

    padding-bottom: 9px;

    border-bottom: 1px solid #e5ebe7;
  }

  .image-group-title strong {
    color: #34413a;

    font-size: 12px;
    font-weight: 700;
  }

  .image-count {
    min-width: 25px;

    padding: 3px 8px;

    border-radius: 999px;

    background: #e5f3eb;
    color: #198754;

    text-align: center;

    font-size: 10px;
    font-weight: 700;
  }

  .image-grid {
    display: grid;

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(170px, 1fr)
      );

    gap: 15px;
  }

  .image-item {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    border: 1px solid #d7e1db;
    border-radius: 13px;

    background: #eef3f0;

    box-shadow:
      0 5px 14px rgba(31, 58, 44, 0.07);

    animation:
      imageAppear 0.5s ease both,
      imageBreathing 5s ease-in-out infinite;

    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      border-color 0.3s ease;
  }

  .image-item:hover {
    transform: translateY(-4px);

    border-color: #b8d3c3;

    box-shadow:
      0 12px 25px rgba(25, 135, 84, 0.12);
  }

  .image-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
      transform 0.65s ease;
  }

  .image-item:hover img {
    transform: scale(1.04);
  }

  .image-overlay {
    position: absolute;

    inset: 0;

    background:
      linear-gradient(
        to bottom,
        transparent 55%,
        rgba(0, 0, 0, 0.32)
      );

    opacity: 0;

    transition: opacity 0.3s ease;
  }

  .image-item:hover .image-overlay {
    opacity: 1;
  }

  .image-number {
    position: absolute;

    left: 9px;
    bottom: 9px;

    padding: 4px 8px;

    border-radius: 6px;

    background: rgba(0, 0, 0, 0.58);
    color: #ffffff;

    font-size: 9px;
    font-weight: 600;

    backdrop-filter: blur(5px);
  }

  .remove-image {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.4);

    border-radius: 50%;

    background: rgba(220, 53, 69, 0.94);

    color: #ffffff;

    font-size: 17px;
    line-height: 1;

    cursor: pointer;

    opacity: 0;

    transform: scale(0.85);

    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      background 0.25s ease;

    z-index: 5;
  }

  .image-item:hover .remove-image {
    opacity: 1;

    transform: scale(1);
  }

  .remove-image:hover {
    background: #bb2d3b;

    transform: scale(1.08) !important;
  }

  .image-empty {
    padding: 30px 20px;

    text-align: center;

    border: 1px dashed #cbd8d0;
    border-radius: 12px;

    background: #ffffff;

    color: #8a958f;

    font-size: 12px;
  }

  .new-images-label {
    color: #198754 !important;
  }

  /* =========================
     PUBLISH
  ========================= */

  .publish-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 17px 19px;

    background: #f8fbf9;

    border: 1px solid #dce6df;
    border-radius: 13px;
  }

  .publish-info {
    display: flex;
    align-items: center;

    gap: 12px;
  }

  .publish-icon {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 39px;

    border-radius: 10px;

    background: #e5f3eb;
    color: #198754;

    font-size: 16px;
  }

  .publish-info strong {
    display: block;

    color: #34413a;

    font-size: 12px;
  }

  .publish-info span {
    display: block;

    margin-top: 2px;

    color: #929d97;

    font-size: 10px;
  }

  /* =========================
     SWITCH
  ========================= */

  .publish-switch {
    position: relative;

    width: 48px;
    height: 26px;

    flex: 0 0 48px;
  }

  .publish-switch input {
    opacity: 0;

    width: 0;
    height: 0;
  }

  .switch-slider {
    position: absolute;

    inset: 0;

    cursor: pointer;

    border-radius: 999px;

    background: #d6ded9;

    transition: 0.3s ease;
  }

  .switch-slider::before {
    content: "";

    position: absolute;

    width: 20px;
    height: 20px;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.16);

    transition: 0.3s ease;
  }

  .publish-switch input:checked
    + .switch-slider {
    background: #198754;

    box-shadow:
      0 4px 12px rgba(25, 135, 84, 0.22);
  }

  .publish-switch input:checked
    + .switch-slider::before {
    transform: translateX(22px);
  }

  /* =========================
     ACTIONS
  ========================= */

  .action-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 5px;
    padding-top: 28px;

    border-top: 1px solid #e2e9e4;
  }

  .btn-back,
  .btn-save {
    min-height: 45px;

    border-radius: 10px;

    padding: 10px 20px;

    font-size: 12px;
    font-weight: 700;

    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      background 0.25s ease;
  }

  .btn-back {
    border: 1px solid #d4dfd8;

    background: #ffffff;

    color: #52605a;
  }

  .btn-back:hover {
    background: #f7faf8;

    border-color: #c1d0c7;

    transform: translateY(-2px);

    box-shadow:
      0 7px 16px rgba(0, 0, 0, 0.05);
  }

  .btn-save {
    min-width: 165px;

    border: none;

    background: #198754;

    color: #ffffff;

    box-shadow:
      0 7px 17px rgba(25, 135, 84, 0.20);
  }

  .btn-save:hover:not(:disabled) {
    background: #157347;

    transform: translateY(-2px);

    box-shadow:
      0 11px 24px rgba(25, 135, 84, 0.25);
  }

  .btn-save:disabled {
    opacity: 0.65;

    cursor: not-allowed;

    box-shadow: none;
  }

  .button-spinner {
    display: inline-block;

    width: 13px;
    height: 13px;

    margin-right: 7px;

    vertical-align: -2px;

    border: 2px solid rgba(255, 255, 255, 0.4);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
      loadingSpin 0.75s linear infinite;
  }

  /* =========================
     ANIMATION
  ========================= */

  @keyframes fadeDown {
    from {
      opacity: 0;
      transform: translateY(-15px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes cardAppear {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pulseDot {
    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.3);
    }
  }

  @keyframes greenFlow {
    0% {
      background-position: 0% 50%;
    }

    100% {
      background-position: 200% 50%;
    }
  }

  @keyframes imageAppear {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes imageBreathing {
    0%,
    100% {
      box-shadow:
        0 5px 14px rgba(31, 58, 44, 0.07);
    }

    50% {
      box-shadow:
        0 8px 19px rgba(25, 135, 84, 0.10);
    }
  }

  @keyframes loadingSpin {
    to {
      transform: rotate(360deg);
    }
  }

  /* =========================
     RESPONSIVE
  ========================= */

  @media (max-width: 992px) {
    .edit-article-card {
      padding: 30px;
    }
  }

  @media (max-width: 768px) {
    .edit-article-page {
      padding-top: 100px;
    }

    .edit-article-card {
      padding: 22px 18px;

      border-radius: 18px;
    }

    .section-heading {
      padding: 11px 12px;
    }

    .content-input {
      min-height: 270px;
    }

    .image-grid {
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
    }

    .remove-image {
      opacity: 1;
      transform: scale(1);
    }

    .action-buttons {
      flex-direction: column-reverse;
    }

    .btn-back,
    .btn-save {
      width: 100%;
      text-align: center;
    }
  }

  @media (max-width: 480px) {
    .edit-page-header h1 {
      font-size: 29px;
    }

    .edit-page-header p {
      font-size: 12px;
    }

    .edit-article-card {
      padding: 18px 14px;
    }

    .image-upload-box {
      padding: 15px;
    }

    .image-grid {
      grid-template-columns: 1fr;
    }

    .publish-card {
      align-items: flex-start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
`}</style>

        <main className="edit-loading-page">
          <div className="loading-card">
            <div className="loading-orbit" />

            <h5>Loading Article</h5>

            <p>
              Preparing your article editor...
            </p>
          </div>
        </main>

        <Footer />
      </>
    );
  }

  if (error || !article) {
    return (
      <>
        <Navbar />

        <style>{`
          .edit-error-page {
            min-height: 100vh;
            padding: 130px 20px 80px;
            background: #f8faf9;
          }

          .error-card {
            max-width: 650px;
            margin: auto;
            padding: 45px 30px;
            text-align: center;
            background: #ffffff;
            border-radius: 24px;
            border: 1px solid #e9efeb;
            box-shadow:
              0 20px 60px rgba(0, 0, 0, 0.05);
          }

          .error-icon {
            width: 62px;
            height: 62px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            border-radius: 50%;
            background: #fff3f3;
            color: #dc3545;
            font-size: 28px;
          }

          .error-card h4 {
            font-weight: 700;
            color: #212529;
            margin-bottom: 10px;
          }

          .error-card p {
            color: #6c757d;
            margin-bottom: 24px;
          }

          .error-back-btn {
            border: none;
            background: #198754;
            color: #ffffff;
            padding: 11px 22px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.25s ease;
          }

          .error-back-btn:hover {
            background: #157347;
            transform: translateY(-2px);
          }
        `}</style>

        <main className="edit-error-page">
          <div className="error-card">
            <div className="error-icon">
              !
            </div>

            <h4>Article Not Found</h4>

            <p>
              {error ||
                "The article you want to edit is not available."}
            </p>

            <button
              type="button"
              className="error-back-btn"
              onClick={() =>
                router.push("/articles/edit")
              }
            >
              Back to Articles
            </button>
          </div>
        </main>

        <Footer />
      </>
    );
  }

  return (
    <>
      <Navbar />

      <style>{`
        .edit-article-page {
          min-height: 100vh;
          padding: 115px 0 90px;
          background:
            radial-gradient(
              circle at 8% 5%,
              rgba(25, 135, 84, 0.09),
              transparent 28%
            ),
            radial-gradient(
              circle at 95% 35%,
              rgba(25, 135, 84, 0.06),
              transparent 25%
            ),
            #f8faf9;
        }

        .edit-wrapper {
          max-width: 1050px;
          margin: 0 auto;
        }

        /* =========================
           HEADER
        ========================= */

        .edit-page-header {
          text-align: center;
          margin-bottom: 38px;
          animation: headerReveal 0.7s ease both;
        }

        .edit-page-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 7px 14px;
          border-radius: 999px;
          background: rgba(25, 135, 84, 0.08);
          border: 1px solid rgba(25, 135, 84, 0.13);
          color: #198754;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.7px;
          text-transform: uppercase;
          margin-bottom: 15px;
        }

        .edit-page-badge-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #198754;
          box-shadow:
            0 0 0 5px rgba(25, 135, 84, 0.08);
          animation: badgePulse 2s ease-in-out infinite;
        }

        .edit-page-header h1 {
          color: #18231e;
          font-size: clamp(30px, 4vw, 43px);
          line-height: 1.15;
          font-weight: 750;
          letter-spacing: -1px;
          margin: 0 0 11px;
        }

        .edit-page-header p {
          max-width: 650px;
          margin: auto;
          color: #748079;
          font-size: 15px;
          line-height: 1.7;
        }

        /* =========================
           MAIN CARD
        ========================= */

        .edit-article-card {
          position: relative;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.96);
          border: 1px solid #e7eee9;
          border-radius: 25px;
          padding: 38px;
          box-shadow:
            0 25px 70px rgba(26, 71, 49, 0.08);
          animation: cardReveal 0.75s ease both;
        }

        .edit-article-card::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(
            90deg,
            transparent,
            #198754,
            #58b98a,
            #198754,
            transparent
          );
          background-size: 200% 100%;
          animation: greenFlow 5s linear infinite;
        }

        /* =========================
           FORM SECTION
        ========================= */

        .form-section {
          margin-bottom: 30px;
        }

        .section-heading {
          display: flex;
          align-items: center;
          gap: 13px;
          margin-bottom: 22px;
          padding-bottom: 15px;
          border-bottom: 1px solid #edf1ee;
        }

        .section-number {
          width: 35px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 0 0 35px;
          border-radius: 11px;
          background: #eaf6ef;
          color: #198754;
          font-size: 13px;
          font-weight: 800;
        }

        .section-heading h3 {
          margin: 0;
          color: #26332c;
          font-size: 17px;
          font-weight: 700;
        }

        .section-heading p {
          margin: 2px 0 0;
          color: #89938d;
          font-size: 12px;
        }

        .form-label {
          display: block;
          color: #34413a;
          font-size: 13px;
          font-weight: 700;
          margin-bottom: 8px;
        }

        .form-control,
        .form-select {
          border: 1px solid #dfe7e2;
          border-radius: 12px;
          padding: 12px 14px;
          color: #27332d;
          background-color: #ffffff;
          font-size: 14px;
          transition:
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            transform 0.25s ease;
        }

        .form-control::placeholder {
          color: #adb6b1;
        }

        .form-control:hover,
        .form-select:hover {
          border-color: #c7d7ce;
        }

        .form-control:focus,
        .form-select:focus {
          border-color: #198754;
          box-shadow:
            0 0 0 4px rgba(25, 135, 84, 0.09);
          outline: none;
        }

        .content-input {
          min-height: 330px;
          resize: vertical;
          line-height: 1.7;
        }

        .excerpt-input {
          min-height: 125px;
          resize: vertical;
          line-height: 1.65;
        }

        .field-hint {
          display: block;
          margin-top: 7px;
          color: #9aa39e;
          font-size: 11px;
        }

        /* =========================
           IMAGE AREA
        ========================= */

        .image-upload-box {
          position: relative;
          padding: 22px;
          border: 1px dashed #bfd6c8;
          border-radius: 17px;
          background:
            linear-gradient(
              135deg,
              rgba(25, 135, 84, 0.025),
              rgba(255, 255, 255, 0.8)
            );
          transition:
            border-color 0.3s ease,
            background 0.3s ease;
        }

        .image-upload-box:hover {
          border-color: #198754;
          background:
            linear-gradient(
              135deg,
              rgba(25, 135, 84, 0.05),
              #ffffff
            );
        }

        .upload-title {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 14px;
        }

        .upload-icon {
          width: 37px;
          height: 37px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background: #eaf6ef;
          color: #198754;
          font-size: 17px;
        }

        .upload-title strong {
          display: block;
          color: #34413a;
          font-size: 14px;
        }

        .upload-title span {
          display: block;
          color: #919b95;
          font-size: 11px;
          margin-top: 2px;
        }

        .image-file-input {
          background: #ffffff;
          border-radius: 11px;
        }

        .image-file-input::file-selector-button {
          border: none;
          background: #198754;
          color: #ffffff;
          border-radius: 8px;
          padding: 8px 13px;
          margin-right: 10px;
          font-size: 12px;
          font-weight: 600;
          cursor: pointer;
        }

        .image-group-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          margin: 25px 0 13px;
        }

        .image-group-title strong {
          color: #34413a;
          font-size: 13px;
        }

        .image-count {
          min-width: 27px;
          padding: 3px 8px;
          border-radius: 999px;
          background: #edf7f1;
          color: #198754;
          text-align: center;
          font-size: 11px;
          font-weight: 700;
        }

        .image-grid {
          display: grid;
          grid-template-columns:
            repeat(
              auto-fill,
              minmax(170px, 1fr)
            );
          gap: 15px;
        }

        .image-item {
          position: relative;
          overflow: hidden;
          aspect-ratio: 16 / 10;
          border: 1px solid #e2e9e4;
          border-radius: 15px;
          background: #f4f7f5;
          box-shadow:
            0 7px 20px rgba(0, 0, 0, 0.04);
          animation:
            imageReveal 0.55s ease both,
            imageFloat 5s ease-in-out infinite;
          transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
        }

        .image-item:hover {
          transform: translateY(-5px);
          box-shadow:
            0 15px 30px rgba(26, 71, 49, 0.11);
        }

        .image-item img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition:
            transform 0.7s ease;
        }

        .image-item:hover img {
          transform: scale(1.045);
        }

        .image-overlay {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background:
            linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0.02),
              rgba(0, 0, 0, 0.28)
            );
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .image-item:hover .image-overlay {
          opacity: 1;
        }

        .image-number {
          position: absolute;
          left: 10px;
          bottom: 10px;
          padding: 4px 8px;
          border-radius: 7px;
          background: rgba(0, 0, 0, 0.58);
          color: #ffffff;
          font-size: 10px;
          font-weight: 600;
          backdrop-filter: blur(5px);
        }

        .remove-image {
          position: absolute;
          top: 9px;
          right: 9px;
          width: 31px;
          height: 31px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: 50%;
          background: rgba(220, 53, 69, 0.93);
          color: #ffffff;
          font-size: 18px;
          line-height: 1;
          padding: 0;
          cursor: pointer;
          opacity: 0;
          transform: scale(0.8);
          transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            background 0.25s ease;
          z-index: 3;
        }

        .image-item:hover .remove-image {
          opacity: 1;
          transform: scale(1);
        }

        .remove-image:hover {
          background: #bb2d3b;
          transform: scale(1.08) !important;
        }

        .image-empty {
          padding: 35px 20px;
          text-align: center;
          border: 1px dashed #d4ddd7;
          border-radius: 15px;
          color: #89938d;
          background: #fafcfb;
          font-size: 13px;
        }

        .new-images-label {
          color: #198754 !important;
        }

        /* =========================
           PUBLISH AREA
        ========================= */

        .publish-card {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          padding: 18px 20px;
          margin-top: 10px;
          border: 1px solid #e1e9e4;
          border-radius: 15px;
          background: #fbfdfc;
        }

        .publish-info {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .publish-icon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 11px;
          background: #eaf6ef;
          color: #198754;
          font-size: 17px;
          flex: 0 0 40px;
        }

        .publish-info strong {
          display: block;
          color: #34413a;
          font-size: 13px;
        }

        .publish-info span {
          display: block;
          margin-top: 2px;
          color: #929b96;
          font-size: 11px;
        }

        .publish-switch {
          position: relative;
          width: 48px;
          height: 26px;
          flex: 0 0 48px;
        }

        .publish-switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        .switch-slider {
          position: absolute;
          inset: 0;
          cursor: pointer;
          border-radius: 999px;
          background: #d8dfdb;
          transition: 0.3s ease;
        }

        .switch-slider::before {
          content: "";
          position: absolute;
          width: 20px;
          height: 20px;
          left: 3px;
          top: 3px;
          border-radius: 50%;
          background: #ffffff;
          box-shadow:
            0 2px 5px rgba(0, 0, 0, 0.15);
          transition: 0.3s ease;
        }

        .publish-switch input:checked + .switch-slider {
          background: #198754;
        }

        .publish-switch input:checked + .switch-slider::before {
          transform: translateX(22px);
        }

        /* =========================
           ACTION BUTTONS
        ========================= */

        .action-buttons {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 15px;
          margin-top: 38px;
          padding-top: 25px;
          border-top: 1px solid #edf1ee;
        }

        .btn-back,
        .btn-save {
          min-height: 46px;
          border-radius: 11px;
          padding: 11px 22px;
          font-size: 13px;
          font-weight: 700;
          transition:
            transform 0.25s ease,
            box-shadow 0.25s ease,
            background 0.25s ease;
        }

        .btn-back {
          border: 1px solid #dce5df;
          background: #ffffff;
          color: #52605a;
        }

        .btn-back:hover {
          background: #f7faf8;
          border-color: #cbd8d0;
          color: #34413a;
          transform: translateY(-2px);
          box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.05);
        }

        .btn-save {
          min-width: 165px;
          border: none;
          background: #198754;
          color: #ffffff;
          box-shadow:
            0 8px 20px rgba(25, 135, 84, 0.18);
        }

        .btn-save:hover:not(:disabled) {
          background: #157347;
          transform: translateY(-2px);
          box-shadow:
            0 12px 25px rgba(25, 135, 84, 0.24);
        }

        .btn-save:active:not(:disabled) {
          transform: translateY(0);
        }

        .btn-save:disabled {
          opacity: 0.68;
          cursor: not-allowed;
          box-shadow: none;
        }

        .button-spinner {
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-right: 8px;
          vertical-align: -2px;
          border: 2px solid rgba(255, 255, 255, 0.4);
          border-top-color: #ffffff;
          border-radius: 50%;
          animation: loadingSpin 0.75s linear infinite;
        }

        /* =========================
           ANIMATIONS
        ========================= */

        @keyframes headerReveal {
          from {
            opacity: 0;
            transform: translateY(-18px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes cardReveal {
          from {
            opacity: 0;
            transform: translateY(25px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes badgePulse {
          0%,
          100% {
            transform: scale(1);
            opacity: 1;
          }

          50% {
            transform: scale(1.25);
            opacity: 0.7;
          }
        }

        @keyframes greenFlow {
          from {
            background-position: 0% 50%;
          }

          to {
            background-position: 200% 50%;
          }
        }

        @keyframes imageReveal {
          from {
            opacity: 0;
            transform: translateY(10px) scale(0.97);
          }

          to {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        @keyframes imageFloat {
          0%,
          100% {
            box-shadow:
              0 7px 20px rgba(0, 0, 0, 0.04);
          }

          50% {
            box-shadow:
              0 11px 25px rgba(25, 135, 84, 0.08);
          }
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media (max-width: 992px) {
          .edit-article-page {
            padding-top: 105px;
          }

          .edit-article-card {
            padding: 30px;
          }
        }

        @media (max-width: 768px) {
          .edit-article-page {
            padding: 95px 0 65px;
          }

          .edit-article-header {
            margin-bottom: 28px;
          }

          .edit-page-header h1 {
            letter-spacing: -0.6px;
          }

          .edit-article-card {
            padding: 23px 18px;
            border-radius: 20px;
          }

          .section-heading {
            margin-bottom: 18px;
          }

          .content-input {
            min-height: 260px;
          }

          .image-grid {
            grid-template-columns:
              repeat(2, minmax(0, 1fr));
            gap: 11px;
          }

          .remove-image {
            opacity: 1;
            transform: scale(1);
          }

          .publish-card {
            align-items: flex-start;
          }

          .action-buttons {
            flex-direction: column-reverse;
          }

          .btn-back,
          .btn-save {
            width: 100%;
            justify-content: center;
            text-align: center;
          }
        }

        @media (max-width: 480px) {
          .edit-page-badge {
            font-size: 10px;
          }

          .edit-page-header h1 {
            font-size: 29px;
          }

          .edit-page-header p {
            font-size: 13px;
          }

          .image-grid {
            grid-template-columns: 1fr;
          }

          .image-item {
            aspect-ratio: 16 / 9;
          }

          .publish-info {
            align-items: flex-start;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          *,
          *::before,
          *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
          }
        }

        /* =========================
   ARTICLE ALERT DIALOG
========================= */

.article-alert-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(16, 30, 23, 0.48);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  animation: alertBackdropIn 0.25s ease both;
}

.article-alert-dialog {
  position: relative;

  width: 100%;
  max-width: 430px;

  padding: 34px 30px 28px;

  background: #ffffff;

  border: 1px solid rgba(25, 135, 84, 0.10);
  border-radius: 22px;

  text-align: center;

  box-shadow:
    0 25px 70px rgba(20, 54, 38, 0.20),
    0 8px 25px rgba(20, 54, 38, 0.08);

  animation: alertDialogIn 0.35s ease both;

  overflow: hidden;
}

.article-alert-dialog::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 3px;

  background: linear-gradient(
    90deg,
    transparent,
    #198754,
    #58b98a,
    #198754,
    transparent
  );

  background-size: 200% 100%;

  animation: alertGreenFlow 4s linear infinite;
}

/* =========================
   ALERT ICON
========================= */

.article-alert-icon {
  width: 76px;
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 20px;

  border-radius: 50%;

  font-size: 32px;

  animation: alertIconPop 0.45s ease both;
}

.article-alert-icon.success {
  background: #e5f5ec;
  color: #198754;

  box-shadow:
    0 0 0 8px rgba(25, 135, 84, 0.06),
    0 10px 25px rgba(25, 135, 84, 0.14);
}

.article-alert-icon.error {
  background: #fff0f1;
  color: #dc3545;

  box-shadow:
    0 0 0 8px rgba(220, 53, 69, 0.05),
    0 10px 25px rgba(220, 53, 69, 0.10);
}

.article-alert-icon.warning {
  background: #fff7e6;
  color: #f59f00;

  box-shadow:
    0 0 0 8px rgba(245, 159, 0, 0.05),
    0 10px 25px rgba(245, 159, 0, 0.10);
}

.article-alert-icon.info {
  background: #eaf4ff;
  color: #0d6efd;

  box-shadow:
    0 0 0 8px rgba(13, 110, 253, 0.05),
    0 10px 25px rgba(13, 110, 253, 0.10);
}

/* =========================
   ALERT CONTENT
========================= */

.article-alert-dialog h4 {
  margin: 0 0 9px;

  color: #18231e;

  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.3px;
}

.article-alert-dialog p {
  max-width: 340px;

  margin: 0 auto 25px;

  color: #748079;

  font-size: 13px;
  line-height: 1.7;
}

/* =========================
   ALERT BUTTON
========================= */

.article-alert-button {
  min-width: 110px;
  min-height: 42px;

  padding: 9px 20px;

  border: none;
  border-radius: 10px;

  background: #198754;
  color: #ffffff;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 7px 18px rgba(25, 135, 84, 0.20);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.article-alert-button:hover {
  background: #157347;

  transform: translateY(-2px);

  box-shadow:
    0 10px 24px rgba(25, 135, 84, 0.25);
}

.article-alert-button:active {
  transform: translateY(0);
}

/* =========================
   ALERT ANIMATION
========================= */

@keyframes alertBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes alertDialogIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes alertIconPop {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }

  70% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes alertGreenFlow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 200% 50%;
  }
}

@media (max-width: 480px) {
  .article-alert-backdrop {
    padding: 16px;
  }

  .article-alert-dialog {
    max-width: 100%;

    padding: 30px 22px 24px;

    border-radius: 20px;
  }

  .article-alert-icon {
    width: 70px;
    height: 70px;

    margin-bottom: 18px;

    font-size: 29px;
  }

  .article-alert-dialog h4 {
    font-size: 18px;
  }

  .article-alert-dialog p {
    font-size: 12px;
  }

  .article-alert-button {
    width: 100%;
  }
}
      `}</style>

      <main className="edit-article-page">
        <div className="container">
          <div className="edit-wrapper">

            {/* =========================
                PAGE HEADER
            ========================= */}

            <div className="edit-page-header">
              <div className="edit-page-badge">
                <span className="edit-page-badge-dot" />
                Article Management
              </div>

              <h1>Edit Article</h1>

              <p>
                Update your article content, information,
                images, and publication settings.
              </p>
            </div>

            {/* =========================
                MAIN CARD
            ========================= */}

            <div className="edit-article-card">

              <form onSubmit={handleSubmit}>

                {/* =========================
                    BASIC INFORMATION
                ========================= */}

                <div className="form-section">

                  <div className="section-heading">
                    <div className="section-number">
                      01
                    </div>

                    <div>
                      <h3>Article Information</h3>

                      <p>
                        Basic information about your article
                      </p>
                    </div>
                  </div>

                  <div className="row g-4">

                    <div className="col-12">
                      <label className="form-label">
                        Title
                      </label>

                      <input
  type="text"
  className="form-control"
  placeholder="Enter article title"
  value={title}
  onChange={(event) =>
    setTitle(event.target.value)
  }
  disabled={formDisabled}
/>
                    </div>

                    <div className="col-md-8">
                      <label className="form-label">
                        Slug
                      </label>

                      <input
  type="text"
  className="form-control"
  placeholder="article-url-slug"
  value={slug}
  onChange={(event) =>
    setSlug(event.target.value)
  }
  disabled={formDisabled}
/>

                      <small className="field-hint">
                        Used as the article URL identifier.
                      </small>
                    </div>

                    <div className="col-md-4">
                      <label className="form-label">
                        Category
                      </label>

                     <input
  type="text"
  className="form-control"
  placeholder="Technology"
  value={category}
  onChange={(event) =>
    setCategory(event.target.value)
  }
  disabled={formDisabled}
/>
                    </div>

                    <div className="col-12">
                      <label className="form-label">
                        Excerpt
                      </label>

                      <textarea
  className="form-control excerpt-input"
  placeholder="Write a short description of your article..."
  value={excerpt}
  onChange={(event) =>
    setExcerpt(event.target.value)
  }
  disabled={formDisabled}
/>
                    </div>

                  </div>
                </div>

                {/* =========================
                    CONTENT
                ========================= */}

                <div className="form-section">

                  <div className="section-heading">
                    <div className="section-number">
                      02
                    </div>

                    <div>
                      <h3>Article Content</h3>

                      <p>
                        Write and manage the main article content
                      </p>
                    </div>
                  </div>

                  <div>
                    <label className="form-label">
                      Content
                    </label>

                    <textarea
  className="form-control content-input"
  placeholder="Write your article content here..."
  value={content}
  onChange={(event) =>
    setContent(event.target.value)
  }
  disabled={formDisabled}
/>
                  </div>

                </div>

                {/* =========================
                    IMAGES
                ========================= */}

                <div className="form-section">

                  <div className="section-heading">
                    <div className="section-number">
                      03
                    </div>

                    <div>
                      <h3>Article Images</h3>

                      <p>
                        Manage existing and add new article images
                      </p>
                    </div>
                  </div>

                  <div className="image-upload-box">

                    <div className="upload-title">
                      <div className="upload-icon">
                        +
                      </div>

                      <div>
                        <strong>
                          Add New Images
                        </strong>

                        <span>
                          Select one or multiple images
                        </span>
                      </div>
                    </div>

                    <input
  type="file"
  className="form-control image-file-input"
  accept="image/*"
  multiple
  onChange={handleNewImagesChange}
  disabled={formDisabled}
/>

                    {images.length > 0 && (
                      <>
                        <div className="image-group-title">
                          <strong>
                            Existing Images
                          </strong>

                          <span className="image-count">
                            {images.length}
                          </span>
                        </div>

                        <div className="image-grid">
                          {images.map(
                            (image, index) => (
                              <div
                                className="image-item"
                                key={`${image}-${index}`}
                                style={{
                                  animationDelay: `${
                                    index * 70
                                  }ms`,
                                }}
                              >
                                <img
                                  src={image}
                                  alt={`Article image ${
                                    index + 1
                                  }`}
                                />

                                <div className="image-overlay" />

                                <span className="image-number">
                                  Image {index + 1}
                                </span>

                                <button
  type="button"
  className="remove-image"
  aria-label={`Remove image ${
    index + 1
  }`}
  onClick={() =>
    removeExistingImage(index)
  }
  disabled={formDisabled}
>
                                  ×
                                </button>
                              </div>
                            )
                          )}
                        </div>
                      </>
                    )}

                    {newPreviews.length > 0 && (
                      <>
                        <div className="image-group-title">
                          <strong className="new-images-label">
                            New Images
                          </strong>

                          <span className="image-count">
                            {newPreviews.length}
                          </span>
                        </div>

                        <div className="image-grid">
                          {newPreviews.map(
                            (preview, index) => (
                              <div
                                className="image-item"
                                key={preview}
                                style={{
                                  animationDelay: `${
                                    index * 70
                                  }ms`,
                                }}
                              >
                                <img
                                  src={preview}
                                  alt={`New image ${
                                    index + 1
                                  }`}
                                />

                                <div className="image-overlay" />

                                <span className="image-number">
                                  New {index + 1}
                                </span>

                                <button
  type="button"
  className="remove-image"
  aria-label={`Remove new image ${
    index + 1
  }`}
  onClick={() =>
    removeNewImage(index)
  }
  disabled={formDisabled}
>
                                  ×
                                </button>
                              </div>
                            )
                          )}
                        </div>
                      </>
                    )}

                    {images.length === 0 &&
                      newPreviews.length === 0 && (
                        <div className="image-empty mt-3">
                          No images available yet.
                        </div>
                      )}

                  </div>
                </div>

                {/* =========================
                    PUBLICATION
                ========================= */}

                <div className="form-section">

                  <div className="section-heading">
                    <div className="section-number">
                      04
                    </div>

                    <div>
                      <h3>Publication</h3>

                      <p>
                        Configure publication date and visibility
                      </p>
                    </div>
                  </div>

                  <div className="row g-4">

                    <div className="col-md-6">
                      <label className="form-label">
                        Published Date
                      </label>

                      <input
  type="date"
  className="form-control"
  value={publishedAt}
  onChange={(event) =>
    setPublishedAt(
      event.target.value
    )
  }
  disabled={formDisabled}
/>
                    </div>

                    <div className="col-12">
                      <div className="publish-card">

                        <div className="publish-info">
                          <div className="publish-icon">
                            ✓
                          </div>

                          <div>
                            <strong>
                              Publish Article
                            </strong>

                            <span>
                              Make this article visible to
                              visitors.
                            </span>
                          </div>
                        </div>

                        <label className="publish-switch">
                          <input
  type="checkbox"
  id="published"
  checked={published}
  onChange={(event) =>
    setPublished(
      event.target.checked
    )
  }
  disabled={formDisabled}
/>

                          <span className="switch-slider" />
                        </label>

                      </div>
                    </div>

                  </div>
                </div>

                {/* =========================
                    ACTIONS
                ========================= */}

                <div className="action-buttons">

                  <button
                    type="button"
                    className="btn-back"
                    onClick={() =>
                      router.push(
                        "/articles/edit"
                      )
                    }
                  >
                    ← Back to Articles
                  </button>

                  <button
  type="submit"
  className="btn-save"
  disabled={
    formDisabled ||
    saving ||
    uploading
  }
>
                    {uploading ? (
                      <>
                        <span className="button-spinner" />
                        Uploading...
                      </>
                    ) : saving ? (
                      <>
                        <span className="button-spinner" />
                        Saving Changes...
                      </>
                    ) : (
                      <>
                        Save Changes
                      </>
                    )}
                  </button>

                </div>

              </form>
            </div>
          </div>
        </div>
      </main>

      <Footer />

      {alertDialog.show && (
  <div
    className="article-alert-backdrop"
    role="dialog"
    aria-modal="true"
    aria-labelledby="article-alert-title"
  >
    <div className="article-alert-dialog">

      <div
        className={`article-alert-icon ${alertDialog.type}`}
      >
        {alertDialog.type === "success" && (
          <i className="bi bi-check-lg" />
        )}

        {alertDialog.type === "error" && (
          <i className="bi bi-x-lg" />
        )}

        {alertDialog.type === "warning" && (
          <i className="bi bi-exclamation-lg" />
        )}

        {alertDialog.type === "info" && (
          <i className="bi bi-info-lg" />
        )}
      </div>

      <h4 id="article-alert-title">
        {alertDialog.title}
      </h4>

      <p>
        {alertDialog.message}
      </p>

      <button
        type="button"
        className="article-alert-button"
        onClick={closeAlert}
      >
        OK
      </button>

    </div>
  </div>
)}
    </>
  );
}