"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Save, ArrowLeft } from "lucide-react";
import PageHeader from "@/components/admin/ui/PageHeader";
import Card from "@/components/admin/ui/Card";
import Input from "@/components/admin/ui/Input";
import Textarea from "@/components/admin/ui/Textarea";
import Checkbox from "@/components/admin/ui/Checkbox";
import Button from "@/components/admin/ui/Button";
import FileInput from "@/components/admin/ui/FileInput";
import { PageLoader } from "@/components/admin/ui/Loader";
import { toast } from "sonner";
import { getAdminArticles, createAdminArticle, updateAdminArticle } from "@/lib/api/admin/contenu";
import { uploadImage } from "@/lib/api/upload";
import type { AdminArticle } from "@/types/admin";
import styles from "../../form.module.css";

export default function ArticleFormPage() {
  const params = useParams<{ id?: string }>();
  const router = useRouter();
  const id = params?.id;
  const isNew = !id || id === "nouveau";

  const [titre, setTitre] = useState("");
  const [slug, setSlug] = useState("");
  const [auteur, setAuteur] = useState("");
  const [contenu, setContenu] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [publie, setPublie] = useState(false);

  const [chargement, setChargement] = useState(!isNew);
  const [enregistrement, setEnregistrement] = useState(false);
  const [uploadEnCours, setUploadEnCours] = useState(false);

  useEffect(() => {
    if (!isNew) {
      getAdminArticles()
        .then((articles) => {
          const a = articles.find((item) => item.id === Number(id));
          if (a) {
            setTitre(a.titre);
            setSlug(a.slug);
            setAuteur(a.auteur || "");
            setContenu(a.contenu || "");
            setImageUrl(a.imageUrl || "");
            setPublie(a.publie);
          }
        })
        .catch(() => toast.error("Impossible de charger l'article."))
        .finally(() => setChargement(false));
    }
  }, [id, isNew]);

  const handleTitreChange = (val: string) => {
    setTitre(val);
    if (isNew) {
      setSlug(
        val
          .toLowerCase()
          .replace(/[^\w\s-]/g, "")
          .replace(/[\s_-]+/g, "-")
          .replace(/^-+|-+$/g, ""),
      );
    }
  };

  const handleImageChange = async (file: File) => {
    setUploadEnCours(true);
    try {
      const url = await uploadImage(file);
      setImageUrl(url);
      toast.success("Image de l'article téléchargée avec succès !");
    } catch {
      toast.error("Erreur lors de l'upload de l'image.");
    } finally {
      setUploadEnCours(false);
    }
  };

  const sauvegarder = async () => {
    if (!titre || !slug || !contenu) {
      toast.error("Le titre, le slug et le contenu de l'article sont obligatoires.");
      return;
    }

    setEnregistrement(true);

    const payload = {
      titre,
      slug,
      auteur: auteur || "Pubago",
      contenu,
      imageUrl: imageUrl || null,
      publie,
    };

    try {
      if (isNew) {
        await createAdminArticle(payload);
        toast.success("Article publié avec succès !");
      } else {
        await updateAdminArticle(Number(id), payload);
        toast.success("Article mis à jour avec succès !");
      }
      router.push("/admin/contenu");
    } catch {
      toast.error("Erreur lors de l'enregistrement de l'article.");
    } finally {
      setEnregistrement(false);
    }
  };

  if (chargement) return <PageLoader />;

  return (
    <div className={styles.page}>
      <PageHeader
        title={isNew ? "Nouvel article de blog" : "Modifier l'article"}
        subtitle="Rédigez des contenus sur les alternatives écologiques et l'actualité de Pubago."
        actions={
          <Button variant="secondaire" onClick={() => router.push("/admin/contenu")}>
            <ArrowLeft size={16} />
            Retour aux contenus
          </Button>
        }
      />

      <div className={styles.grille}>
        <Card title="Contenu de l'article">
          <div className={styles.formulaire}>
            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Titre de l'article</label>
              <Input value={titre} onChange={(e) => handleTitreChange(e.target.value)} required />
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Slug URL</label>
              <Input value={slug} onChange={(e) => setSlug(e.target.value)} required />
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Auteur</label>
              <Input value={auteur} onChange={(e) => setAuteur(e.target.value)} placeholder="Pubago" />
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Corps de l'article</label>
              <Textarea value={contenu} onChange={(e) => setContenu(e.target.value)} rows={10} required />
            </div>
          </div>
        </Card>

        <Card title="Image & Publication">
          <div className={styles.formulaire}>
            <div>
              <FileInput
                label="Image de couverture (16:9 recommandé)"
                value={imageUrl}
                loading={uploadEnCours}
                onChange={handleImageChange}
                onClear={() => setImageUrl("")}
              />
            </div>

            <div style={{ marginTop: "16px" }}>
              <Checkbox
                checked={publie}
                onChange={setPublie}
                label="Publier immédiatement cet article"
              />
            </div>
          </div>
        </Card>
      </div>

      <div className={styles.actionFlottante}>
        <Button onClick={sauvegarder} loading={enregistrement}>
          <Save size={16} />
          {isNew ? "Publier l'article" : "Enregistrer les modifications"}
        </Button>
      </div>
    </div>
  );
}