/* global React, Icon, MemberFilter, portalApi */

function fmtPSize(bytes) {
  if (!bytes) return "—";
  if (bytes < 1024) return bytes + " B";
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + " KB";
  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
}

function fmtPDate(d) {
  if (!d) return "—";
  return new Date(d).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
}

function pDocIcon(name) {
  const ext = (name || "").split(".").pop().toLowerCase();
  if (["jpg","jpeg","png","gif","webp"].includes(ext)) return "image";
  if (ext === "pdf") return "file-text";
  if (["doc","docx"].includes(ext)) return "file-text";
  return "paperclip";
}

const P_STATUS = {
  verified: { label: "Verified",       chipClass: "chip-success", dot: "var(--success-500)" },
  pending:  { label: "Pending review", chipClass: "chip-warning", dot: "var(--warning-500)" },
  internal: { label: "From Smash",     chipClass: "chip-info",    dot: "var(--info-500)"    },
};

function UploadArea({ engagements, onClose, onUploaded, prefillEngId }) {
  const [engId, setEngId]         = React.useState(prefillEngId || "");
  const [kind, setKind]           = React.useState("");
  const [file, setFile]           = React.useState(null);
  const [dragging, setDragging]   = React.useState(false);
  const [uploading, setUploading] = React.useState(false);
  const [done, setDone]           = React.useState(false);
  const [error, setError]         = React.useState("");
  const fileRef = React.useRef(null);

  const kinds = ["Identity","Visa","Medical","Legal","License","Education","Attestation","Other"];

  function handleFiles(files) {
    if (!files || !files[0]) return;
    const f = files[0];
    if (f.size > 20 * 1024 * 1024) { setError("File too large — maximum 20 MB."); return; }
    setError("");
    setFile(f);
  }

  async function submit() {
    if (!engId) { setError("Please select a service."); return; }
    if (!file)  { setError("Please select a file to upload."); return; }
    setUploading(true);
    setError("");
    try {
      const fd = new FormData();
      fd.append("file", file);
      fd.append("engagementId", engId);
      if (kind) fd.append("kind", kind);
      await portalApi.upload("/documents", fd);
      setDone(true);
    } catch (err) {
      setError(err.message || "Upload failed");
      setUploading(false);
    }
  }

  if (done) {
    return (
      <>
        <div className="scrim" onClick={onUploaded} />
        <div className="modal" role="dialog" aria-modal="true">
          <div style={{ padding: "48px 32px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
            <div style={{ width: 56, height: 56, borderRadius: 999, background: "var(--success-50)", color: "var(--success-700)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="check" size={28} />
            </div>
            <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Document uploaded</h2>
            <p style={{ margin: 0, color: "var(--fg-3)", fontSize: 14 }}>
              <b style={{ color: "var(--fg-1)" }}>{file.name}</b> has been sent to the Smash team for verification.
            </p>
            <button className="btn btn-primary" style={{ marginTop: 8 }} onClick={onUploaded}>Done</button>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" role="dialog" aria-modal="true">
        <div className="modal-head">
          <div>
            <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.16em", fontWeight: 600, color: "var(--brand-burgundy)", marginBottom: 4 }}>Documents</div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Upload a document</h2>
          </div>
          <button className="icon-btn" onClick={onClose} style={{ border: "1px solid var(--border-subtle)", borderRadius: 6 }}>
            <Icon name="x" size={18} />
          </button>
        </div>
        <div className="modal-body">
          {error && (
            <div style={{ background: "var(--danger-50)", color: "var(--danger-700)", border: "1px solid var(--danger-200)", borderRadius: 6, padding: "8px 12px", fontSize: 13 }}>
              {error}
            </div>
          )}
          <div className="field">
            <label>Related service</label>
            <select value={engId} onChange={ev => setEngId(ev.target.value)}>
              <option value="">Select a service…</option>
              {engagements.map(eng => (
                <option key={eng._id || eng.id} value={eng._id || eng.id}>
                  {eng.title || eng.service || "Service"}
                </option>
              ))}
            </select>
          </div>
          <div className="field">
            <label>Document type <span style={{ fontWeight: 400, color: "var(--fg-3)" }}>(optional)</span></label>
            <select value={kind} onChange={ev => setKind(ev.target.value)}>
              <option value="">Select a type…</option>
              {kinds.map(k => <option key={k} value={k}>{k}</option>)}
            </select>
          </div>
          <div>
            <input ref={fileRef} type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
              style={{ display: "none" }} onChange={ev => handleFiles(ev.target.files)} />
            {file ? (
              <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", background: "var(--plum-50)", border: "1px solid var(--plum-200)", borderRadius: 8 }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: "#fff", color: "var(--brand-burgundy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, border: "1px solid var(--plum-200)" }}>
                  <Icon name={pDocIcon(file.name)} size={18} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{file.name}</div>
                  <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2 }}>{fmtPSize(file.size)}</div>
                </div>
                <button onClick={() => { setFile(null); if (fileRef.current) fileRef.current.value = ""; }}
                  style={{ border: 0, background: "transparent", cursor: "pointer", color: "var(--fg-3)", padding: 4, display: "flex" }}>
                  <Icon name="x" size={16} />
                </button>
              </div>
            ) : (
              <div
                onClick={() => fileRef.current && fileRef.current.click()}
                onDragOver={ev => { ev.preventDefault(); setDragging(true); }}
                onDragLeave={() => setDragging(false)}
                onDrop={ev => { ev.preventDefault(); setDragging(false); handleFiles(ev.dataTransfer.files); }}
                style={{
                  border: dragging ? "2px dashed var(--brand-burgundy)" : "2px dashed var(--border-strong)",
                  borderRadius: 10, padding: "32px 20px", textAlign: "center",
                  background: dragging ? "var(--plum-50)" : "var(--ink-50)",
                  transition: "all 180ms", cursor: "pointer",
                }}>
                <Icon name="upload-cloud" size={30} />
                <div style={{ marginTop: 10, fontSize: 14, fontWeight: 500 }}>Click to browse or drag a file here</div>
                <div style={{ fontSize: 12.5, color: "var(--fg-3)", marginTop: 4 }}>PDF, JPG, PNG — max 20 MB</div>
              </div>
            )}
          </div>
          <div className="modal-footer">
            <button className="btn btn-secondary" onClick={onClose} disabled={uploading}>Cancel</button>
            <button className="btn btn-primary" onClick={submit} disabled={uploading}>
              {uploading ? <><Icon name="loader" size={14} />Uploading…</> : <><Icon name="upload" size={14} />Upload</>}
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

function PortalDocumentsPage({ user = {} }) {
  const [docs, setDocs]                 = React.useState([]);
  const [engagements, setEngagements]   = React.useState([]);
  const [loading, setLoading]           = React.useState(true);
  const [filter, setFilter]             = React.useState("all");
  const [memberFilter, setMemberFilter] = React.useState("all");
  const [showUpload, setShowUpload]     = React.useState(false);
  const [uploadEngId, setUploadEngId]   = React.useState("");

  const isOrg = user.type === "organisation";

  async function loadData() {
    try {
      const [docsRes, engsRes] = await Promise.all([
        portalApi.get("/documents"),
        portalApi.get("/engagements"),
      ]);
      setDocs(docsRes.data || []);
      setEngagements((engsRes.data || []).map(portalApi.map.engagement));
    } catch (_) {}
    finally { setLoading(false); }
  }

  React.useEffect(() => { loadData(); }, []);

  const orgMembers = isOrg ? [...new Set(docs.map(d => d.member).filter(Boolean))] : [];

  const memberFiltered = isOrg && memberFilter !== "all"
    ? docs.filter(d => d.member === memberFilter)
    : docs;

  const shown = memberFiltered.filter(d => {
    if (filter === "verified") return d.status === "verified";
    if (filter === "pending")  return d.status === "pending";
    if (filter === "smash")    return d.uploadedBy === "Team";
    if (filter === "mine")     return d.uploadedBy !== "Team";
    return true;
  });

  const verifiedCount = memberFiltered.filter(d => d.status === "verified").length;
  const pendingCount  = memberFiltered.filter(d => d.status === "pending").length;
  const smashCount    = memberFiltered.filter(d => d.uploadedBy === "Team").length;
  const mineCount     = memberFiltered.filter(d => d.uploadedBy !== "Team").length;

  const tabs = [
    { id: "all",      label: "All",            count: memberFiltered.length },
    { id: "mine",     label: "Uploaded by me", count: mineCount },
    { id: "smash",    label: "From Smash",      count: smashCount },
    { id: "pending",  label: "Pending review",  count: pendingCount },
  ];

  function openUpload(engId) {
    setUploadEngId(engId || "");
    setShowUpload(true);
  }

  return (
    <>
    <div className="container" style={{ paddingTop: 32, paddingBottom: 64 }}>

      {/* Header */}
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.18em", fontWeight: 600, color: "var(--brand-burgundy)", marginBottom: 4 }}>Your files</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 34, fontWeight: 600, letterSpacing: "-0.02em", margin: 0 }}>Documents</h1>
          <div style={{ fontSize: 14, color: "var(--fg-3)", marginTop: 4 }}>
            {docs.length} files on record &nbsp;·&nbsp;
            <span style={{ color: pendingCount > 0 ? "var(--warning-700)" : "var(--fg-3)", fontWeight: pendingCount > 0 ? 600 : 400 }}>
              {pendingCount} pending review
            </span>
          </div>
        </div>
        <button className="btn btn-primary" onClick={() => openUpload()}>
          <Icon name="upload" size={14} stroke={2} />Upload document
        </button>
      </div>

      {/* Summary cards */}
      <div className="resp-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 24 }}>
        {[
          { label: "Verified documents", value: verifiedCount, icon: "shield-check", color: "var(--success-700)" },
          { label: "From Smash team",    value: smashCount,    icon: "users",        color: "var(--info-700)" },
          { label: "Pending review",     value: pendingCount,  icon: "clock",        color: pendingCount > 0 ? "var(--warning-700)" : "var(--fg-3)" },
        ].map((k, i) => (
          <div key={i} className="pcard pcard-pad" style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--plum-50)", color: k.color, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name={k.icon} size={20} />
            </div>
            <div>
              <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-0.02em" }}>{k.value}</div>
              <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{k.label}</div>
            </div>
          </div>
        ))}
      </div>

      {isOrg && <MemberFilter members={orgMembers} value={memberFilter} onChange={m => { setMemberFilter(m); setFilter("all"); }} />}

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border-subtle)", marginBottom: 16 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setFilter(t.id)} style={{
            background: "transparent", border: 0, padding: "10px 16px", cursor: "pointer",
            fontSize: 13.5, fontFamily: "inherit", fontWeight: filter === t.id ? 600 : 500,
            color: filter === t.id ? "var(--brand-burgundy)" : "var(--fg-2)",
            borderBottom: filter === t.id ? "2px solid var(--brand-burgundy)" : "2px solid transparent",
            marginBottom: -1,
          }}>
            {t.label}
            <span style={{ marginLeft: 6, fontSize: 12, color: "var(--fg-3)" }}>{t.count}</span>
          </button>
        ))}
      </div>

      {/* Document list */}
      <div className="pcard" style={{ padding: 0 }}>
        {loading ? (
          <div style={{ textAlign: "center", padding: "48px 20px", color: "var(--fg-3)" }}>
            <Icon name="loader" size={24} />
            <div style={{ marginTop: 8, fontSize: 14 }}>Loading…</div>
          </div>
        ) : shown.length === 0 ? (
          <div style={{ textAlign: "center", padding: "48px 20px", color: "var(--fg-3)" }}>
            <Icon name="folder-open" size={28} />
            <div style={{ marginTop: 8, fontSize: 14 }}>{docs.length === 0 ? "No documents yet." : "No documents match this filter."}</div>
            {docs.length === 0 && (
              <button className="btn btn-primary" style={{ marginTop: 14 }} onClick={() => openUpload()}>
                <Icon name="upload" size={14} />Upload your first document
              </button>
            )}
          </div>
        ) : shown.map((d, i) => {
          const sm = P_STATUS[d.status] || P_STATUS.pending;
          const byMe = d.uploadedBy !== "Team";
          return (
            <div key={String(d._id)} style={{
              display: "flex", alignItems: "center", gap: 14, padding: "14px 20px",
              borderBottom: i < shown.length - 1 ? "1px solid var(--border-subtle)" : 0,
            }}>
              <div style={{ width: 40, height: 40, borderRadius: 9, background: "var(--plum-50)", color: "var(--brand-burgundy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <Icon name={pDocIcon(d.name)} size={18} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                  <div style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.name}</div>
                  <span className={"chip " + sm.chipClass} style={{ fontSize: 11.5, flexShrink: 0 }}>
                    <span className="dot" style={{ background: sm.dot }} />{sm.label}
                  </span>
                </div>
                {isOrg && d.member && (
                  <div style={{ display: "flex", alignItems: "center", gap: 5, marginTop: 2 }}>
                    <Icon name="user" size={11} />
                    <span style={{ fontSize: 11.5, color: "var(--brand-burgundy)", fontWeight: 600 }}>{d.member}</span>
                  </div>
                )}
                <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 3, display: "flex", gap: 10, flexWrap: "wrap" }}>
                  {d.kind && <span>{d.kind}</span>}
                  {d.kind && <span>·</span>}
                  <span>{fmtPSize(d.size)}</span>
                  <span>·</span>
                  <span>{d.service}</span>
                  <span>·</span>
                  <span>{byMe ? "Uploaded by you" : "From Smash"} · {fmtPDate(d.uploadedAt)}</span>
                </div>
              </div>
              <a href={d.url} target="_blank" rel="noreferrer"
                className="icon-btn" title="Download"
                style={{ border: "1px solid var(--border-subtle)", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", width: 34, height: 34 }}>
                <Icon name="download" size={16} />
              </a>
            </div>
          );
        })}
      </div>
    </div>

    {showUpload && (
      <UploadArea
        engagements={engagements}
        prefillEngId={uploadEngId}
        onClose={() => setShowUpload(false)}
        onUploaded={() => { setShowUpload(false); loadData(); }}
      />
    )}
    </>
  );
}

Object.assign(window, { PortalDocumentsPage });