/* PrimaDelta — admin: document vault + enquiries inbox. */
const { Btn: Btn2, Status: Status2, Badge: Badge2, Field: Field2, Input: Input2, Select: Select2, Modal: Modal2, Empty: Empty2, Ic: Ic2 } = window;
const { useStore: useStore2, fmt: fmt2 } = window;

const FILE_KINDS = {
  pdf: "pdf", doc: "doc", docx: "doc", xls: "xls", xlsx: "xls",
  png: "img", jpg: "img", jpeg: "img", dwg: "dwg"
};
function extOf(name) { return (name.split(".").pop() || "").toLowerCase(); }

/* ============================================================
   DOCUMENT VAULT
   ============================================================ */
function DocumentVault() {
  const { data, addDocument, removeDocument, toast, estates } = useStore2();
  const [cat, setCat] = React.useState("All");
  const [uploading, setUploading] = React.useState(false);
  const cats = ["All", "Leases", "Contracts", "Compliance", "Drawings", "Reporting", "Operations"];
  const list = data.documents.filter((d) => cat === "All" || d.cat === cat);

  const download = (d) => {
    const blob = new Blob([`PrimaDelta — Document Vault\n\nFile: ${d.name}\nProperty: ${d.property}\nCategory: ${d.cat}\nUploaded: ${fmt2.date(d.uploaded)} by ${d.by}\n\n(This is a prototype placeholder for the secured document.)`], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = d.name.replace(/\.[^.]+$/, "") + ".txt";
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
    toast("Download started", d.name, <Ic2.download s={18} />);
  };

  return (
    <div>
      <div className="page-head">
        <div className="flex items-center gap-12">
          <div>
            <div className="flex items-center gap-12">
              <h1>Document Vault</h1>
              <span className="badge badge-open"><Ic2.lock s={13} /> Admin only</span>
            </div>
            <p className="sub">Secured store for leases, contracts, compliance and drawings — {data.documents.length} files.</p>
          </div>
        </div>
        <Btn2 variant="clay" icon={<Ic2.upload s={16} />} onClick={() => setUploading(true)}>Upload document</Btn2>
      </div>

      <div className="flex between items-center" style={{ marginBottom: 16, flexWrap: "wrap", gap: 12 }}>
        <div className="tabs">
          {cats.map((c) => <button key={c} className={"tab" + (cat === c ? " active" : "")} onClick={() => setCat(c)}>{c}</button>)}
        </div>
      </div>

      <div className="card" style={{ overflow: "hidden" }}>
        <div className="scrollx">
          <table className="tbl">
            <thead><tr><th>Document</th><th>Category</th><th>Property</th><th>Uploaded</th><th>By</th><th>Size</th><th></th></tr></thead>
            <tbody>
              {list.map((d) => (
                <tr key={d.id}>
                  <td>
                    <div className="filerow">
                      <div className={"fileic " + (FILE_KINDS[d.type] || "doc")}>{(d.type || "doc").toUpperCase().slice(0, 3)}</div>
                      <div style={{ fontWeight: 600, maxWidth: 320, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.name}</div>
                    </div>
                  </td>
                  <td><Badge2 tone="neutral">{d.cat}</Badge2></td>
                  <td className="muted">{d.property}</td>
                  <td className="muted num">{fmt2.date(d.uploaded)}</td>
                  <td className="muted">{d.by}</td>
                  <td className="muted num">{d.size}</td>
                  <td>
                    <div className="flex gap-8" style={{ justifyContent: "flex-end" }}>
                      <button className="btn-icon" title="Download" onClick={() => download(d)}><Ic2.download s={16} /></button>
                      <button className="btn-icon" title="Delete" onClick={() => { removeDocument(d.id); toast("Document removed", d.name, <Ic2.trash s={18} />); }}><Ic2.trash s={16} /></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {list.length === 0 && <Empty2 icon={<Ic2.folder s={26} />} title="No documents" sub="Upload a file to this category to get started." />}
      </div>

      {uploading && <UploadModal estates={estates} onClose={() => setUploading(false)}
        onSave={(doc) => { addDocument(doc); setUploading(false); toast("Document uploaded", doc.name + " secured to the vault.", <Ic2.upload s={18} />); }} />}
    </div>
  );
}

function UploadModal({ estates, onClose, onSave }) {
  const [drag, setDrag] = React.useState(false);
  const [file, setFile] = React.useState(null);
  const [meta, setMeta] = React.useState({ cat: "Leases", property: "Portfolio" });
  const inputRef = React.useRef();
  const props = ["Portfolio", ...estates.map((e) => e.name)];

  const take = (f) => {
    if (!f) return;
    setFile({ name: f.name, size: bytes(f.size), type: FILE_KINDS[extOf(f.name)] || extOf(f.name) || "doc" });
  };
  const onDrop = (e) => { e.preventDefault(); setDrag(false); take(e.dataTransfer.files[0]); };

  return (
    <Modal2 title="Upload document" sub="Files are stored in the admin-only vault." onClose={onClose}
      footer={<><Btn2 variant="ghost" onClick={onClose}>Cancel</Btn2><Btn2 variant="clay" disabled={!file} icon={<Ic2.upload s={16} />}
        onClick={() => onSave({ name: file.name, type: file.type, size: file.size, cat: meta.cat, property: meta.property, uploaded: "2026-06-11" })}>Upload to vault</Btn2></>}>
      <div className={"dropzone" + (drag ? " drag" : "")} onClick={() => inputRef.current.click()}
        onDragOver={(e) => { e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={onDrop}>
        <input ref={inputRef} type="file" style={{ display: "none" }} onChange={(e) => take(e.target.files[0])} />
        <div className="dz-ic"><Ic2.upload s={22} /></div>
        {file ? (
          <div>
            <div className="flex items-center gap-12" style={{ justifyContent: "center" }}>
              <div className={"fileic " + (FILE_KINDS[file.type] || "doc")} style={{ width: 32, height: 32 }}>{(file.type || "doc").toUpperCase().slice(0, 3)}</div>
              <div style={{ textAlign: "left" }}><div style={{ fontWeight: 600, fontSize: 14 }}>{file.name}</div><div className="muted" style={{ fontSize: 12.5 }}>{file.size}</div></div>
            </div>
            <div className="link" style={{ marginTop: 12, justifyContent: "center" }}>Choose a different file</div>
          </div>
        ) : (
          <div>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Drag a file here, or click to browse</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>PDF, DOCX, XLSX, DWG, images — up to 50 MB</div>
          </div>
        )}
      </div>
      <div className="field-row" style={{ marginTop: 18 }}>
        <Field2 label="Category"><Select2 value={meta.cat} onChange={(e) => setMeta((m) => ({ ...m, cat: e.target.value }))}>
          {["Leases", "Contracts", "Compliance", "Drawings", "Reporting", "Operations"].map((c) => <option key={c}>{c}</option>)}
        </Select2></Field2>
        <Field2 label="Property"><Select2 value={meta.property} onChange={(e) => setMeta((m) => ({ ...m, property: e.target.value }))}>
          {props.map((p) => <option key={p}>{p}</option>)}
        </Select2></Field2>
      </div>
    </Modal2>
  );
}
function bytes(n) {
  if (n > 1e6) return (n / 1e6).toFixed(1) + " MB";
  if (n > 1e3) return (n / 1e3).toFixed(0) + " KB";
  return n + " B";
}

/* ============================================================
   ENQUIRIES INBOX
   ============================================================ */
function Inbox() {
  const { data, markInboxRead, toast } = useStore2();
  const [openId, setOpenId] = React.useState(null);
  const open = data.inbox.find((c) => c.id === openId);
  const unread = data.inbox.filter((c) => !c.read).length;

  const select = (c) => { setOpenId(c.id); if (!c.read) markInboxRead(c.id); };

  return (
    <div>
      <div className="page-head">
        <div><h1>Enquiries</h1><p className="sub">Contact-form submissions from the website — {unread} unread of {data.inbox.length}.</p></div>
        <Badge2 tone="open"><Ic2.mail s={13} /> Email alerts enabled</Badge2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: open ? "1fr 1.3fr" : "1fr", gap: 20, alignItems: "start" }}>
        <div className="card" style={{ overflow: "hidden" }}>
          {data.inbox.map((c) => (
            <div key={c.id} onClick={() => select(c)}
              style={{ padding: "16px 18px", borderBottom: "1px solid var(--line)", cursor: "pointer", display: "flex", gap: 14, background: openId === c.id ? "var(--paper)" : "transparent" }}>
              <div className="avatar" style={{ background: c.read ? "var(--muted-2)" : "var(--clay)" }}>{c.name.split(" ").map((w) => w[0]).slice(0, 2).join("")}</div>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div className="flex between items-center">
                  <span style={{ fontWeight: c.read ? 500 : 700, fontSize: 14.5 }}>{c.name}</span>
                  <span className="muted" style={{ fontSize: 12 }}>{fmt2.rel(c.at.split(" ")[0])}</span>
                </div>
                <div style={{ fontSize: 13, color: "var(--ink-soft)", fontWeight: 600, marginTop: 2 }}>{c.topic}</div>
                <div className="muted" style={{ fontSize: 13, marginTop: 3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.message}</div>
              </div>
              {!c.read && <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--clay)", flexShrink: 0, marginTop: 6 }}></span>}
            </div>
          ))}
          {data.inbox.length === 0 && <Empty2 icon={<Ic2.mail s={26} />} title="Inbox zero" sub="New website enquiries will appear here." />}
        </div>

        {open && (
          <div className="card" style={{ padding: 28, position: "sticky", top: 92 }}>
            <div className="flex between items-start" style={{ marginBottom: 18 }}>
              <div className="flex items-center gap-12">
                <div className="avatar" style={{ width: 44, height: 44, background: "var(--ink)", fontSize: 15 }}>{open.name.split(" ").map((w) => w[0]).slice(0, 2).join("")}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 17 }}>{open.name}</div>
                  <div className="muted" style={{ fontSize: 13.5 }}>{open.org || "—"}</div>
                </div>
              </div>
              <button className="btn-icon ghost" onClick={() => setOpenId(null)}><Ic2.x s={18} /></button>
            </div>
            <div className="spec" style={{ marginBottom: 18 }}>
              <div className="cell"><div className="k">Email</div><div className="v" style={{ fontSize: 14, fontFamily: "var(--sans)" }}>{open.email}</div></div>
              <div className="cell"><div className="k">Topic</div><div className="v" style={{ fontSize: 14, fontFamily: "var(--sans)" }}>{open.topic}</div></div>
              <div className="cell"><div className="k">Received</div><div className="v" style={{ fontSize: 14, fontFamily: "var(--sans)" }}>{open.at}</div></div>
              <div className="cell"><div className="k">Status</div><div className="v" style={{ fontSize: 14, fontFamily: "var(--sans)" }}>Read</div></div>
            </div>
            <div className="panel" style={{ background: "var(--paper)" }}>
              <p style={{ fontSize: 15, lineHeight: 1.65 }}>{open.message}</p>
            </div>
            <div className="flex gap-12" style={{ marginTop: 18 }}>
              <Btn2 variant="clay" icon={<Ic2.mail s={16} />} onClick={() => toast("Reply drafted", "Opening your mail client to " + open.email, <Ic2.mail s={18} />)}>Reply by email</Btn2>
              <Btn2 variant="ghost" onClick={() => toast("Marked", "Enquiry flagged for follow-up.")}>Flag follow-up</Btn2>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { DocumentVault, Inbox });