import React from "react";
import { Task, TaskInput, TaskOutput } from "fhir/r4";
import { FhirCodeableConceptDisplay } from "../../utils/fhirCodeableConcept";
import { FhirReferenceDisplay } from "../../utils/fhirReference";
import { FhirAnnotationDisplay } from "../../utils/fhirAnnotation";
import { FhirPeriodDisplay } from "../../utils/fhirPeriod";
import { formatDate } from "../../utils/dateUtils";
import { SheetBody, SheetHeader } from "../ui/sheet";
import { formatDateForDisplay } from "../../lib/utils";
import { Calendar, ChevronRight, Utensils } from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../ui/accordion";
import { Card, CardContent, CardHeader } from "../ui/card";
import TaskWithdrawAction from "../TaskWithdrawAction/TaskWithdrawAction.tsx";
import {
  FieldHistoryProvider,
  FieldHistoryScope,
} from "../FieldHistory/FieldHistoryProvider";
import { ShowFieldHistoryToggle } from "../FieldHistory/ShowFieldHistoryToggle";
import { PrintRecord } from "../ui/print-record";
import { RecordEditedMarker } from "../FieldHistory/RecordEditedMarker";
import { Field } from "../FieldHistory/Field";
import { FieldGroup } from "../FieldHistory/FieldLayout";
import { StatusBadge } from "../ui/status";

interface FhirTaskDisplayProps {
  task: Task;
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

// output[]/input[].value[x] is polymorphic across ~20 primitive/complex FHIR types. Every
// primitive variant plus the Reference variant (the ones a real Task producer/consumer actually
// populates) is handled explicitly; anything unmatched falls through to `undefined` so the
// enclosing <Field> renders the uniform muted em-dash rather than a literal "-" string.
const renderTaskValue = (item: TaskInput | TaskOutput): React.ReactNode => {
  if (item.valueBase64Binary) {
    return (
      <div className="font-mono text-xs p-2 bg-[var(--sunken)] rounded break-all max-h-[100px] overflow-y-auto">
        {item.valueBase64Binary}
      </div>
    );
  }
  if (item.valueBoolean !== undefined) {
    return item.valueBoolean ? "Yes" : "No";
  }
  if (item.valueCanonical) {
    return item.valueCanonical;
  }
  if (item.valueCode) {
    return item.valueCode;
  }
  if (item.valueDate) {
    return formatDate(item.valueDate);
  }
  if (item.valueDateTime) {
    return formatDate(item.valueDateTime);
  }
  if (item.valueDecimal !== undefined) {
    return item.valueDecimal.toString();
  }
  if (item.valueId) {
    return item.valueId;
  }
  if (item.valueInstant) {
    return formatDate(item.valueInstant);
  }
  if (item.valueInteger !== undefined) {
    return item.valueInteger.toString();
  }
  if (item.valueMarkdown) {
    return (
      <div className="whitespace-pre-wrap break-words max-h-[120px] overflow-y-auto p-2 bg-[var(--sunken)] rounded text-sm">
        {item.valueMarkdown}
      </div>
    );
  }
  if (item.valueOid) {
    return item.valueOid;
  }
  if (item.valuePositiveInt !== undefined) {
    return item.valuePositiveInt.toString();
  }
  if (item.valueString) {
    return item.valueString;
  }
  if (item.valueTime) {
    return item.valueTime;
  }
  if (item.valueUnsignedInt !== undefined) {
    return item.valueUnsignedInt.toString();
  }
  if (item.valueUri) {
    return (
      <a
        href={item.valueUri}
        target="_blank"
        rel="noopener noreferrer"
        className="text-primary underline"
      >
        {item.valueUri}
      </a>
    );
  }
  if (item.valueUrl) {
    return (
      <a
        href={item.valueUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="text-primary underline"
      >
        {item.valueUrl}
      </a>
    );
  }
  if (item.valueUuid) {
    return item.valueUuid;
  }
  if (item.valueReference) {
    return <FhirReferenceDisplay references={item.valueReference} />;
  }
  return undefined;
};

export const FhirTaskDisplay: React.FC<FhirTaskDisplayProps> = ({
  task,
  isOpen,
  onClose,
  title,
}) => {
  if (!isOpen) return null;

  // / D5 - was a hand-rolled pill: a local STATUS_STYLES record of hardcoded hex pairs
  // applied as an INLINE STYLE, with the raw FHIR code as the text. Colour-only, non-token, and one
  // of twelve near-identical copies. <StatusBadge> carries the shared word plus D5's colour AND shape.
  const renderStatusPill = (status: string | undefined): React.ReactNode => (
    <StatusBadge status={status} />
  );

  return (
    <FieldHistoryProvider>
      <FieldHistoryScope resourceType="Task" id={task.id}>
        <div className="flex min-h-0 flex-1 flex-col" data-print-region="true">
          <SheetHeader className="ak-overlay__header flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-2">
              <span className="text-secondary">{title || "Task Details"}</span>
              <RecordEditedMarker resource={task} />
            </div>
            <ShowFieldHistoryToggle />
            <PrintRecord/>
          </SheetHeader>
          <SheetBody className="overflow-y-auto thin-scrollbar max-h-[calc(100vh-100px)] md:max-h-[calc(100vh-180px)] lg:max-h-[calc(100vh-60px)] py-1 space-y-3">
            <div className="pb-3 border-b space-y-3">
              <div className="space-y-1">
                <p className="font-bold text-lg">
                  {task?.description || "No description available"}
                </p>
                {task.authoredOn && (
                  <span className="flex items-center gap-1 text-xs text-secondary">
                    <Calendar size={14} />{" "}
                    {formatDateForDisplay(task.authoredOn)}
                  </span>
                )}
              </div>
              <div className="grid grid-cols-2 gap-3 w-full">
                <div className="flex flex-col space-y-1 items-start">
                  <span className="text-secondary text-xs">Status</span>
                  {task.status ? (
                    renderStatusPill(task.status)
                  ) : (
                    <span className="text-sm">
                      No status recorded
                    </span>
                  )}
                </div>
                <div className="flex flex-col space-y-1 items-start">
                  <span className="text-secondary text-xs">Owner</span>
                  <span className="text-sm">
                    <FhirReferenceDisplay references={task.owner} />
                  </span>
                </div>
              </div>
            </div>
            <Accordion
              type="single"
              collapsible
              defaultValue="item-1"
              className="space-y-3"
            >
              <AccordionItem
                value="item-1"
                className="bg-surface shadow border rounded p-0 w-full"
              >
                <AccordionTrigger className="hover:no-underline p-0 [&>svg]:hidden group w-full border-b">
                  <div className="p-2 rounded gap-3 w-full">
                    <div className="flex gap-5 items-center justify-between">
                      <div className="flex gap-2 items-center">
                        <div className="p-1.5 bg-[var(--sunken)] text-[var(--ink-muted)] text-xl font-bold rounded">
                          <Utensils size={12} />
                        </div>
                        <div className="items-center text-sm text-secondary">
                          Details
                        </div>
                      </div>
                      <div className="flex gap-4 items-center">
                        <ChevronRight
                          size={20}
                          strokeWidth={1}
                          className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                        />
                      </div>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="flex min-h-0 flex-1 flex-col">
                  <FieldGroup>
                    <Field
                      label="Task Status"
                      value={renderStatusPill(task.status)}
                      path="status"
                    />
                    <Field
                      label="Reason for current status"
                      value={
                        <FhirCodeableConceptDisplay code={task.statusReason} />
                      }
                      path="statusReason.coding[0].display"
                    />
                    <Field
                      label="Business Status"
                      value={
                        <FhirCodeableConceptDisplay
                          code={task.businessStatus}
                        />
                      }
                      path="businessStatus.coding[0].display"
                    />
                    <Field
                      label="Intent"
                      value={
                        task.intent ? (
                          <span className="capitalize">{task.intent}</span>
                        ) : undefined
                      }
                      path="intent"
                    />
                    <Field
                      label="Priority"
                      value={
                        task.priority ? (
                          <span className="capitalize">{task.priority}</span>
                        ) : undefined
                      }
                      path="priority"
                    />
                    <Field
                      label="Type"
                      value={<FhirCodeableConceptDisplay code={task.code} />}
                      path="code.coding[0].display"
                    />
                    <Field
                      label="Description"
                      value={task.description}
                      path="description"
                    />
                    <Field
                      label="Authored On"
                      value={
                        task.authoredOn
                          ? formatDateForDisplay(task.authoredOn)
                          : undefined
                      }
                      path="authoredOn"
                    />
                    <Field
                      label="Last Modified"
                      value={
                        task.lastModified
                          ? formatDateForDisplay(task.lastModified)
                          : undefined
                      }
                      path="lastModified"
                    />
                    <Field
                      label="What task is acting on"
                      value={<FhirReferenceDisplay references={task.focus} />}
                    />
                    <Field
                      label="Beneficiary (Patient)"
                      value={<FhirReferenceDisplay references={task.for} />}
                    />
                    <Field
                      label="Encounter created as part of"
                      value={
                        <FhirReferenceDisplay references={task.encounter} />
                      }
                    />
                    <Field
                      label="Responsible Individual"
                      value={<FhirReferenceDisplay references={task.owner} />}
                    />
                    <Field
                      label="Who is asking for task to be done"
                      value={
                        <FhirReferenceDisplay references={task.requester} />
                      }
                    />
                    <Field
                      label="Where task occurs"
                      value={
                        <FhirReferenceDisplay references={task.location} />
                      }
                    />
                    <Field
                      label="Part of Composite Task"
                      value={<FhirReferenceDisplay references={task.partOf} />}
                    />
                    <Field
                      label="Based On"
                      value={
                        <FhirReferenceDisplay references={task.basedOn} />
                      }
                    />
                    <Field
                      label="Insurance"
                      value={
                        <FhirReferenceDisplay references={task.insurance} />
                      }
                    />
                    <Field
                      label="Relevant History"
                      value={
                        <FhirReferenceDisplay
                          references={task.relevantHistory}
                        />
                      }
                    />
                    <Field
                      label="Why task is needed (References)"
                      value={
                        <FhirReferenceDisplay
                          references={task.reasonReference}
                        />
                      }
                    />
                    <Field
                      label="Requested Performer"
                      value={
                        <FhirCodeableConceptDisplay
                          code={task.performerType}
                          multiple={true}
                        />
                      }
                    />
                    <Field
                      label="Why task is needed"
                      value={
                        <FhirCodeableConceptDisplay code={task.reasonCode} />
                      }
                      path="reasonCode.coding[0].display"
                    />
                    <Field
                      label="Notes"
                      value={
                        <FhirAnnotationDisplay
                          annotation={task.note}
                          multiple={true}
                        />
                      }
                    />
                    <Field
                      label="Execution Period"
                      value={
                        <FhirPeriodDisplay period={task.executionPeriod} />
                      }
                    />
                  </FieldGroup>
                </AccordionContent>
              </AccordionItem>
              <AccordionItem
                value="item-2"
                className="bg-surface shadow border rounded p-0 w-full"
              >
                <AccordionTrigger className="hover:no-underline p-0 [&>svg]:hidden group w-full border-b">
                  <div className="p-2 rounded gap-3 w-full">
                    <div className="flex gap-5 items-center justify-between">
                      <div className="flex gap-2 items-center">
                        <div className="p-1.5 bg-[var(--sunken)] text-[var(--ink-muted)] text-xl font-bold rounded">
                          <Utensils size={12} />
                        </div>
                        <div className="items-center text-sm text-secondary">
                          Output &amp; Restrictions
                        </div>
                      </div>
                      <div className="flex gap-4 items-center">
                        <ChevronRight
                          size={20}
                          strokeWidth={1}
                          className="transition-transform duration-200 group-data-[state=open]:rotate-90"
                        />
                      </div>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="p-3 space-y-4">
                  <div className="space-y-3">
                    <p className="text-sm font-bold">Outputs</p>
                    {task.output && task.output.length > 0 ? (
                      task.output.map((output, index) => (
                        <Card key={index}>
                          <CardHeader>
                            <h5 className="text-sm font-semibold">
                              Output {index + 1}
                            </h5>
                          </CardHeader>
                          <CardContent>
                            <FieldGroup>
                              <Field
                                label="Type"
                                value={
                                  <FhirCodeableConceptDisplay
                                    code={output.type}
                                  />
                                }
                              />
                              <Field
                                label="Value"
                                value={renderTaskValue(output)}
                              />
                            </FieldGroup>
                          </CardContent>
                        </Card>
                      ))
                    ) : (
                      <p className="text-sm text-secondary italic">
                        No output recorded
                      </p>
                    )}
                  </div>
                  <div className="space-y-3">
                    <p className="text-sm font-bold">Inputs</p>
                    {task.input && task.input.length > 0 ? (
                      task.input.map((input, index) => (
                        <Card key={index}>
                          <CardHeader>
                            <h5 className="text-sm font-semibold">
                              Input {index + 1}
                            </h5>
                          </CardHeader>
                          <CardContent>
                            <FieldGroup>
                              <Field
                                label="Type"
                                value={
                                  <FhirCodeableConceptDisplay
                                    code={input.type}
                                  />
                                }
                              />
                              <Field
                                label="Value"
                                value={renderTaskValue(input)}
                              />
                            </FieldGroup>
                          </CardContent>
                        </Card>
                      ))
                    ) : (
                      <p className="text-sm text-secondary italic">
                        No input recorded
                      </p>
                    )}
                  </div>
                  <div className="space-y-2">
                    <p className="text-sm font-bold">
                      Restriction
                    </p>
                    <FieldGroup>
                      <Field
                        label="How many times to repeat"
                        value={task.restriction?.repetitions}
                      />
                      <Field
                        label="When fulfillment sought"
                        value={
                          <FhirPeriodDisplay
                            period={task.restriction?.period}
                          />
                        }
                      />
                      <Field
                        label="For whom is fulfillment sought"
                        value={
                          <FhirReferenceDisplay
                            references={task.restriction?.recipient}
                          />
                        }
                      />
                    </FieldGroup>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </SheetBody>
          <TaskWithdrawAction task={task} onWithdrawn={onClose} />
        </div>
      </FieldHistoryScope>
    </FieldHistoryProvider>
  );
};

export default FhirTaskDisplay;