"use client";

import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useSession } from "next-auth/react";
import { useBaby } from "@/contexts/baby-context";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { Plus, Pencil, Trash2, ChevronDown, ChevronUp, CheckSquare, Square, AlertCircle } from "lucide-react";

interface Vaccination {
  id: string;
  babyId: string;
  name: string;
  date: string | null;
  dueDate: string | null;
  notes: string | null;
  done: boolean;
  createdAt: string;
}

const PRESET_VACCINES = [
  "BCG",
  "Hépatite B",
  "DTPolio",
  "Pentavalent",
  "Pneumocoque",
  "Méningocoque C",
  "ROR",
  "Varicelle",
  "Hépatite A",
];

const inputCls =
  "w-full px-3 py-2.5 rounded-lg border border-slate-200 dark:border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100";

const emptyForm = { name: "", dueDate: "", date: "", notes: "" };

function formatDate(dateStr: string) {
  return format(new Date(dateStr), "d MMM yyyy", { locale: fr });
}

function isOverdue(v: Vaccination): boolean {
  if (v.done || !v.dueDate) return false;
  return new Date(v.dueDate) < new Date(new Date().toDateString());
}

export default function VaccinationsPage() {
  const qc = useQueryClient();
  const { selectedBaby: baby } = useBaby();
  const { data: session } = useSession();
  const isReadonly = (session?.user as { role?: string } | undefined)?.role === "READONLY";

  const [showForm, setShowForm] = useState(false);
  const [form, setForm] = useState(emptyForm);
  const [saving, setSaving] = useState(false);

  const [editingId, setEditingId] = useState<string | null>(null);
  const [editForm, setEditForm] = useState(emptyForm);
  const [editSaving, setEditSaving] = useState(false);

  const [showDone, setShowDone] = useState(false);
  const [togglingId, setTogglingId] = useState<string | null>(null);

  const { data: vaccinations = [] } = useQuery<Vaccination[]>({
    queryKey: ["vaccinations", baby?.id],
    queryFn: () =>
      fetch(`/api/vaccinations?babyId=${baby!.id}`).then((r) => r.json()),
    enabled: !!baby?.id,
  });

  const upcoming = vaccinations.filter((v) => !v.done);
  const done = vaccinations.filter((v) => v.done);

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    if (!baby) return;
    setSaving(true);
    await fetch("/api/vaccinations", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        babyId: baby.id,
        name: form.name,
        dueDate: form.dueDate ? new Date(form.dueDate).toISOString() : null,
        date: form.date ? new Date(form.date).toISOString() : null,
        notes: form.notes || null,
      }),
    });
    qc.invalidateQueries({ queryKey: ["vaccinations", baby.id] });
    setSaving(false);
    setShowForm(false);
    setForm(emptyForm);
  }

  function startEdit(v: Vaccination) {
    setEditingId(v.id);
    setEditForm({
      name: v.name,
      dueDate: v.dueDate ? format(new Date(v.dueDate), "yyyy-MM-dd") : "",
      date: v.date ? format(new Date(v.date), "yyyy-MM-dd") : "",
      notes: v.notes ?? "",
    });
  }

  async function handleEditSave(e: React.FormEvent, id: string) {
    e.preventDefault();
    if (!baby) return;
    setEditSaving(true);
    await fetch(`/api/vaccinations/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: editForm.name,
        dueDate: editForm.dueDate ? new Date(editForm.dueDate).toISOString() : null,
        date: editForm.date ? new Date(editForm.date).toISOString() : null,
        notes: editForm.notes || null,
      }),
    });
    qc.invalidateQueries({ queryKey: ["vaccinations", baby.id] });
    setEditSaving(false);
    setEditingId(null);
  }

  async function handleDelete(id: string) {
    if (!baby) return;
    if (!confirm("Supprimer ce vaccin ?")) return;
    await fetch(`/api/vaccinations/${id}`, { method: "DELETE" });
    qc.invalidateQueries({ queryKey: ["vaccinations", baby.id] });
  }

  async function handleToggleDone(v: Vaccination) {
    if (!baby || isReadonly) return;
    setTogglingId(v.id);
    const nowDone = !v.done;
    await fetch(`/api/vaccinations/${v.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        done: nowDone,
        date: nowDone && !v.date ? new Date().toISOString() : v.date ?? undefined,
      }),
    });
    qc.invalidateQueries({ queryKey: ["vaccinations", baby.id] });
    setTogglingId(null);
  }

  function VaccinCard({ v }: { v: Vaccination }) {
    const overdue = isOverdue(v);
    const toggling = togglingId === v.id;

    if (editingId === v.id) {
      return (
        <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
          <form onSubmit={(e) => handleEditSave(e, v.id)} className="space-y-3">
            {/* Preset chips */}
            <div>
              <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-2">
                Vaccin
              </label>
              <div className="flex flex-wrap gap-1.5 mb-2">
                {PRESET_VACCINES.map((preset) => (
                  <button
                    key={preset}
                    type="button"
                    onClick={() => setEditForm((f) => ({ ...f, name: preset }))}
                    className={`px-2.5 py-1 rounded-full text-xs font-medium border transition ${
                      editForm.name === preset
                        ? "bg-indigo-600 text-white border-indigo-600"
                        : "border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-indigo-400 dark:hover:border-indigo-500"
                    }`}
                  >
                    {preset}
                  </button>
                ))}
              </div>
              <input
                type="text"
                value={editForm.name}
                onChange={(e) => setEditForm((f) => ({ ...f, name: e.target.value }))}
                required
                placeholder="Nom du vaccin"
                className={inputCls}
              />
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">
                  Date prévue
                </label>
                <input
                  type="date"
                  value={editForm.dueDate}
                  onChange={(e) => setEditForm((f) => ({ ...f, dueDate: e.target.value }))}
                  className={inputCls}
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">
                  Date d&apos;administration
                </label>
                <input
                  type="date"
                  value={editForm.date}
                  onChange={(e) => setEditForm((f) => ({ ...f, date: e.target.value }))}
                  className={inputCls}
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">
                Notes <span className="text-slate-400 font-normal">(optionnel)</span>
              </label>
              <textarea
                value={editForm.notes}
                onChange={(e) => setEditForm((f) => ({ ...f, notes: e.target.value }))}
                rows={2}
                className={inputCls + " resize-none"}
              />
            </div>

            <div className="flex gap-2">
              <button
                type="button"
                onClick={() => setEditingId(null)}
                className="flex-1 py-2 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition"
              >
                Annuler
              </button>
              <button
                type="submit"
                disabled={editSaving}
                className="flex-1 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition disabled:opacity-60"
              >
                {editSaving ? "..." : "Enregistrer"}
              </button>
            </div>
          </form>
        </div>
      );
    }

    return (
      <div
        className={`bg-white dark:bg-slate-800 border rounded-xl px-4 py-3.5 flex items-start gap-3 group transition ${
          overdue
            ? "border-red-200 dark:border-red-800"
            : "border-slate-200 dark:border-slate-700"
        }`}
      >
        {/* Done toggle */}
        {!isReadonly ? (
          <button
            onClick={() => handleToggleDone(v)}
            disabled={toggling}
            className="mt-0.5 flex-shrink-0 text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 disabled:opacity-50 transition"
            aria-label={v.done ? "Marquer non fait" : "Marquer fait"}
          >
            {v.done ? (
              <CheckSquare className="w-5 h-5" />
            ) : (
              <Square className="w-5 h-5" />
            )}
          </button>
        ) : (
          <span className="mt-0.5 flex-shrink-0 text-slate-300 dark:text-slate-600">
            {v.done ? (
              <CheckSquare className="w-5 h-5" />
            ) : (
              <Square className="w-5 h-5" />
            )}
          </span>
        )}

        {/* Content */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <p className="text-sm font-semibold text-slate-900 dark:text-slate-100">
              {v.name}
            </p>
            {overdue && (
              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900/40 text-red-600 dark:text-red-400">
                <AlertCircle className="w-3 h-3" />
                En retard
              </span>
            )}
          </div>

          {v.dueDate && (
            <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
              Prévu le{" "}
              <span className={overdue ? "text-red-500 dark:text-red-400 font-medium" : ""}>
                {formatDate(v.dueDate)}
              </span>
            </p>
          )}
          {v.date && (
            <p className="text-xs text-emerald-600 dark:text-emerald-400 mt-0.5">
              Administré le {formatDate(v.date)}
            </p>
          )}
          {v.notes && (
            <p className="mt-1.5 text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
              {v.notes}
            </p>
          )}
        </div>

        {/* Actions */}
        {!isReadonly && (
          <div className="flex gap-1 flex-shrink-0 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
            <button
              onClick={() => startEdit(v)}
              className="p-1.5 rounded-md text-slate-400 dark:text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950 transition"
              aria-label="Modifier"
            >
              <Pencil className="w-3.5 h-3.5" />
            </button>
            <button
              onClick={() => handleDelete(v.id)}
              className="p-1.5 rounded-md text-slate-400 dark:text-slate-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 transition"
              aria-label="Supprimer"
            >
              <Trash2 className="w-3.5 h-3.5" />
            </button>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="p-4 md:p-8 pb-24 md:pb-8">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
            Vaccinations
          </h1>
          <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
            {baby?.name}
          </p>
        </div>
        {!isReadonly && (
          <button
            onClick={() => {
              setShowForm(!showForm);
              setForm(emptyForm);
            }}
            className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition"
          >
            <Plus className="w-4 h-4" />
            Ajouter un vaccin
          </button>
        )}
      </div>

      {/* Add form */}
      {showForm && !isReadonly && (
        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 mb-6">
          <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4">
            Nouveau vaccin
          </h3>
          <form onSubmit={handleSave} className="space-y-4">
            {/* Preset chips */}
            <div>
              <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-2">
                Vaccin <span className="text-red-400">*</span>
              </label>
              <div className="flex flex-wrap gap-1.5 mb-2">
                {PRESET_VACCINES.map((preset) => (
                  <button
                    key={preset}
                    type="button"
                    onClick={() => setForm((f) => ({ ...f, name: preset }))}
                    className={`px-2.5 py-1 rounded-full text-xs font-medium border transition ${
                      form.name === preset
                        ? "bg-indigo-600 text-white border-indigo-600"
                        : "border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:border-indigo-400 dark:hover:border-indigo-500"
                    }`}
                  >
                    {preset}
                  </button>
                ))}
              </div>
              <input
                type="text"
                value={form.name}
                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
                required
                placeholder="Ou saisir un nom personnalisé"
                className={inputCls}
              />
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">
                  Date prévue
                </label>
                <input
                  type="date"
                  value={form.dueDate}
                  onChange={(e) => setForm((f) => ({ ...f, dueDate: e.target.value }))}
                  className={inputCls}
                />
              </div>
              <div>
                <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">
                  Date d&apos;administration
                </label>
                <input
                  type="date"
                  value={form.date}
                  onChange={(e) => setForm((f) => ({ ...f, date: e.target.value }))}
                  className={inputCls}
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">
                Notes <span className="text-slate-400 font-normal">(optionnel)</span>
              </label>
              <textarea
                value={form.notes}
                onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
                rows={3}
                placeholder="Réactions, lot, remarques..."
                className={inputCls + " resize-none"}
              />
            </div>

            <div className="flex gap-2">
              <button
                type="button"
                onClick={() => setShowForm(false)}
                className="flex-1 py-2.5 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition"
              >
                Annuler
              </button>
              <button
                type="submit"
                disabled={saving}
                className="flex-1 py-2.5 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition disabled:opacity-60"
              >
                {saving ? "Enregistrement..." : "Enregistrer"}
              </button>
            </div>
          </form>
        </div>
      )}

      {/* Empty state */}
      {vaccinations.length === 0 && !showForm && (
        <div className="text-center py-16 text-slate-400 dark:text-slate-500">
          <p className="text-4xl mb-3">💉</p>
          <p className="text-sm">Aucun vaccin enregistré</p>
          {!isReadonly && (
            <button
              onClick={() => setShowForm(true)}
              className="mt-3 text-indigo-600 font-medium text-sm hover:underline"
            >
              Ajouter le premier vaccin
            </button>
          )}
        </div>
      )}

      {/* À venir section */}
      {upcoming.length > 0 && (
        <div className="mb-6">
          <h2 className="text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-3">
            À venir
            <span className="ml-2 text-slate-300 dark:text-slate-600 font-normal normal-case tracking-normal">
              ({upcoming.length})
            </span>
          </h2>
          <div className="space-y-2">
            {upcoming.map((v) => (
              <VaccinCard key={v.id} v={v} />
            ))}
          </div>
        </div>
      )}

      {/* Faits section */}
      {done.length > 0 && (
        <div>
          <button
            onClick={() => setShowDone((s) => !s)}
            className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-3 hover:text-slate-600 dark:hover:text-slate-300 transition"
          >
            {showDone ? (
              <ChevronUp className="w-3.5 h-3.5" />
            ) : (
              <ChevronDown className="w-3.5 h-3.5" />
            )}
            Faits
            <span className="font-normal normal-case tracking-normal text-slate-300 dark:text-slate-600">
              ({done.length})
            </span>
          </button>

          {showDone && (
            <div className="space-y-2">
              {done.map((v) => (
                <VaccinCard key={v.id} v={v} />
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}