/* Claim — evidence. What is on file, what is missing, and what is unusable.
   Commit model: INSTANT. No Save button; requesting a document again and
   marking one illegible apply immediately and raise an undo toast. Both are
   reversible judgements, so neither opens a confirm dialog.
   Data state: populated — every claim in the fixture carries all five
   checklist rows, in one of three states. */
(() => {
  const {
    Button, Card, CardHeader, CardTitle, CardDescription, CardPanel, CardFooter,
    Alert, AlertTitle, AlertDescription, AlertAction, Badge,
  } = window.OriginDesignSystem_7c998b;

  function EvidenceScreen({ claim, now, onNavigate, onTransition, onDocumentAction }) {
    const received = claim.documents.filter((d) => MANDATORY_DOCUMENT_TYPES.indexOf(d.type) > -1 && d.status === "received");
    const missing = CLAIM_FLAGS.missingMandatory(claim);
    const illegible = claim.documents.filter((d) => d.status === "illegible");
    const receipt = claim.documents.find((d) => d.type === "delivery_receipt");
    const owed = missing.map((type) => {
      const doc = claim.documents.find((d) => d.type === type);
      const from = type === "surveyor_report" ? "the surveyor" : "the customer";
      return { type: type, from: from, status: doc ? doc.status : "requested" };
    });

    return (
      <div className="cd-page">
        <ClaimHeader claim={claim} now={now} view="evidence" onNavigate={onNavigate} onTransition={onTransition} />

        <div className="cd-bleed">
          <div className="cd-split cd-split--band">
            <div className="cd-section">
              <div className="cd-figures">
                <Figure
                  xl
                  label="Mandatory documents on file"
                  value={received.length + " of " + MANDATORY_DOCUMENT_TYPES.length}
                  note={illegible.length ? illegible.length + " rejected as illegible, and rejected counts as not on file." : "Port photographs are supporting evidence, not mandatory."}
                />
                <div style={{ minWidth: "14rem", alignSelf: "center" }}>
                  <DocumentPips documents={claim.documents} />
                  <div className="cd-figure__note" style={{ marginTop: "var(--space-2)" }}>One pip per checklist row, in the order below.</div>
                </div>
              </div>
            </div>
            <div className="cd-section">
              {missing.length ? (
                <Alert variant="warning">
                  <AlertTitle>You cannot decide this claim yet</AlertTitle>
                  <AlertDescription>
                    {missing.map((m) => labelOf(DOCUMENT_TYPES, m)).join(", ")} {missing.length === 1 ? "is" : "are"} outstanding. The decision surface stays closed until every mandatory document is on file.
                  </AlertDescription>
                </Alert>
              ) : (
                <Alert variant="success">
                  <AlertTitle>The file is complete</AlertTitle>
                  <AlertDescription>All {MANDATORY_DOCUMENT_TYPES.length} mandatory documents are on file, so this claim can be decided — the decision is in the header above.</AlertDescription>
                </Alert>
              )}
            </div>
          </div>
        </div>

        <div className="cd-split cd-split--even">
          <Card>
            <CardHeader>
              <CardTitle>Document checklist</CardTitle>
              <CardDescription>Mandatory rows are marked. Nothing here is deleted — a document rejected as illegible stays on the file with its reason.</CardDescription>
            </CardHeader>
            <CardPanel>
              <div className="cd-rows">
                {DOCUMENT_TYPES.map((type) => {
                  const doc = claim.documents.find((d) => d.type === type.value) || { type: type.value, status: "requested", receivedAt: null, note: null };
                  const transitions = documentTransitions(doc);
                  return (
                    <div className="cd-doc" key={type.value}>
                      <div className="cd-doc__main">
                        <span className="cd-doc__title">
                          {type.label}
                          {type.mandatory ? <Badge size="sm" variant="outline">Mandatory</Badge> : <span className="cd-muted" style={{ fontSize: "var(--text-xs)", fontWeight: "var(--font-weight-normal)" }}>Supporting</span>}
                        </span>
                        <span className="cd-doc__note">
                          {doc.receivedAt ? "Received " + formatAbsolute(doc.receivedAt) : "Not received"}
                          {doc.note ? " — " + doc.note : ""}
                        </span>
                      </div>
                      <div className="cd-doc__side">
                        <StatusBadge values={DOCUMENT_STATUS} value={doc.status} />
                        {transitions.length ? (
                          <span className="cd-actions__row">
                            {transitions.map((t) => (
                              <Button
                                key={t.id}
                                size="xs"
                                variant="outline"
                                onClick={() => onDocumentAction(claim, doc, t)}
                              >{t.label}</Button>
                            ))}
                          </span>
                        ) : null}
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardPanel>
            <CardFooter className="cd-foot">
              <span>{claim.documents.filter((d) => d.status === "received").length} of {DOCUMENT_TYPES.length} checklist rows received, {MANDATORY_DOCUMENT_TYPES.length} of them mandatory.</span>
            </CardFooter>
          </Card>

          <div className="cd-col cd-col--tight">
            <Card>
              <CardHeader>
                <CardTitle>What the delivery receipt says</CardTitle>
                <CardDescription>The exception noted at delivery is where a cargo claim is won or lost.</CardDescription>
              </CardHeader>
              <CardPanel>
                {receipt && receipt.status === "received" ? (
                  <div className="cd-letter">
                    <p className="cd-letter__quote">{receipt.note || "Received without exception."}</p>
                    <p className="cd-note">Signed at {claim.pod} on {formatAbsolute(claim.deliveredAt)}.</p>
                  </div>
                ) : (
                  <p className="cd-note">The delivery receipt is {receipt ? labelOf(DOCUMENT_STATUS.map((s) => ({ value: s.id, label: s.label.toLowerCase() })), receipt.status) : "not on file"}, so there is no exception on record. Without it the carrier cannot show the condition of the cargo at delivery.</p>
                )}
              </CardPanel>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Who owes what</CardTitle>
                <CardDescription>{owed.length ? owed.length + " outstanding" : "Nothing outstanding"}</CardDescription>
              </CardHeader>
              <CardPanel>
                {owed.length ? (
                  <div className="cd-rows">
                    {owed.map((row) => (
                      <div className="cd-row" key={row.type}>
                        <div className="cd-row__main">
                          <span className="cd-record__name">{labelOf(DOCUMENT_TYPES, row.type)}</span>
                          <span className="cd-record__meta">Owed by {row.from}</span>
                        </div>
                        <div className="cd-row__side">
                          <StatusBadge values={DOCUMENT_STATUS} value={row.status} />
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="cd-note">Every mandatory document is on file. Port photographs are supporting evidence only, so a gap there never blocks a decision.</p>
                )}
              </CardPanel>
            </Card>
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { EvidenceScreen });
})();
