"use client";
// Annonces : création avec aperçu Markdown, liste avec épingle, activation et suppression.
import { useState } from "react";
import { Megaphone, Pin, PinOff, Power, Trash2 } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Markdown } from "@/components/chat/markdown";
import { Badge, Button, Card, EmptyState, Input, Label, Modal, Skeleton, Spinner, Tabs, Textarea } from "@/components/ui";
import { ErrorBanner, SuccessFlash, Toggle, fmtDate, postJson, useFetchJson } from "./shared";

type Announcement = {
  id: number;
  title: string;
  body: string;
  course_code: string | null;
  pinned: number;
  active: number;
  created_by: number | null;
  created_at: string;
};

const COURSE_OPTIONS = [
  { value: "", label: "Tous les cours" },
  { value: "IMM1003", label: "IMM1003" },
  { value: "IMM1033", label: "IMM1033" },
];

export function AdminAnnouncements() {
  const { data, error, loading, reload } = useFetchJson<{ announcements: Announcement[] }>("/api/admin/announcements");

  // Formulaire de création
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [courseCode, setCourseCode] = useState("");
  const [pinned, setPinned] = useState(false);
  const [editTab, setEditTab] = useState("write");
  const [creating, setCreating] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);
  const [flash, setFlash] = useState<string | null>(null);

  // Actions sur la liste
  const [actionError, setActionError] = useState<string | null>(null);
  const [busyId, setBusyId] = useState<number | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Announcement | null>(null);
  const [deleting, setDeleting] = useState(false);

  async function create() {
    if (!title.trim() || !body.trim()) {
      setFormError("Le titre et le corps de l'annonce sont requis.");
      return;
    }
    setCreating(true);
    setFormError(null);
    try {
      await postJson("/api/admin/announcements", {
        action: "create",
        title: title.trim(),
        body: body.trim(),
        courseCode: courseCode === "" ? null : courseCode,
        pinned,
      });
      setTitle("");
      setBody("");
      setCourseCode("");
      setPinned(false);
      setEditTab("write");
      setFlash("Annonce publiée.");
      setTimeout(() => setFlash(null), 3500);
      await reload();
    } catch (e) {
      setFormError(e instanceof Error ? e.message : "La publication a échoué.");
    } finally {
      setCreating(false);
    }
  }

  async function update(id: number, patch: { active?: boolean; pinned?: boolean }) {
    setBusyId(id);
    setActionError(null);
    try {
      await postJson("/api/admin/announcements", { action: "update", id, ...patch });
      await reload();
    } catch (e) {
      setActionError(e instanceof Error ? e.message : "L'action a échoué.");
    } finally {
      setBusyId(null);
    }
  }

  async function remove() {
    if (!deleteTarget) return;
    setDeleting(true);
    setActionError(null);
    try {
      await postJson("/api/admin/announcements", { action: "delete", id: deleteTarget.id });
      setDeleteTarget(null);
      await reload();
    } catch (e) {
      setActionError(e instanceof Error ? e.message : "La suppression a échoué.");
    } finally {
      setDeleting(false);
    }
  }

  return (
    <div className="animate-fade-up">
      <PageHeader title="Annonces" subtitle="Messages du professeur affichés aux étudiant·e·s" />

      {flash && <div className="mb-4"><SuccessFlash message={flash} /></div>}

      {/* Création */}
      <Card className="mb-6 p-5">
        <h2 className="mb-4 text-[15px] font-semibold text-fg">Nouvelle annonce</h2>
        <div className="grid gap-4 md:grid-cols-[1fr_220px]">
          <div>
            <Label htmlFor="ann-title">Titre</Label>
            <Input
              id="ann-title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              maxLength={200}
              placeholder="Ex. : Report de la remise du travail 2"
            />
          </div>
          <div>
            <Label htmlFor="ann-course">Cours ciblé</Label>
            <select
              id="ann-course"
              value={courseCode}
              onChange={(e) => setCourseCode(e.target.value)}
              className="h-10 w-full rounded-lg border border-app bg-card px-3 text-sm text-fg outline-none transition-shadow focus:border-brand-400 focus:ring-2 focus:ring-brand-500/25"
            >
              {COURSE_OPTIONS.map((o) => (
                <option key={o.value} value={o.value}>{o.label}</option>
              ))}
            </select>
          </div>
        </div>

        <div className="mt-4">
          <div className="mb-1.5 flex items-center justify-between">
            <Label className="mb-0">Corps (Markdown)</Label>
            <Tabs
              tabs={[{ key: "write", label: "Écrire" }, { key: "preview", label: "Aperçu" }]}
              active={editTab}
              onChange={setEditTab}
            />
          </div>
          {editTab === "write" ? (
            <Textarea
              value={body}
              onChange={(e) => setBody(e.target.value)}
              rows={6}
              maxLength={10_000}
              placeholder={"Contenu de l'annonce — le **Markdown** est pris en charge."}
              aria-label="Corps de l'annonce"
            />
          ) : (
            <div className="min-h-[9rem] rounded-lg border border-app bg-surface-1 px-4 py-3 dark:bg-brand-950/40">
              {body.trim() ? <Markdown content={body} /> : <p className="text-sm italic text-muted">Rien à prévisualiser.</p>}
            </div>
          )}
        </div>

        {formError && <div className="mt-3"><ErrorBanner message={formError} /></div>}

        <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
          <label className="flex items-center gap-2.5 text-[13px] text-fg">
            <Toggle checked={pinned} onChange={setPinned} label="Épingler l'annonce" />
            Épinglée (affichée en priorité)
          </label>
          <Button onClick={create} disabled={creating}>
            {creating && <Spinner />}
            Publier l'annonce
          </Button>
        </div>
      </Card>

      {actionError && <div className="mb-4"><ErrorBanner message={actionError} /></div>}

      {/* Liste */}
      {loading ? (
        <div className="space-y-3">
          {Array.from({ length: 3 }).map((_, i) => (
            <Skeleton key={i} className="h-28" />
          ))}
        </div>
      ) : error || !data ? (
        <ErrorBanner message={error ?? "Données indisponibles."} onRetry={reload} />
      ) : data.announcements.length === 0 ? (
        <Card>
          <EmptyState
            icon={<Megaphone />}
            title="Aucune annonce"
            description="Les annonces publiées apparaîtront ici, les plus récentes en premier."
          />
        </Card>
      ) : (
        <div className="space-y-3">
          {data.announcements.map((a) => (
            <Card key={a.id} className="p-4">
              <div className="flex flex-wrap items-start justify-between gap-3">
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center gap-2">
                    <h3 className="font-semibold text-fg">{a.title}</h3>
                    {a.pinned ? <Badge tone="gold"><Pin size={11} /> Épinglée</Badge> : null}
                    <Badge tone={a.active ? "green" : "neutral"}>{a.active ? "Active" : "Inactive"}</Badge>
                    <Badge tone="brand">{a.course_code ?? "Tous les cours"}</Badge>
                  </div>
                  <p className="mt-0.5 text-[12px] tabular-nums text-muted">{fmtDate(a.created_at)}</p>
                </div>
                <div className="flex shrink-0 items-center gap-1">
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => update(a.id, { pinned: !a.pinned })}
                    disabled={busyId === a.id}
                    title={a.pinned ? "Désépingler" : "Épingler"}
                  >
                    {a.pinned ? <PinOff size={14} /> : <Pin size={14} />}
                    {a.pinned ? "Désépingler" : "Épingler"}
                  </Button>
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => update(a.id, { active: !a.active })}
                    disabled={busyId === a.id}
                    title={a.active ? "Désactiver" : "Réactiver"}
                  >
                    <Power size={14} />
                    {a.active ? "Désactiver" : "Réactiver"}
                  </Button>
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => setDeleteTarget(a)}
                    disabled={busyId === a.id}
                    className="text-red-600 hover:bg-red-500/10 dark:text-red-400"
                    title="Supprimer"
                  >
                    <Trash2 size={14} />
                    Supprimer
                  </Button>
                </div>
              </div>
              <div className="mt-2.5 border-t border-app pt-2.5">
                <Markdown content={a.body} />
              </div>
            </Card>
          ))}
        </div>
      )}

      <Modal open={deleteTarget !== null} onClose={() => setDeleteTarget(null)} title="Supprimer l'annonce">
        <p className="text-sm text-fg">
          Supprimer définitivement l'annonce « <b>{deleteTarget?.title}</b> »&nbsp;? Cette action est irréversible.
        </p>
        <div className="mt-5 flex justify-end gap-2">
          <Button variant="secondary" onClick={() => setDeleteTarget(null)} disabled={deleting}>
            Annuler
          </Button>
          <Button variant="danger" onClick={remove} disabled={deleting}>
            {deleting && <Spinner />}
            Supprimer
          </Button>
        </div>
      </Modal>
    </div>
  );
}