"use client";

import { useActionState, useEffect } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
import { addComentarioAction } from "@/server/actions/fichas";
import { initialState } from "@/server/actions/action-state";
import { formatDateTimeCL } from "@/lib/date-format";
import type { FichaDetail } from "@/server/queries/fichas";

export function ComentariosPanel({ ficha, canComment }: { ficha: FichaDetail; canComment: boolean }) {
  const [state, action] = useActionState(addComentarioAction.bind(null, ficha.id), initialState);

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

  return (
    <Card>
      <CardHeader>
        <CardTitle>Observaciones y comentarios</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {canComment ? (
          <form action={action} className="space-y-3">
            <Textarea name="contenido" placeholder="Agregar comentario relevante" />
            <div className="flex justify-end">
              <Button type="submit">Agregar comentario</Button>
            </div>
          </form>
        ) : null}
        <div className="divide-y rounded-md border border-border bg-card">
          {ficha.comentarios.length === 0 ? (
            <p className="p-4 text-sm text-muted-foreground">No hay comentarios registrados.</p>
          ) : (
            ficha.comentarios.map((comentario) => (
              <div key={comentario.id} className="p-4">
                <p className="text-sm">{comentario.contenido}</p>
                <p className="mt-2 text-xs text-muted-foreground">
                  {comentario.user.name} · {formatDateTimeCL(comentario.createdAt)}
                </p>
              </div>
            ))
          )}
        </div>
      </CardContent>
    </Card>
  );
}