import { Card, CardBody, Tooltip } from "@nextui-org/react";
import { FaChevronRight } from "react-icons/fa6";
import { FiCopy } from "react-icons/fi";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { SlSpeech } from "react-icons/sl";

import {
  Participant,
  FieldConfig,
  FieldKey,
} from "@/types/participant-list/provisional-types";
import ParticipantAvatar from "@/components/pages/client/participant-list/participants/partials/avatar";
import StatusBadge from "@/components/pages/client/participant-list/participants/partials/status-badge";
import { formatIncentives } from "@/components/pages/client/participant-list/participants/utils";
import { isFieldVisible } from "@/components/pages/client/participant-list/common/utils";
import { useClientPortalAuth } from "@/components/pages/client/participant-list/common/client-portal-auth-context";

type ParticipantCardProps = {
  participant: Participant;
  visibilityControls: FieldConfig[];
};

function ParticipantCard({
  participant,
  visibilityControls,
}: ParticipantCardProps) {
  const router = useRouter();
  const { routes } = useClientPortalAuth();
  const {
    reference,
    id,
    status,
    queries,
    firstName,
    age,
    session,
    phone,
    lastName,
  } = participant;

  const visible = (key: FieldKey) => isFieldVisible(key, visibilityControls);

  const incentiveLabel = formatIncentives(participant.incentives);
  const availabilityText = visible("availability")
    ? participant.availabilityText
    : null;

  return (
    <Card
      className={`group bg-white dark:bg-neutral-800 border shadow-none rounded-sm ${
        queries > 0
          ? "border-l-2 border-l-warning-400 border-r-gray-150 border-t-gray-150 border-b-gray-150 dark:border-r-neutral-700 dark:border-t-neutral-700 dark:border-b-neutral-700"
          : "border-gray-150 dark:border-neutral-700"
      }`}
    >
      <CardBody className="p-0">
        <div className="flex items-center gap-3 p-4 pb-3">
          <ParticipantAvatar
            firstName={firstName}
            lastName={lastName}
            visibilityControls={visibilityControls}
          />
          <div className="flex-1 min-w-0">
            <div className="flex items-center justify-between gap-2">
              <div className="min-w-0">
                <p className="font-semibold text-sm text-gray-900 dark:text-white leading-tight">
                  {firstName.split(" ")[0]}
                  {lastName && (
                    <>
                      {" "}
                      <span>{lastName}</span>
                    </>
                  )}
                </p>
                {visible("id") && id != null && (
                  <p className="text-[11px] text-gray-400 dark:text-gray-300 tabular-nums mt-0.5">
                    ID: {id}
                  </p>
                )}
              </div>
              <StatusBadge status={status} />
            </div>
          </div>
        </div>

        <div className="px-4 pb-3 grid grid-cols-2 gap-x-4 gap-y-2">
          {age != null && (
            <div>
              <p className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-0.5">
                Age
              </p>
              <p className="text-xs text-gray-700 dark:text-neutral-300 tabular-nums">
                {age}
              </p>
            </div>
          )}

          <div>
            <p className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-0.5">
              Incentive
            </p>
            <p className="text-xs font-semibold text-gray-800 dark:text-white">
              {incentiveLabel}
            </p>
          </div>

          {!!phone && (
            <div className="col-span-2">
              <p className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-0.5">
                Phone
              </p>
              <p className="text-xs text-gray-700 dark:text-neutral-300">
                {phone}
              </p>
            </div>
          )}

          {!!session && (
            <div className="col-span-2">
              <p className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-0.5">
                Session
              </p>
              {visible("sessionLink") && session.link ? (
                <Tooltip
                  classNames={{
                    content: "text-xs shadow-none border border-1 p-2",
                  }}
                  content={session.link}
                  delay={300}
                >
                  <button
                    className="inline-flex items-center gap-1.5 text-xs text-gray-600 dark:text-neutral-300 hover:text-gray-900 dark:hover:text-white transition-colors"
                    type="button"
                    onClick={() => {
                      navigator.clipboard.writeText(session.link);
                      toast.success("Session link copied to clipboard.");
                    }}
                  >
                    {session.location ?? session.type}
                    <FiCopy className="size-2.5 text-gray-400 dark:text-gray-300" />
                  </button>
                </Tooltip>
              ) : (
                <p className="text-xs text-gray-600 dark:text-neutral-400">
                  {session.location ?? session.type}
                </p>
              )}
            </div>
          )}

          {!!availabilityText && (
            <div className="col-span-2">
              <p className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-0.5">
                Availability
              </p>
              <p className="text-xs text-gray-700 dark:text-neutral-300 whitespace-pre-wrap">
                {availabilityText}
              </p>
            </div>
          )}
        </div>

        <div className="flex items-center justify-between px-4 py-2.5 border-t border-gray-100 dark:border-neutral-700 bg-gray-50/50 dark:bg-neutral-800/50 rounded-b-xl">
          {queries > 0 ? (
            <span className="text-[11px] font-medium text-amber-600 dark:text-amber-400 gap-1 inline-flex items-center">
              <SlSpeech className="size-3 inline" />
              {queries} {queries === 1 ? "query" : "queries"} open
            </span>
          ) : (
            <span className="text-[11px] text-gray-400 dark:text-gray-300">
              No queries
            </span>
          )}

          <button
            className="inline-flex items-center gap-1 text-[11px] font-medium text-gray-500 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-white transition-colors group-hover:text-gray-700 dark:group-hover:text-neutral-300"
            type="button"
            onClick={() =>
              router.push(
                `${routes.participants}/${encodeURIComponent(reference)}`,
              )
            }
          >
            View
            <FaChevronRight className="size-2 transition-transform group-hover:translate-x-0.5" />
          </button>
        </div>
      </CardBody>
    </Card>
  );
}

export default ParticipantCard;