import { Fragment, useState } from "react";
import { Button } from "../../../components/ui/button.tsx";
import { Checkbox } from "../../../components/ui/checkbox.tsx";
import { Input } from "../../../components/ui/input.tsx";
import { Label } from "../../../components/ui/label.tsx";
import { ToggleGroupControl, ToggleGroupControlOption } from "../../../components/ui/toggle-group-control.tsx";
import type { CandidateDecision, ImportCandidate, ImportCandidateFields, UncertainMark } from "../../../services/RecordsService.tsx";
import { absentNote, FIELD_LABEL, KIND_LABEL, leaveOutLabel, limitLabel, MARK_LABEL, quoted, restrictionNote, SEPARATOR, structuredSource, unmatchedNote } from "./recordsImportWords.ts";

interface Props {
  candidate: ImportCandidate;
  /** Why adding to the chart is not possible yet, shown instead of the Add and Try adding again buttons. */
  blocked?: string;
  mayDecide: boolean;
  busy: boolean;
  onDecide: (decision: Pick<CandidateDecision, "decision" | "edits" | "confirmed" | "acknowledged">) => void;
}

const EDITABLE = ["text", "date", "dosage", "value", "reaction"] as const;

const ImportCandidateRow = ({ candidate, blocked, mayDecide, busy, onDecide }: Props) => {
  const [editing, setEditing] = useState(false);
  const [edits, setEdits] = useState<Partial<ImportCandidateFields>>({});
  const [confirmed, setConfirmed] = useState<UncertainMark[]>([]);
  // Checks and corrections belong to the proposal they were made against; a changed one starts unchecked.
  const identity = [candidate.candidateId, candidate.version,
    candidate.digest ?? JSON.stringify([candidate.fields, candidate.uncertain, candidate.source])].join("|");
  const [checkedAgainst, setCheckedAgainst] = useState(identity);
  if (checkedAgainst !== identity) {
    setCheckedAgainst(identity);
    setEditing(false);
    setEdits({});
    setConfirmed([]);
  }
  const fields = { ...candidate.fields, ...edits };
  const edited = new Set(Object.keys(edits));
  const open = candidate.uncertain.filter((mark) => !edited.has(mark) && !confirmed.includes(mark));
  const checks = open.filter((mark) => mark !== "assertion");
  // A value the reader could not tie to this item is not offered; staff enter it, or leave it out of the entry.
  const unassigned = (mark: UncertainMark) => (EDITABLE as readonly string[]).includes(mark) && fields[mark as typeof EDITABLE[number]] === undefined;
  const id = "import-" + candidate.candidateId;
  const facts = [KIND_LABEL[candidate.kind], fields.date, fields.dosage, fields.value, fields.reaction].filter(Boolean).join(SEPARATOR);
  const commit = candidate.commit;
  // What the chart already holds from an earlier import of this source item: the same version unchanged is declined, and
  // a copy changed here is looked at, at the version it is now, before this one is added beside it.
  const prior = candidate.alreadyImported ?? [];
  const sameCopy = prior.find((found) => found.sameVersion && !found.editedHere);
  const changedHere = prior.filter((found) => found.editedHere);
  const unreadable = changedHere.filter((found) => !found.localVersion);
  const seenKey = JSON.stringify(changedHere);
  const [seenFor, setSeenFor] = useState<string>();
  const seen = changedHere.length > 0 && seenFor === seenKey;
  const acknowledged = seen ? changedHere.map((found) => ({ resource: found.resource, version: found.localVersion! })) : undefined;
  const addable = !sameCopy && unreadable.length === 0 && (changedHere.length === 0 || seen);
  const source = candidate.structured ? structuredSource(candidate.source.item, candidate.source.version) : undefined;
  const pending = candidate.decision === "pending" && mayDecide;
  const resumable = candidate.decision === "accepted" && (commit?.state === "committing" || commit?.state === "evidence-owed");
  // A refused item the server lets be tried again is held to the same chart checks as adding it.
  const retrying = commit?.state === "rejected" && Boolean(candidate.retryable) && mayDecide;
  const restricted = restrictionNote(candidate.restrictions);

  return (
    <li className="records-import-item">
      <div className="records-import-item__head">
        <span className="records-import-item__what">
          <b>{fields.text}{fields.assertion === "absent" ? absentNote(candidate.kind) : ""}</b>
          <small>{facts}</small>
          {candidate.source.lines?.length ? (
            <small className="records-import-item__source">
              {candidate.source.lines.map((line) => "Page " + line.page + ", line " + line.line + ": " + quoted(line.text)).join(" ")}
            </small>
          ) : candidate.structured ? <small className="records-import-item__source">{source ?? "From the structured record that was sent"}</small> : null}
          {restricted && <small className="records-import-item__source">{restricted}</small>}
          {candidate.limits?.map((limit) => (
            <small key={limit} className={limit === "prescriber-unavailable" ? "records-import-item__source" : "records-import-item__warn"}>{limitLabel(limit)}</small>
          ))}
          {candidate.possibleDuplicates?.length ? <small className="records-import-item__warn">May already be on this chart</small> : null}
          {sameCopy && (
            <small className="records-import-item__warn">
              Already in this chart from an earlier import of this same version ({sameCopy.resource}). Decline this copy.
            </small>
          )}
          {prior.some((found) => found.missingRestrictions === true) && (
            <small className="records-import-item__warn">
              An existing chart copy does not carry all the source restrictions. That copy is unchanged.
            </small>
          )}
          {prior.filter((found) => !found.sameVersion && !found.editedHere).map((found) => (
            <small key={found.resource} className="records-import-item__warn">
              An earlier version of this item is already in this chart from an earlier import ({found.resource}).
            </small>
          ))}
          {changedHere.map((found) => (
            <small key={found.resource} className="records-import-item__warn">
              {found.localVersion
                ? "An earlier import of this item was changed in this chart since: " + found.resource + ", now version " + found.localVersion + "."
                : "An earlier import of this item was changed in this chart since, and " + found.resource + " could not be read as it is now. Try again later."}
            </small>
          ))}
          {candidate.priorCheck === "unknown" && (
            <small className="records-import-item__warn">Whether this item is already in this chart could not be checked; adding it checks again.</small>
          )}
        </span>

        {candidate.decision === "declined" && <span className="records-import-item__done">Declined</span>}
        {candidate.decision === "accepted" && commit?.state === "committed" && (
          <span className="records-import-item__added">
            Added to the chart{commit.refusals?.length ? " after the record service refused an earlier attempt" : ""}
          </span>
        )}
        {commit?.state === "rejected" && (
          <span className="records-import-item__actions">
            <span className="records-import-item__warn">Not added. {commit.reason}</span>
            {retrying && !blocked && !sameCopy && unreadable.length === 0 && (
              <Button className="btn btn-blue-ghost-sm" disabled={busy || !addable}
                onClick={() => onDecide({ decision: "retry", ...(acknowledged ? { acknowledged } : {}) })}>
                Try adding again
              </Button>
            )}
          </span>
        )}
        {resumable && (
          <span className="records-import-item__actions">
            <span className="records-import-item__done">{commit?.state === "evidence-owed" ? "Added; still recording who added it" : "Not confirmed yet"}</span>
            {mayDecide && <Button className="btn btn-blue-ghost-sm" disabled={busy} onClick={() => onDecide({ decision: "accept" })}>Try again</Button>}
          </span>
        )}
        {pending && (
          <span className="records-import-item__actions">
            {!candidate.structured && !editing && <Button className="btn btn-blue-ghost-sm" disabled={busy} onClick={() => setEditing(true)}>Correct</Button>}
            <Button className="btn btn-red-ghost-sm" disabled={busy} onClick={() => onDecide({ decision: "decline" })}>Decline</Button>
            {!blocked && !sameCopy && unreadable.length === 0 && (
              <Button className="btn btn-blue-ghost-sm" disabled={busy || open.length > 0 || fields.assertion === "uncertain" || !addable}
                onClick={() => onDecide({
                  decision: "accept", ...(edited.size ? { edits } : {}), ...(confirmed.length ? { confirmed } : {}), ...(acknowledged ? { acknowledged } : {}),
                })}>
                Add to chart
              </Button>
            )}
          </span>
        )}
      </div>

      {(pending || retrying) && blocked && <p className="records-note">{blocked}</p>}

      {pending && editing && (
        <div className="records-import-item__edit">
          {EDITABLE.filter((name) => name === "text" || candidate.fields[name] !== undefined || name in edits || candidate.uncertain.includes(name)).map((name) => (
            <div className="records-field" key={name}>
              <Label htmlFor={id + "-" + name}>{FIELD_LABEL[name]}</Label>
              <Input id={id + "-" + name} value={fields[name] ?? ""} disabled={busy}
                onChange={(event) => setEdits({ ...edits, [name]: event.target.value })} />
            </div>
          ))}
          <ToggleGroupControl label="The original records it as" value={fields.assertion === "uncertain" ? "" : fields.assertion} isBlock disabled={busy}
            onChange={(value) => setEdits({ ...edits, assertion: value === "absent" ? "absent" : "present" })}>
            <ToggleGroupControlOption value="present" label="Present" />
            <ToggleGroupControlOption value="absent" label="Not present" />
          </ToggleGroupControl>
        </div>
      )}

      {pending && checks.length > 0 && (
        <div className="records-import-item__checks">
          {checks.map((mark) => (
            <Fragment key={mark}>
              {unassigned(mark) && <p className="records-note">{unmatchedNote(mark)}</p>}
              <label className="records-import-item__check" htmlFor={id + "-check-" + mark}>
                <Checkbox id={id + "-check-" + mark} disabled={busy}
                  onCheckedChange={(checked) => setConfirmed(checked ? [...confirmed, mark] : confirmed.filter((m) => m !== mark))} />
                <span>{unassigned(mark) ? leaveOutLabel(mark) : "I checked " + MARK_LABEL[mark] + " against the original"}</span>
              </label>
            </Fragment>
          ))}
        </div>
      )}
      {(pending || retrying) && changedHere.length > 0 && unreadable.length === 0 && (
        <div className="records-import-item__checks">
          <label className="records-import-item__check" htmlFor={id + "-seen"}>
            <Checkbox id={id + "-seen"} disabled={busy} checked={seen} onCheckedChange={(checked) => setSeenFor(checked ? seenKey : undefined)} />
            <span>{"I looked at " + changedHere.map((found) => found.resource).join(" and ") + " as it is now; add this one beside it"}</span>
          </label>
        </div>
      )}
      {pending && fields.assertion === "uncertain" && !editing && (
        <p className="records-note">Say whether the original records this as present or not: choose Correct.</p>
      )}
    </li>
  );
};

export default ImportCandidateRow;