"use client";

import { useCallback, useEffect, useState } from "react";
import { Spinner } from "@nextui-org/react";

import Button from "@/components/common/button";
import { useClientPortalAuth } from "@/components/pages/client/participant-list/common/client-portal-auth-context";
import ParticipantDetailsHome from "@/components/pages/client/participant-list/participant-details/home";
import { getParticipantDetailForPortal } from "@/services/client/participant-list/portal-actions";
import {
  CriteriaGroup,
  FieldConfig,
  Participant,
  ProfileInformationAnswer,
  Query,
} from "@/types/participant-list/provisional-types";

type ParticipantDetailData = {
  participant: Participant;
  queries: Query[];
  visibility: FieldConfig[];
  criteriaGroups: CriteriaGroup[];
  profileInformation: ProfileInformationAnswer[];
};

export default function ParticipantDetailPage({
  params,
}: {
  params: { id: string };
}) {
  const { auth, canEdit, handlePortalStatus } = useClientPortalAuth();
  const [data, setData] = useState<ParticipantDetailData | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const load = useCallback(async () => {
    if (!auth) return;
    const participantReference = params.id;
    if (!participantReference) {
      setError("Participant not found.");
      setIsLoading(false);
      return;
    }
    setIsLoading(true);
    setError(null);
    try {
      const result = await getParticipantDetailForPortal(
        auth,
        participantReference,
      );
      if (result.ok) {
        setData(result.data);
      } else if (!handlePortalStatus(result.status)) {
        setError(
          result.status === 404
            ? "Participant not found."
            : "We couldn't load this participant. Please try again.",
        );
      }
    } catch {
      setError("We couldn't load this participant. Please try again.");
    } finally {
      setIsLoading(false);
    }
  }, [auth, handlePortalStatus, params.id]);

  useEffect(() => {
    void load();
  }, [load]);

  if (isLoading) {
    return (
      <div className="flex min-h-[50vh] items-center justify-center">
        <Spinner label="Loading participant…" />
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="mx-auto max-w-md px-4 py-16 text-center">
        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
        <Button
          btnLabel="Try again"
          className="mt-4"
          customVariant="client"
          onClick={() => void load()}
        />
      </div>
    );
  }

  return (
    <ParticipantDetailsHome
      canEdit={canEdit}
      criteriaGroups={data.criteriaGroups}
      participant={data.participant}
      profileInformation={data.profileInformation}
      queries={data.queries}
      visibilityControls={data.visibility}
      onDecisionSaved={() => void load()}
      onQueryResponded={() => void load()}
    />
  );
}