import React, { useState, useEffect } from "react";
import { DismissibleAlert } from '../ui/dismissible-alert';
import { useFormContext, useWatch, Controller } from "react-hook-form";
import { useValueSetServiceContext } from "../../services";
import { FhirCodeableConcept, PhotoAttachment } from "../../components";
import { Attachment } from "fhir/r4";
import {
  useFhirRelatedPersonBroadcast,
  useFhirRelatedPersons,
} from "../../hooks";
import { Input } from "../ui/input";
import { Field, FieldLabel } from "../ui/field";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import { RelationValueSetList, relationshipType } from "./FhirRelations";
import {
  AuthorityTier,
  TIER_DESCRIPTIONS,
  TIER_LABELS,
} from "../../services/relatedPersonAuthority";
import { TierChoices } from "../FhirRelatedPersonDisplay/TierChoices";
import { BILLING_DEPENDENCY_NOTE, INVITE_TIER_DESCRIPTIONS } from "../FhirRelatedPersonDisplay/tierWords";
import { Switch } from "../ui/switch";

// F1 authority tier picker order - mirrors CareAccess.tsx's TIER_ORDER (the post-create "Care access"
// control). Kept local rather than re-exported from relatedPersonAuthority.ts to avoid touching that
// file for a 3-item literal outside this task's scope.
const TIER_ORDER: AuthorityTier[] = [
  "assist-only",
  "scheduling-forms",
  "full-proxy",
];

interface FhirRelatedPersonProps {
  elevated?: boolean;
  disabled?: boolean;
  photo: Attachment | undefined;
  onPhotoChange: (photo: Attachment | undefined) => void;
  isNew: boolean;
  enableInlineActions?: boolean;
  /** The patient inviting someone: their own words, and the tiers as choices. */
  patientVoice?: boolean;
}

export const FhirRelatedPerson: React.FC<FhirRelatedPersonProps> = ({
  elevated = true,
  disabled = false,
  photo,
  onPhotoChange,
  isNew,
  patientVoice = false,
}) => {
  const { control, setValue } = useFormContext();
  const inviteTier = useWatch({ control, name: "tier" }) as AuthorityTier | undefined;
  const inviteSeesInvoices = useWatch({ control, name: "allowBillingView" }) === true;
  const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

  const [loading, setLoading] = useState(false);

  // Watch form values for debugging (optional)
  // const formValues = watch();

  // value sets
  // const [languages, setLanguages] = useState<IValueSet[]>([]);
  const [relatedPersonRelationshipType, setRelatedPersonRelationshipType] =
    useState<RelationValueSetList[]>([]);

  useFhirRelatedPersons();
  useFhirRelatedPersonBroadcast();

  useEffect(() => {
    const loadValueSets = async () => {
      setLoading(true);
      try {
        await Promise.all([
          // fetchValueSet(valueSetUrls.languages),
          fetchValueSet(valueSetUrls.relatedPersonRelationshipType),
        ]);

        // setLanguages(languagesValueSet || []);
        setRelatedPersonRelationshipType(relationshipType || []);
      } catch (err) {
        console.error("Error loading value sets:", err);
      } finally {
        setLoading(false);
      }
    };

    loadValueSets();
  }, [fetchValueSet, valueSetUrls]);

  // The patient's invitation, as the family deck draws it: who, how they are related, what they may do.
  if (patientVoice) {
    return (
      <div className="ahr-family-invite">
        <p className="care-access-group ahr-family-invite-first">Who</p>
        {isNew && (
          <Controller
            name="email"
            control={control}
            rules={{ required: "Their email address is required" }}
            render={({ field, fieldState }) => (
              <>
                <label className="sr-only" htmlFor="invite-email">Their email address</label>
                <Input
                  id="invite-email"
                  type="email"
                  placeholder="Their email address"
                  {...field}
                  className="ahr-family-invite-field"
                  disabled={disabled}
                  value={field.value || ""}
                />
                {fieldState.error && (
                  <DismissibleAlert status="error">{fieldState.error.message}</DismissibleAlert>
                )}
              </>
            )}
          />
        )}
        <Controller
          name="name.0.given.0"
          control={control}
          rules={{ required: "Their first name is required" }}
          render={({ field, fieldState }) => (
            <>
              <label className="sr-only" htmlFor="invite-first-name">First name</label>
              <Input
                id="invite-first-name"
                placeholder="First name"
                {...field}
                className="ahr-family-invite-field"
                disabled={disabled}
                value={field.value || ""}
              />
              {fieldState.error && (
                <DismissibleAlert status="error">{fieldState.error.message}</DismissibleAlert>
              )}
            </>
          )}
        />
        <Controller
          name="name.0.family"
          control={control}
          rules={{ required: "Their last name is required" }}
          render={({ field, fieldState }) => (
            <>
              <label className="sr-only" htmlFor="invite-last-name">Last name</label>
              <Input
                id="invite-last-name"
                placeholder="Last name"
                {...field}
                className="ahr-family-invite-field"
                disabled={disabled}
                value={field.value || ""}
              />
              {fieldState.error && (
                <DismissibleAlert status="error">{fieldState.error.message}</DismissibleAlert>
              )}
            </>
          )}
        />
        <div className="ahr-family-invite-rel">
          <FhirCodeableConcept
            label="Relationship"
            context="relationship"
            groupedOptions={relatedPersonRelationshipType}
            multiple={true}
            loading={loading}
            disabled={disabled}
            useShadcn={true}
          />
        </div>
        {isNew && (
          <>
            <p className="care-access-group">What they may do</p>
            <Controller
              name="tier"
              control={control}
              render={({ field }) => (
                <TierChoices
                  name="invite-tier"
                  value={(field.value as AuthorityTier) || "assist-only"}
                  descriptions={INVITE_TIER_DESCRIPTIONS}
                  onChange={(next) => {
                    // Messaging comes with the higher tiers; dropping back starts it off, as in the permissions panel.
                    if (next === "assist-only" && field.value !== "assist-only") setValue("allowMessaging", false);
                    field.onChange(next);
                  }}
                  disabled={disabled}
                />
              )}
            />
            <p className="care-access-group">Separately</p>
            {(inviteTier ?? "assist-only") === "assist-only" && (
              <Controller
                name="allowMessaging"
                control={control}
                render={({ field }) => (
                  <div className="care-access-toggle">
                    <label htmlFor="invite-allow-messaging" className="care-access-check-label">Message the practice for me</label>
                    <Switch id="invite-allow-messaging" checked={field.value === true} disabled={disabled} onCheckedChange={(on) => field.onChange(on === true)} />
                  </div>
                )}
              />
            )}
            <Controller
              name="allowBillingView"
              control={control}
              render={({ field }) => (
                <div className="care-access-toggle">
                  <label htmlFor="invite-allow-billing-view" className="care-access-check-label">See invoices</label>
                  <Switch
                    id="invite-allow-billing-view"
                    checked={field.value === true}
                    disabled={disabled}
                    onCheckedChange={(on) => {
                      if (on !== true) setValue("allowBillingPay", false);
                      field.onChange(on === true);
                    }}
                  />
                </div>
              )}
            />
            <Controller
              name="allowBillingPay"
              control={control}
              render={({ field }) => (
                <div className="care-access-toggle">
                  <label htmlFor="invite-allow-billing-pay" className="care-access-check-label">Pay invoices</label>
                  <Switch
                    id="invite-allow-billing-pay"
                    checked={field.value === true}
                    disabled={disabled || !inviteSeesInvoices}
                    onCheckedChange={(on) => field.onChange(on === true)}
                  />
                </div>
              )}
            />
            <p className="care-access-note">{BILLING_DEPENDENCY_NOTE}</p>
          </>
        )}
      </div>
    );
  }

  return (
    <div style={elevated ? { boxShadow: "none" } : {}}>
      <PhotoAttachment photo={photo} onPhotoChange={onPhotoChange} disabled={disabled} />

      <div className="space-y-3 grid grid-cols-6 gap-2">
        {/* Email - Only show for new records */}
        {isNew && (
          <div className="col-span-6">
            <Controller
              name="email"
              control={control}
              rules={{ required: isNew ? "Login Mail is required" : false }}
              render={({ field, fieldState }) => (
                <>
                  <Field>
                    <FieldLabel>{patientVoice ? "Their email address" : "Login Mail"}</FieldLabel>
                    <Input
                      placeholder="Enter mail"
                      {...field}
                      className="rounded h-9"
                      disabled={disabled}
                      value={field.value || ""}
                    />
                  </Field>
                  {fieldState.error && (
                    <DismissibleAlert status="error">
                      {fieldState.error.message}
                    </DismissibleAlert>
                  )}
                </>
              )}
            />
          </div>
        )}

        {/* First Name */}
        <div className="lg:col-span-2 col-span-3 mt-3">
          <Controller
            name="name.0.given.0"
            control={control}
            rules={{ required: "First Name is required" }}
            render={({ field, fieldState }) => (
              <>
                <Field>
                  <FieldLabel>{patientVoice ? "First name" : "First Name"}</FieldLabel>
                  <Input
                    placeholder="Enter name"
                    {...field}
                    className="rounded h-9"
                    disabled={disabled}
                    value={field.value || ""}
                  />
                </Field>
                {fieldState.error && (
                  <DismissibleAlert status="error">
                    {fieldState.error.message}
                  </DismissibleAlert>
                )}
              </>
            )}
          />
        </div>

        {/* Last Name */}
        <div className="lg:col-span-2 col-span-3">
          <Controller
            name="name.0.family"
            control={control}
            rules={{ required: "Last name is required" }}
            render={({ field, fieldState }) => (
              <>
                <Field>
                  <FieldLabel>{patientVoice ? "Last name" : "Last Name"}</FieldLabel>
                  <Input
                    placeholder="Enter name"
                    {...field}
                    className="rounded h-9"
                    disabled={disabled}
                    value={field.value || ""}
                  />
                </Field>
                {fieldState.error && (
                  <DismissibleAlert status="error">
                    {fieldState.error.message}
                  </DismissibleAlert>
                )}
              </>
            )}
          />
        </div>

        {/* F1 authority tier — captured only at invite; adjustable afterward via the "Care access"
            control on the related person's detail sheet (CareAccess.tsx), not here. RelatedPerson is a
            thin link with no demographics, so this replaces the old birthDate/gender/prefix/suffix
            fields entirely rather than sitting alongside them. */}
        {isNew && (
          <div className="lg:col-span-2 col-span-3">
            <Controller
              name="tier"
              control={control}
              rules={{ required: "Care access level is required" }}
              render={({ field, fieldState }) => {
                const currentTier = (field.value as AuthorityTier) || "assist-only";

                return (
                  <div>
                    <Field>
                      <FieldLabel>Care access level</FieldLabel>
                      <Select
                        disabled={disabled}
                        onValueChange={field.onChange}
                        value={currentTier}
                      >
                        <SelectTrigger
                          data-testid="care-access-tier-trigger"
                          className="w-full h-9 rounded"
                        >
                          <SelectValue placeholder="Select" />
                        </SelectTrigger>
                        <SelectContent>
                          {TIER_ORDER.map((tier) => (
                            <SelectItem key={tier} value={tier}>
                              {TIER_LABELS[tier]}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </Field>
                    <p className="text-xs text-muted-foreground mt-1">
                      {TIER_DESCRIPTIONS[currentTier]}
                    </p>
                    {fieldState.error && (
                      <DismissibleAlert status="error">
                        {fieldState.error.message}
                      </DismissibleAlert>
                    )}
                  </div>
                );
              }}
            />
          </div>
        )}

        {/* Relationship */}
        <div className="lg:col-span-2 col-span-3">
            <FhirCodeableConcept
              label="Relationship"
              context="relationship"
              groupedOptions={relatedPersonRelationshipType}
              multiple={true}
              loading={loading}
              disabled={disabled}
              useShadcn={true}
            />
        </div>
      </div>
    </div>
  );
};

export default FhirRelatedPerson;