"use client";

import { useActionState, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { Edit3, MessageSquare, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { formatDateTimeCL } from "@/lib/date-format";
import { bitacoraInitialState } from "@/lib/bitacora-state";
import { deleteBitacoraComentarioAction, updateBitacoraComentarioAction, addBitacoraComentarioAction } from "@/server/actions/bitacora";

type BitacoraComentario = {
  id: string;
  comentario: string;
  createdAt: Date;
  usuario: { id: string; name: string | null; email: string | null };
};

export function BitacoraCommentsPanel({
  hitoId,
  comentarios,
  canManage,
  currentUserId,
}: {
  hitoId: string;
  comentarios: BitacoraComentario[];
  canManage: boolean;
  currentUserId: string;
}) {
  const router = useRouter();
  const [state, formAction] = useActionState(addBitacoraComentarioAction.bind(null, hitoId), bitacoraInitialState);

  useEffect(() => {
    if (!state.message) return;
    if (state.success) {
      toast.success(state.message);
      router.refresh();
    } else {
      toast.error(state.message);
    }
  }, [router, state.message, state.success]);

  return (
    <Card className="border-border shadow-sm">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <MessageSquare className="h-4 w-4 text-muted-foreground" />
          Comentarios
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {canManage ? (
          <form action={formAction} className="space-y-3 rounded-lg border border-border bg-muted p-4">
            <Textarea name="comentario" rows={4} placeholder="Agregar comentario sobre el hito..." />
            <div className="flex justify-end">
              <Button type="submit" size="sm">
                Agregar comentario
              </Button>
            </div>
          </form>
        ) : null}

        <div className="space-y-3">
          {comentarios.length === 0 ? (
            <p className="text-sm text-muted-foreground">Sin comentarios registrados.</p>
          ) : (
            comentarios.map((comentario) => (
              <BitacoraCommentItem
                key={comentario.id}
                hitoId={hitoId}
                comentario={comentario}
                canEdit={canManage || comentario.usuario.id === currentUserId}
              />
            ))
          )}
        </div>
      </CardContent>
    </Card>
  );
}

function BitacoraCommentItem({
  hitoId,
  comentario,
  canEdit,
}: {
  hitoId: string;
  comentario: BitacoraComentario;
  canEdit: boolean;
}) {
  const router = useRouter();
  const [editing, setEditing] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [state, formAction] = useActionState(
    updateBitacoraComentarioAction.bind(null, comentario.id, hitoId),
    bitacoraInitialState,
  );

  useEffect(() => {
    if (!state.message) return;
    if (state.success) {
      toast.success(state.message);
      window.setTimeout(() => setEditing(false), 0);
      router.refresh();
    } else {
      toast.error(state.message);
    }
  }, [router, state.message, state.success]);

  const author = useMemo(() => comentario.usuario.name ?? comentario.usuario.email ?? "-", [comentario.usuario.email, comentario.usuario.name]);

  if (editing) {
    return (
      <form action={formAction} className="rounded-lg border border-border bg-card p-4 shadow-sm">
        <div className="mb-3 flex items-center justify-between gap-2">
          <div>
            <p className="text-sm font-medium text-foreground">{author}</p>
            <p className="text-xs text-muted-foreground">{formatDateTimeCL(comentario.createdAt)}</p>
          </div>
        </div>
        <Textarea name="comentario" rows={4} defaultValue={state.formValues?.comentario?.toString() ?? comentario.comentario} />
        {state.errors?.comentario?.[0] ? <p className="mt-2 text-xs text-destructive">{state.errors.comentario[0]}</p> : null}
        <div className="mt-3 flex flex-wrap justify-end gap-2">
          <Button type="button" variant="outline" onClick={() => setEditing(false)}>
            Cancelar
          </Button>
          <Button type="submit">Guardar cambios</Button>
        </div>
      </form>
    );
  }

  return (
    <>
      <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
        <div className="flex items-start justify-between gap-3">
          <div className="space-y-2">
            <div className="flex flex-wrap items-center gap-2">
              <p className="text-sm font-medium text-foreground">{author}</p>
              <p className="text-xs text-muted-foreground">{formatDateTimeCL(comentario.createdAt)}</p>
            </div>
            <p className="whitespace-pre-wrap text-sm leading-6 text-foreground">{comentario.comentario}</p>
          </div>
          {canEdit ? (
            <div className="flex items-center gap-1">
              <Button type="button" size="icon" variant="ghost" className="h-8 w-8" onClick={() => setEditing(true)} title="Editar comentario" aria-label="Editar comentario">
                <Edit3 className="h-4 w-4" />
              </Button>
              <Button type="button" size="icon" variant="ghost" className="h-8 w-8 text-destructive hover:bg-danger-subtle hover:text-destructive" onClick={() => setDeleteOpen(true)} title="Eliminar comentario" aria-label="Eliminar comentario">
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          ) : null}
        </div>
      </div>

      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Eliminar comentario</DialogTitle>
            <DialogDescription>
              ¿Está seguro de eliminar este comentario? Esta acción quitará el comentario de la bitácora, pero se mantendrá registro en auditoría.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="flex-col gap-2 sm:flex-row sm:justify-end">
            <Button type="button" variant="outline" onClick={() => setDeleteOpen(false)}>
              Cancelar
            </Button>
            <Button
              type="button"
              variant="destructive"
              onClick={async () => {
                try {
                  await deleteBitacoraComentarioAction(comentario.id, hitoId);
                  toast.success("Comentario eliminado correctamente.");
                  setDeleteOpen(false);
                  router.refresh();
                } catch (error) {
                  toast.error(error instanceof Error ? error.message : "No fue posible eliminar el comentario.");
                }
              }}
            >
              Sí, eliminar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}