import { useState } from "react";
import { Text } from "@/components/ui/text";
import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
import { formatVendorPortalDateTime } from "@/domain/vendor-portal/lib/status-helpers";
import type { VendorPortalComment } from "@/domain/vendor-portal/types/vendor-portal";

type CommentsSectionProps = {
  token: string;
  dispatchId: number;
  comments: VendorPortalComment[];
  onAdded: (comment: VendorPortalComment) => void;
};

export function CommentsSection({ token, dispatchId, comments, onAdded }: CommentsSectionProps) {
  const [text, setText] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  const submit = async (event: React.FormEvent) => {
    event.preventDefault();
    if (!text.trim()) return;
    setErrorMessage("");
    setSubmitting(true);
    try {
      const added = await vendorPortalApi.addComment(token, dispatchId, text.trim());
      onAdded(added);
      setText("");
    } catch {
      setErrorMessage("Unable to post your comment. Please try again.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <>
      {comments.length === 0 && <Text tone="muted">No comments yet.</Text>}
      {comments.map((comment) => (
        <div key={comment.id} className={`vp-comment ${comment.commentType || ""}`}>
          <div className="vp-comment-meta">
            {comment.commenter || "Unknown"} · {formatVendorPortalDateTime(comment.createdDate)}
          </div>
          <div>{comment.commenttext}</div>
        </div>
      ))}
      <Text variant="error" when={Boolean(errorMessage)}>
        {errorMessage}
      </Text>
      <form onSubmit={(event) => void submit(event)} style={{ marginTop: 12 }}>
        <textarea
          className="vp-textarea"
          placeholder="Add a comment for the dispatcher…"
          value={text}
          onChange={(event) => {
            setText(event.target.value);
            setErrorMessage("");
          }}
        />
        <div className="vp-actions">
          <button
            type="submit"
            className="vp-btn vp-btn-primary"
            disabled={submitting || !text.trim()}
          >
            {submitting ? "Posting…" : "Post Comment"}
          </button>
        </div>
      </form>
    </>
  );
}