/* global React */
const { useState } = React;

function Field({ label, children }) {
  return (
    <div className="field">
      <label>{label}</label>
      {children}
    </div>
  );
}

function TextField({ label, value, onChange, placeholder }) {
  return (
    <Field label={label}>
      <input
        type="text"
        value={value ?? ""}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
      />
    </Field>
  );
}

function TextArea({ label, value, onChange, rows = 4 }) {
  return (
    <Field label={label}>
      <textarea
        rows={rows}
        value={value ?? ""}
        onChange={(e) => onChange(e.target.value)}
      />
    </Field>
  );
}

function Repeater({ items, label, addLabel, onAdd, onRemove, renderItem }) {
  return (
    <Field label={label}>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {(items || []).map((item, i) => (
          <div className="repeater-item" key={i}>
            <div className="item-head">
              <span className="idx">#{i + 1}</span>
              <div className="spacer" />
              <button className="danger" onClick={() => onRemove(i)}>Remove</button>
            </div>
            {renderItem(item, i)}
          </div>
        ))}
        <button className="repeater-add subtle" onClick={onAdd}>+ {addLabel}</button>
      </div>
    </Field>
  );
}

function MetadataPane({ letter, updateMetadata }) {
  const md = letter?.metadata || {};
  const q = letter?.quality || {};

  const set = (path, value) => updateMetadata(path, value);

  // Convenience binders
  const t = (path) => ({
    value: getPath(md, path),
    onChange: (v) => set(path, v),
  });

  return (
    <div className="metadata">
      <div className="meta-inner">

        {/* Quality (read-only) */}
        <section className="meta-section">
          <header>
            <h2>Quality</h2>
            <span className="meta-section-tag">read-only</span>
            <div className="spacer" />
            <span className={
              "quality-badge " +
              (q.status === "accepted" ? "" : q.status === "rejected" ? "bad" : "warn")
            }>
              {q.status || "—"}
            </span>
          </header>
          <div className="body">
            <div className="score-row">
              <div className="score-tile">
                <div className="lbl">Final score</div>
                <div className="val">{fmt(q.finalScore)}</div>
              </div>
              <div className="score-tile">
                <div className="lbl">Metadata</div>
                <div className="val">{fmt(q.metadataScore)}</div>
              </div>
              <div className="score-tile">
                <div className="lbl">Transcription</div>
                <div className="val">{fmt(q.transcriptionScore)}</div>
              </div>
            </div>
            {q.reason && (
              <div className="readonly-block">
                <div className="label">Reason</div>
                {q.reason}
              </div>
            )}
            {Array.isArray(q.fieldIssues) && q.fieldIssues.length > 0 && (
              <div className="issue-list">
                {q.fieldIssues.map((iss, i) => (
                  <div className="issue" key={i}>
                    <div><span className="field-name">{iss.field}</span> · {iss.severity}</div>
                    <div>{iss.message}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </section>

        {/* Title & ID */}
        <section className="meta-section">
          <header><h2>Title &amp; identifiers</h2></header>
          <div className="body">
            <TextField label="Title" {...t(["titleInfo", "title"])} />
            <div className="field-row">
              <TextField label="Identifier" {...t(["identifier"])} />
              <TextField label="Type of resource" {...t(["typeOfResource"])} />
            </div>
            <div className="field-row three">
              <TextField label="Genre label" {...t(["genre", "label"])} />
              <TextField label="Genre authority" {...t(["genre", "authority"])} />
              <TextField label="Genre value URI" {...t(["genre", "valueURI"])} />
            </div>
          </div>
        </section>

        {/* Names */}
        <section className="meta-section">
          <header><h2>Names</h2></header>
          <div className="body">
            <Repeater
              label="People & organizations"
              items={md.name}
              addLabel="Add name"
              onAdd={() =>
                set(["name"], [...(md.name || []), {
                  role: "creator", roleTermUri: "", roleTerm: "creator",
                  namePart: "", authority: null, valueURI: null,
                }])
              }
              onRemove={(i) => set(["name"], md.name.filter((_, j) => j !== i))}
              renderItem={(n, i) => (
                <>
                  <div className="field-row three">
                    <TextField label="Name part" value={n.namePart} onChange={(v) => set(["name", i, "namePart"], v)} />
                    <TextField label="Role" value={n.role} onChange={(v) => set(["name", i, "role"], v)} />
                    <TextField label="Role term" value={n.roleTerm} onChange={(v) => set(["name", i, "roleTerm"], v)} />
                  </div>
                  <div className="field-row three">
                    <TextField label="Role term URI" value={n.roleTermUri} onChange={(v) => set(["name", i, "roleTermUri"], v)} />
                    <TextField label="Authority" value={n.authority} onChange={(v) => set(["name", i, "authority"], v)} />
                    <TextField label="Value URI" value={n.valueURI} onChange={(v) => set(["name", i, "valueURI"], v)} />
                  </div>
                </>
              )}
            />
          </div>
        </section>

        {/* Origin / language / physical */}
        <section className="meta-section">
          <header><h2>Origin &amp; description</h2></header>
          <div className="body">
            <div className="field-row">
              <TextField label="Date created" {...t(["originInfo", "dateCreated"])} />
              <TextField label="Place" {...t(["originInfo", "place"])} />
            </div>
            <div className="field-row">
              <TextField label="Language" {...t(["language", "languageTerm"])} />
              <TextField label="Language authority" {...t(["language", "authority"])} />
            </div>
            <div className="field-row">
              <TextField label="Form" {...t(["physicalDescription", "form"])} />
              <TextField label="Extent" {...t(["physicalDescription", "extent"])} />
            </div>
            <TextArea label="Abstract" rows={5} {...t(["abstract"])} />
            <TextArea label="Note" rows={4} {...t(["note"])} />
            <TextField label="Access condition" {...t(["accessCondition"])} />
          </div>
        </section>

        {/* Subjects */}
        <section className="meta-section">
          <header><h2>Subjects</h2></header>
          <div className="body">
            <Repeater
              label="Subject headings"
              items={md.subject}
              addLabel="Add subject"
              onAdd={() =>
                set(["subject"], [...(md.subject || []), {
                  type: "topic", term: "", authority: "lcsh", valueURI: "",
                }])
              }
              onRemove={(i) => set(["subject"], md.subject.filter((_, j) => j !== i))}
              renderItem={(s, i) => (
                <>
                  <div className="field-row">
                    <TextField label="Term" value={s.term} onChange={(v) => set(["subject", i, "term"], v)} />
                    <TextField label="Type" value={s.type} onChange={(v) => set(["subject", i, "type"], v)} />
                  </div>
                  <div className="field-row">
                    <TextField label="Authority" value={s.authority} onChange={(v) => set(["subject", i, "authority"], v)} />
                    <TextField label="Value URI" value={s.valueURI} onChange={(v) => set(["subject", i, "valueURI"], v)} />
                  </div>
                </>
              )}
            />
          </div>
        </section>

        {/* Location */}
        <section className="meta-section">
          <header><h2>Location</h2></header>
          <div className="body">
            <Repeater
              label="Source URLs"
              items={md.location?.urls}
              addLabel="Add URL"
              onAdd={() =>
                set(["location", "urls"], [...((md.location && md.location.urls) || []), ""])
              }
              onRemove={(i) =>
                set(["location", "urls"], md.location.urls.filter((_, j) => j !== i))
              }
              renderItem={(u, i) => (
                <TextField label="URL" value={u} onChange={(v) => set(["location", "urls", i], v)} />
              )}
            />
          </div>
        </section>

        {/* Record info */}
        <section className="meta-section">
          <header><h2>Record info</h2></header>
          <div className="body">
            <div className="field-row">
              <TextField label="Source" {...t(["recordInfo", "recordContentSource"])} />
              <TextField label="Creation date" {...t(["recordInfo", "recordCreationDate"])} />
            </div>
            <TextArea label="Origin" rows={3} {...t(["recordInfo", "recordOrigin"])} />
            <div className="field-row">
              <TextField label="MODS version" {...t(["modsVersion"])} />
              <TextField label="XML namespace" {...t(["xmlns"])} />
            </div>
          </div>
        </section>

      </div>
    </div>
  );
}

function getPath(obj, path) {
  let cur = obj;
  for (const k of path) {
    if (cur == null) return undefined;
    cur = cur[k];
  }
  return cur;
}

function fmt(n) {
  if (typeof n !== "number") return "—";
  return n.toFixed(3);
}

window.MetadataPane = MetadataPane;