/* global React, Icon, Chip, Button, Avatar, Pagination, api */

const LIMIT = 20;

const DOC_KINDS = ["Identity", "Visa", "Medical", "Quotation", "Application", "License", "Legal", "Education", "Other"];

const DOC_STATUS = {
  verified: { label: "Verified", kind: "success" },
  pending:  { label: "Pending",  kind: "warning" },
  internal: { label: "Internal", kind: "brand"   },
};

function fmtDocSize(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 fmtDocDate(d) {
  if (!d) return "—";
  return new Date(d).toLocaleDateString("en-AE", { day: "2-digit", month: "short", year: "numeric" });
}

function fileIcon(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";
  if (["xls","xlsx"].includes(ext))                    return "table";
  if (["zip","rar"].includes(ext))                     return "archive";
  return "paperclip";
}

/* ── Upload modal ────────────────────────────────────── */
function UploadModal({ onClose, onUploaded }) {
  const [engagements, setEngagements] = React.useState([]);
  const [engId,     setEngId]         = React.useState("");
  const [kind,      setKind]          = React.useState("");
  const [file,      setFile]          = React.useState(null);
  const [uploading, setUploading]     = React.useState(false);
  const [error,     setError]         = React.useState("");
  const fileRef = React.useRef(null);

  React.useEffect(() => {
    api.get("/engagements?limit=100").then(res => setEngagements(res.data || [])).catch(() => {});
  }, []);

  function engLabel(eng) {
    const c = eng.customer;
    const cName = c
      ? (c.type === "organisation" ? c.companyName : [c.firstName, c.lastName].filter(Boolean).join(" "))
      : "Unknown";
    return cName + (eng.service ? " — " + eng.service.name : "");
  }

  async function submit() {
    if (!engId) { setError("Please select an engagement."); 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("uploadedBy", "Team");
      if (kind) fd.append("kind", kind);
      await api.upload("/engagements/" + engId + "/documents", fd);
      onUploaded();
    } catch (err) {
      setError(err.message || "Upload failed");
      setUploading(false);
    }
  }

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" role="dialog" aria-modal="true">
        <div className="modal-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Documents</div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Upload document</h2>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>Engagement</label>
            <select value={engId} onChange={ev => setEngId(ev.target.value)}>
              <option value="">Select engagement…</option>
              {engagements.map(eng => (
                <option key={eng._id} value={eng._id}>{engLabel(eng)}</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 type…</option>
              {DOC_KINDS.map(k => <option key={k} value={k}>{k}</option>)}
            </select>
          </div>
          <div className="field">
            <label>File</label>
            <div
              onClick={() => fileRef.current && fileRef.current.click()}
              style={{ border: "2px dashed var(--border-strong)", borderRadius: 8, padding: "28px 20px", textAlign: "center", color: "var(--fg-3)", fontSize: 13.5, cursor: "pointer", background: "var(--ink-50)" }}>
              <Icon name="upload-cloud" size={28} />
              {file ? (
                <div style={{ marginTop: 8, color: "var(--fg-1)", fontWeight: 500 }}>
                  {file.name} <span style={{ fontWeight: 400, color: "var(--fg-3)" }}>({fmtDocSize(file.size)})</span>
                </div>
              ) : (
                <>
                  <div style={{ marginTop: 8 }}>Click to browse</div>
                  <div style={{ fontSize: 12, marginTop: 4 }}>PDF, JPG, PNG, DOC — max 20 MB</div>
                </>
              )}
            </div>
            <input ref={fileRef} type="file" style={{ display: "none" }}
              accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx"
              onChange={ev => setFile(ev.target.files[0] || null)} />
          </div>
          {error && <div style={{ color: "var(--danger-700)", fontSize: 13, marginTop: 4 }}>{error}</div>}
          <div className="modal-footer">
            <Button variant="secondary" type="button" onClick={onClose} disabled={uploading}>Cancel</Button>
            <Button icon="upload" onClick={submit} disabled={uploading}>
              {uploading ? "Uploading…" : "Upload"}
            </Button>
          </div>
        </div>
      </div>
    </>
  );
}

/* ── Main page ───────────────────────────────────────── */
function DocumentsPage() {
  const [docs,         setDocs]         = React.useState([]);
  const [loading,      setLoading]      = React.useState(true);
  const [searchInput,  setSearchInput]  = React.useState("");
  const [search,       setSearch]       = React.useState("");
  const [kindFilter,   setKindFilter]   = React.useState("");
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [page,         setPage]         = React.useState(1);
  const [pages,        setPages]        = React.useState(1);
  const [total,        setTotal]        = React.useState(0);
  const [counts,       setCounts]       = React.useState({ pending: 0, verified: 0, internal: 0 });
  const [showUpload,   setShowUpload]   = React.useState(false);
  const [refreshKey,   setRefreshKey]   = React.useState(0);
  const [isSuperAdmin, setIsSuperAdmin] = React.useState(null);

  /* Debounce search — 400 ms */
  React.useEffect(() => {
    const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 400);
    return () => clearTimeout(t);
  }, [searchInput]);

  /* Fetch page */
  React.useEffect(() => {
    setLoading(true);
    const params = new URLSearchParams({ page, limit: LIMIT });
    if (statusFilter !== "all") params.set("status", statusFilter);
    if (kindFilter)             params.set("kind",   kindFilter);
    if (search)                 params.set("q",      search);
    api.get("/engagements/documents?" + params.toString())
      .then(res => {
        setDocs(res.data || []);
        setTotal(res.total  || 0);
        setPages(res.pages  || 1);
        if (res.counts) setCounts(res.counts);
        if (res.isSuperAdmin !== undefined) setIsSuperAdmin(res.isSuperAdmin);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [statusFilter, kindFilter, search, page, refreshKey]);

  function handleStatusChange(val) { setStatusFilter(val); setPage(1); }
  function handleKindChange(val)   { setKindFilter(val);   setPage(1); }

  async function verifyDoc(engId, docId) {
    try {
      await api.put("/engagements/" + engId + "/documents/" + docId, { status: "verified" });
      setDocs(prev => prev.map(d => String(d._id) === String(docId) ? { ...d, status: "verified" } : d));
      setCounts(prev => ({ ...prev, pending: Math.max(0, prev.pending - 1), verified: prev.verified + 1 }));
    } catch (_) {}
  }

  async function deleteDoc(engId, docId) {
    if (!window.confirm("Remove this document?")) return;
    try {
      await api.delete("/engagements/" + engId + "/documents/" + docId);
      setDocs(prev => prev.filter(d => String(d._id) !== String(docId)));
      setTotal(prev => Math.max(0, prev - 1));
    } catch (_) {}
  }

  const STATUS_TABS = [
    { val: "all",      label: "All"      },
    { val: "pending",  label: "Pending"  },
    { val: "verified", label: "Verified" },
    { val: "internal", label: "Internal" },
  ];

  return (
    <>
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Files</div>
          <h1 className="page-title">Documents</h1>
          <div className="page-sub">
            {isSuperAdmin === false ? "Showing documents for engagements assigned to you. " : ""}
            {total} files &nbsp;·&nbsp; {counts.verified} verified &nbsp;·&nbsp; {counts.pending} pending review
          </div>
        </div>
        <Button icon="upload" onClick={() => setShowUpload(true)}>Upload document</Button>
      </div>

      {/* Filters */}
      <div style={{ display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}>

        {/* Search */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: 6, padding: "7px 12px", flex: 1, maxWidth: 360 }}>
          <Icon name="search" size={15} />
          <input
            placeholder="Search by name, customer, service…"
            value={searchInput}
            onChange={ev => setSearchInput(ev.target.value)}
            style={{ border: 0, outline: "none", fontFamily: "inherit", fontSize: 13.5, flex: 1, background: "transparent", color: "var(--fg-1)" }}
          />
          {searchInput && (
            <button onClick={() => { setSearchInput(""); setSearch(""); setPage(1); }}
              style={{ border: 0, background: "transparent", cursor: "pointer", color: "var(--fg-3)", padding: 0, display: "flex" }}>
              <Icon name="x" size={14} />
            </button>
          )}
        </div>

        {/* Kind dropdown */}
        <select value={kindFilter} onChange={ev => handleKindChange(ev.target.value)}
          style={{ padding: "7px 12px", borderRadius: 6, border: "1px solid var(--border-strong)", fontSize: 13, fontFamily: "inherit", background: "#fff", color: "var(--fg-1)", cursor: "pointer", outline: "none" }}>
          <option value="">All types</option>
          {DOC_KINDS.map(k => <option key={k} value={k}>{k}</option>)}
        </select>

        {/* Status tabs */}
        <div style={{ display: "flex", gap: 4 }}>
          {STATUS_TABS.map(({ val, label }) => (
            <button key={val} onClick={() => handleStatusChange(val)} style={{
              padding: "7px 13px", borderRadius: 6, border: "1px solid", cursor: "pointer",
              fontSize: 13, fontFamily: "inherit", fontWeight: 500,
              background:  statusFilter === val ? "var(--brand-burgundy)" : "#fff",
              color:       statusFilter === val ? "#fff" : "var(--fg-2)",
              borderColor: statusFilter === val ? "var(--brand-burgundy)" : "var(--border-strong)",
            }}>
              {label}
              {val !== "all" && counts[val] > 0 && (
                <span style={{ marginLeft: 5, opacity: 0.8, fontSize: 11.5 }}>{counts[val]}</span>
              )}
            </button>
          ))}
        </div>
      </div>

      <div className="card" style={{ padding: 0 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th>File</th>
              <th>Type</th>
              <th>Customer</th>
              <th>Service</th>
              <th>Uploaded by</th>
              <th>Date</th>
              <th>Size</th>
              <th>Status</th>
              <th style={{ textAlign: "right" }}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan="9" style={{ textAlign: "center", padding: "56px 0", color: "var(--fg-3)" }}>
                <div style={{ marginTop: 8, fontSize: 13 }}>Loading…</div>
              </td></tr>
            ) : docs.length === 0 ? (
              <tr><td colSpan="9" style={{ textAlign: "center", padding: "56px 0", color: "var(--fg-3)" }}>
                {total === 0 && !search && statusFilter === "all" && !kindFilter
                  ? "No documents uploaded yet."
                  : "No documents match your filters."}
              </td></tr>
            ) : docs.map(d => {
              const sm = DOC_STATUS[d.status] || DOC_STATUS.pending;
              return (
                <tr key={String(d._id)}>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div style={{ width: 32, height: 32, borderRadius: 7, background: "var(--plum-50)", color: "var(--brand-burgundy)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                        <Icon name={fileIcon(d.name)} size={15} />
                      </div>
                      <span style={{ fontSize: 13.5, fontWeight: 500 }}>{d.name}</span>
                    </div>
                  </td>
                  <td>{d.kind ? <Chip kind="default">{d.kind}</Chip> : <span style={{ color: "var(--fg-3)", fontSize: 12 }}>—</span>}</td>
                  <td>
                    <div className="av-row">
                      <Avatar name={d.customer || "?"} />
                      <span style={{ fontSize: 13 }}>{d.customer || "—"}</span>
                    </div>
                  </td>
                  <td style={{ fontSize: 13, color: "var(--fg-2)" }}>{d.service || "—"}</td>
                  <td style={{ fontSize: 13, color: "var(--fg-2)" }}>{d.uploadedBy || "—"}</td>
                  <td className="cell-mono cell-muted" style={{ fontSize: 12 }}>{fmtDocDate(d.uploadedAt)}</td>
                  <td className="cell-muted" style={{ fontSize: 12 }}>{fmtDocSize(d.size)}</td>
                  <td><Chip kind={sm.kind}>{sm.label}</Chip></td>
                  <td style={{ textAlign: "right" }}>
                    <div style={{ display: "flex", gap: 4, justifyContent: "flex-end" }}>
                      <a href={d.url} target="_blank" rel="noreferrer" className="icon-btn" title="Download">
                        <Icon name="download" size={15} />
                      </a>
                      {d.status === "pending" && (
                        <button className="btn btn-ghost btn-sm" onClick={() => verifyDoc(d.engId, d._id)}>Verify</button>
                      )}
                      <button className="icon-btn" title="Delete" onClick={() => deleteDoc(d.engId, d._id)}>
                        <Icon name="trash-2" size={15} />
                      </button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>

        <Pagination page={page} pages={pages} total={total} limit={LIMIT} onPage={setPage} />
      </div>
    </div>

    {showUpload && (
      <UploadModal
        onClose={() => setShowUpload(false)}
        onUploaded={() => { setShowUpload(false); setRefreshKey(k => k + 1); }}
      />
    )}
    </>
  );
}

Object.assign(window, { DocumentsPage });