"use client";

import { useState } from "react";
import toast from "react-hot-toast";
import { FaCircleQuestion } from "react-icons/fa6";

import Button from "@/components/common/button";
import { useClientPortalAuth } from "@/components/pages/client/participant-list/common/client-portal-auth-context";
import { Query } from "@/types/participant-list/provisional-types";
import { useTimezone } from "@/components/pages/client/participant-list/common/timezone-context";
import { formatQueryTimestamp } from "@/components/pages/client/participant-list/common/format-session-time";
import { respondToQueryFromPortal } from "@/services/client/participant-list/portal-actions";

type QueryCardProps = {
  query: Query;
  canEdit: boolean;
  onResponded: () => void;
};

function QueryCard({ query, canEdit, onResponded }: QueryCardProps) {
  const { auth, handlePortalStatus } = useClientPortalAuth();
  const { timezone } = useTimezone();
  const [response, setResponse] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const canRespond =
    canEdit && query.status === "pending" && !query.raisedByClient;

  const submitResponse = async () => {
    const trimmedResponse = response.trim();
    if (!trimmedResponse) {
      toast.error("Enter a response before submitting.");
      return;
    }
    if (!auth || !canRespond || isSubmitting) return;
    setIsSubmitting(true);
    try {
      const result = await respondToQueryFromPortal(
        auth,
        query.id,
        trimmedResponse,
      );
      if (result.ok) {
        toast.success("Response sent.");
        setResponse("");
        onResponded();
      } else if (!handlePortalStatus(result.status)) {
        toast.error("Could not send response. Please try again.");
      }
    } catch {
      toast.error("Could not send response. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="space-y-3 p-2">
      <div className="flex items-start gap-3">
        <div className="flex size-8 items-center justify-center rounded-full bg-sky-100 dark:bg-sky-900/30 shrink-0 mt-0.5">
          <FaCircleQuestion className="size-3.5 text-sky-600 dark:text-sky-400" />
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm text-gray-900 dark:text-white">{query.text}</p>
          <p className="text-xs text-gray-400 dark:text-gray-300 mt-1">
            Raised by {query.raisedBy} &middot;{" "}
            {formatQueryTimestamp(query.raisedAt, timezone)}
          </p>
        </div>
      </div>

      {query.response && (
        <div className="rounded-lg bg-gray-100 p-3 dark:bg-neutral-800">
          <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500 dark:text-neutral-400">
            Response
          </p>
          <p className="mt-1 text-sm text-gray-900 dark:text-white">
            {query.response}
          </p>
          {(query.respondedBy || query.respondedAt) && (
            <p className="mt-2 text-xs text-gray-500 dark:text-neutral-400">
              {query.respondedBy
                ? `Responded by ${query.respondedBy}`
                : "Response recorded"}
              {query.respondedAt && (
                <>
                  {" "}
                  &middot; {formatQueryTimestamp(query.respondedAt, timezone)}
                </>
              )}
            </p>
          )}
        </div>
      )}

      {canRespond && (
        <div className="space-y-2">
          <label
            className="text-xs font-semibold text-gray-700 dark:text-neutral-300"
            htmlFor={`query-response-${query.id}`}
          >
            Respond to this query
          </label>
          <textarea
            className="min-h-20 w-full rounded-lg border border-gray-200 bg-white p-2 text-sm text-gray-900 outline-none focus:ring-1 focus:ring-midnightBlue dark:border-neutral-700 dark:bg-neutral-800 dark:text-white"
            disabled={isSubmitting}
            id={`query-response-${query.id}`}
            value={response}
            onChange={(event) => setResponse(event.target.value)}
          />
          <Button
            btnLabel="Send response"
            customVariant="client"
            isDisabled={isSubmitting}
            isLoading={isSubmitting}
            size="sm"
            onClick={submitResponse}
          />
        </div>
      )}
    </div>
  );
}

export default QueryCard;