"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 { getAdminSlides, createAdminSlide, updateAdminSlide } from "@/lib/api/admin/contenu";
import { uploadImage } from "@/lib/api/upload";
import styles from "../../form.module.css";

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

  const [titre, setTitre] = useState("");
  const [sousTitre, setSousTitre] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [ctaPrimaireLabel, setCtaPrimaireLabel] = useState("Commander mes sacs");
  const [ctaPrimaireLien, setCtaPrimaireLien] = useState("/nos-sacs");
  const [ctaSecondaireLabel, setCtaSecondaireLabel] = useState("Devenir annonceur");
  const [ctaSecondaireLien, setCtaSecondaireLien] = useState("/espace-pub");
  const [ordre, setOrdre] = useState(0);
  const [actif, setActif] = useState(true);

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

  useEffect(() => {
    if (!isNew) {
      getAdminSlides()
        .then((slides) => {
          const s = slides.find((item) => item.id === Number(id));
          if (s) {
            setTitre(s.titre);
            setSousTitre(s.sousTitre);
            setImageUrl(s.imageUrl);
            setCtaPrimaireLabel(s.ctaPrimaireLabel || "");
            setCtaPrimaireLien(s.ctaPrimaireLien || "");
            setCtaSecondaireLabel(s.ctaSecondaireLabel || "");
            setCtaSecondaireLien(s.ctaSecondaireLien || "");
            setOrdre(s.ordre);
            setActif(s.actif);
          }
        })
        .catch(() => toast.error("Impossible de charger le slide."))
        .finally(() => setChargement(false));
    }
  }, [id, isNew]);

  const handleImageChange = async (file: File) => {
    setUploadEnCours(true);
    try {
      const url = await uploadImage(file);
      setImageUrl(url);
      toast.success("Image 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 || !sousTitre || !imageUrl) {
      toast.error("Le titre, le sous-titre et l'image sont obligatoires.");
      return;
    }

    setEnregistrement(true);

    const payload = {
      titre,
      sousTitre,
      imageUrl,
      ctaPrimaireLabel: ctaPrimaireLabel || null,
      ctaPrimaireLien: ctaPrimaireLien || null,
      ctaSecondaireLabel: ctaSecondaireLabel || null,
      ctaSecondaireLien: ctaSecondaireLien || null,
      ordre: Number(ordre),
      actif,
    };

    try {
      if (isNew) {
        await createAdminSlide(payload);
        toast.success("Slide créé avec succès !");
      } else {
        await updateAdminSlide(Number(id), payload);
        toast.success("Slide mis à jour avec succès !");
      }
      router.push("/admin/contenu");
    } catch {
      toast.error("Erreur lors de l'enregistrement du slide.");
    } finally {
      setEnregistrement(false);
    }
  };

  if (chargement) return <PageLoader />;

  return (
    <div className={styles.page}>
      <PageHeader
        title={isNew ? "Nouveau slide carrousel" : "Modifier le slide"}
        subtitle="Configurez le visuel d'accroche et les textes du Hero public."
        actions={
          <Button variant="secondaire" onClick={() => router.push("/admin/contenu")}>
            <ArrowLeft size={16} />
            Retour aux contenus
          </Button>
        }
      />

      <div className={styles.grille}>
        <Card title="Textes & Visuel">
          <div className={styles.formulaire}>
            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Titre d'accroche (H1)</label>
              <Textarea value={titre} onChange={(e) => setTitre(e.target.value)} rows={2} required />
              <span style={{ display: "block", fontSize: "12px", color: "var(--gris-moyen)", marginTop: "6px" }}>
                Pour mettre un mot en vert, entourez-le de{" "}
                <code>&lt;span class=&quot;texte-accent&quot;&gt;mot&lt;/span&gt;</code>
              </span>
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Sous-titre explicatif</label>
              <Textarea value={sousTitre} onChange={(e) => setSousTitre(e.target.value)} rows={3} required />
            </div>

            <div>
              <FileInput
                label="Image du sac / slide (format carré ou 4:3 recommandé)"
                value={imageUrl}
                loading={uploadEnCours}
                onChange={handleImageChange}
                onClear={() => setImageUrl("")}
              />
            </div>
          </div>
        </Card>

        <Card title="Boutons d'action (CTA) & Ordre">
          <div className={styles.formulaire}>
            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Bouton principal (Label)</label>
              <Input value={ctaPrimaireLabel} onChange={(e) => setCtaPrimaireLabel(e.target.value)} />
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Bouton principal (Lien URL)</label>
              <Input value={ctaPrimaireLien} onChange={(e) => setCtaPrimaireLien(e.target.value)} />
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Bouton secondaire (Label)</label>
              <Input value={ctaSecondaireLabel} onChange={(e) => setCtaSecondaireLabel(e.target.value)} />
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Bouton secondaire (Lien URL)</label>
              <Input value={ctaSecondaireLien} onChange={(e) => setCtaSecondaireLien(e.target.value)} />
            </div>

            <div>
              <label style={{ display: "block", fontSize: "13px", fontWeight: 600, marginBottom: "6px" }}>Ordre d'affichage</label>
              <Input type="number" value={ordre} onChange={(e) => setOrdre(Number(e.target.value))} />
            </div>
            <div style={{ marginTop: "8px" }}>
              <Checkbox checked={actif} onChange={setActif} label="Slide actif (visible)" />
            </div>
          </div>
        </Card>
      </div>

      <div className={styles.actionFlottante}>
        <Button onClick={sauvegarder} loading={enregistrement}>
          <Save size={16} />
          {isNew ? "Créer le slide" : "Enregistrer le slide"}
        </Button>
      </div>
    </div>
  );
}