// Document Hub — central repository with folders, search, tags, version control.
(function () {
  window.SCREENS = window.SCREENS || {};
  const { useState } = React;
  const IC = window.IC, D = window.DATA;

  function DocCard({ d, onStar, onDelete }) {
    const t = (d.type || "other").toLowerCase();
    const canEdit = window.can("edit");
    const hasFile = !!(d.fileId || d.fileUrl);
    const openDoc = async () => {
      if (window.Files && d.fileId) { await window.Files.open(d); return; }
      if (d.fileUrl) window.open(d.fileUrl, "_blank", "noopener");
      else window.toast("เอกสารนี้ยังไม่ได้อัปโหลด — แสดงข้อมูลเมตาเท่านั้น");
    };
    return (
      <div className="doc-card" onClick={openDoc} style={{ cursor: hasFile ? "pointer" : "default" }}>
        <div className="dc-top">
          <span className={"dc-thumb " + t}>{d.name.split(".").pop().toUpperCase()}</span>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div className="dc-name">{d.name}</div>
            <div className="dc-proj">{d.project}{hasFile ? "" : " · (metadata only)"}</div>
          </div>
          {canEdit
            ? <button className="dc-star icon-btn" style={{ width: 32, height: 32 }} onClick={(e) => { e.stopPropagation(); onStar(d.id); }}>
                <span className={d.starred ? "dc-star on" : "dc-star"}>{IC.star}</span>
              </button>
            : (d.starred ? <span className="dc-star on" style={{ display: "grid", placeItems: "center", width: 32, height: 32 }}>{IC.star}</span> : null)}
        </div>
        <div className="dc-tags">
          {(d.tags || []).map((tag, i) => <span className="doc-tag" key={i}>{tag}</span>)}
        </div>
        <div className="dc-meta">
          <span className="dc-ver">{d.ver}</span>
          <span>{d.size}</span>
          <span>·</span>
          <span style={{ flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.by}</span>
          <span>{(d.date || "").replace(" 2026", "")}</span>
          {canEdit && onDelete && <button className="icon-btn" title="ลบ (ย้ายไป _archive)" onClick={(e) => { e.stopPropagation(); onDelete(d); }} style={{ width: 28, height: 28, color: "var(--danger)" }}>{IC.x}</button>}
        </div>
      </div>
    );
  }

  function fmtSize(bytes) {
    if (!bytes) return "—";
    if (bytes < 1024) return bytes + " B";
    if (bytes < 1048576) return Math.round(bytes / 1024) + " KB";
    return (bytes / 1048576).toFixed(1) + " MB";
  }
  const TYPE_OPTS = ["BOQ", "Drawing", "Quotation", "Contract", "Permit", "Proposal", "Minutes", "Other"];
  const selStyle = { border:0, background:"none", outline:"none", font:"inherit", fontSize:13.5, flex:1, color:"var(--ink)" };

  function UploadModal({ onClose, onDone }) {
    const { useRef } = React;
    const fileRef = useRef(null);
    const fileBlobRef = useRef(null);   // the actual File object selected by the user
    const [f, setF, safeClose] = window.useDirty({ name:"", size:"—", type:"Other", projectId:(D.projects[0]||{}).id||"", tags:"" }, onClose);
    const [saving, setSaving] = useState(false);
    const [progress, setProgress] = useState(0);
    const [err, setErr] = useState("");
    const pick = (e) => {
      const file = e.target.files && e.target.files[0];
      if (!file) return;
      setErr("");
      if (file.size > (window.Files ? window.Files.MAX_BYTES : 100*1024*1024)) {
        setErr("ไฟล์ใหญ่เกิน 100 MB — เลือกไฟล์เล็กกว่านี้"); return;
      }
      fileBlobRef.current = file;
      const ext = (file.name.split(".").pop() || "").toLowerCase();
      const guess = (ext === "xlsx" || ext === "xls" || ext === "csv") ? "BOQ" : (ext === "dwg" ? "Drawing" : (ext === "pdf" ? "Contract" : "Other"));
      setF((p) => ({ ...p, name: file.name, size: fmtSize(file.size), type: p.type === "Other" ? guess : p.type }));
    };
    const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
    const submit = async (e) => {
      e.preventDefault(); if (!f.name.trim() || !fileBlobRef.current) { fileRef.current && fileRef.current.click(); return; }
      setSaving(true); setErr(""); setProgress(0);
      let fileId = "", fileUrl = "", mimeType = fileBlobRef.current.type || "";
      try {
        if (window.Files) {
          const res = await window.Files.upload(fileBlobRef.current, { projectId: f.projectId, kind: "documents", onProgress: setProgress });
          fileId = res.fileId; mimeType = res.mimeType || mimeType;
          // Pre-sign a viewing URL so the card opens instantly on first click
          fileUrl = (await window.Files.signedUrl(fileId)) || "";
        }
      } catch (uploadErr) {
        setSaving(false);
        const msg = uploadErr && uploadErr.status === 503
          ? "Supabase Storage ยังไม่ได้ตั้งค่า — ติดต่อผู้ดูแลระบบ (SUPABASE_SERVICE_ROLE_KEY env var)"
          : ("อัปโหลดล้มเหลว: " + (uploadErr.message || uploadErr));
        setErr(msg); return;
      }
      await window.DB.uploadDocument({
        name: f.name, size: f.size, type: f.type, projectId: f.projectId,
        tags: f.tags.split(",").map((s) => s.trim()).filter(Boolean),
        fileId, fileUrl, mimeType, provider: "supabase",
      });
      setSaving(false); window.toast("อัปโหลด \"" + f.name + "\" แล้ว"); onDone(); onClose();
    };
    return (
      <div className="login-overlay" onClick={window.NOOP}>
        <form className="login-card" style={{ maxWidth:480, width:"92vw" }} onClick={(e) => e.stopPropagation()} onSubmit={submit}>
          <button type="button" className="login-x icon-btn" onClick={safeClose}>{IC.x}</button>
          <div className="login-badge">{IC.upload}</div>
          <h2>อัปโหลดเอกสาร</h2>
          <p style={{ marginTop:-4 }}>รองรับ PDF, Excel, Word และรูปภาพ — ผูกกับโครงการที่เลือก</p>
          <input ref={fileRef} type="file" accept=".pdf,.xlsx,.xls,.csv,.doc,.docx,.png,.jpg,.jpeg,.dwg" onChange={pick} style={{ display:"none" }} />
          <button type="button" className="btn" style={{ width:"100%", justifyContent:"center", marginBottom:10, borderStyle:"dashed", padding:"14px" }} onClick={() => fileRef.current && fileRef.current.click()}>
            {IC.upload} {f.name ? f.name + " · " + f.size : "เลือกไฟล์…"}
          </button>
          <div style={{ display:"grid", gap:11 }}>
            <label className="login-field"><span>โครงการ</span><div className="login-input"><select value={f.projectId} onChange={set("projectId")} style={selStyle}>{D.projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select></div></label>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
              <label className="login-field"><span>ประเภทเอกสาร</span><div className="login-input"><select value={f.type} onChange={set("type")} style={selStyle}>{TYPE_OPTS.map((t) => <option key={t} value={t}>{t}</option>)}</select></div></label>
              <label className="login-field"><span>แท็ก (คั่นด้วย ,)</span><div className="login-input"><input value={f.tags} onChange={set("tags")} placeholder="เช่น BOQ, ก่อสร้าง" /></div></label>
            </div>
          </div>
          {saving && (
            <div style={{ marginTop:14 }}>
              <div className="prog-bar"><i style={{ width: Math.round(progress * 100) + "%" }} /></div>
              <div style={{ fontSize:11.5, color:"var(--muted)", marginTop:4 }}>กำลังอัปโหลดไป Supabase Storage… {Math.round(progress * 100)}%</div>
            </div>
          )}
          {err && <div className="login-err" style={{ marginTop:12 }}>{IC.warn}<span>{err}</span></div>}
          <div className="login-acts" style={{ marginTop:16 }}>
            <button type="button" className="btn" onClick={safeClose} disabled={saving}>ยกเลิก</button>
            <button type="submit" className="btn pri" disabled={saving || !f.name}>{saving ? "กำลังอัปโหลด…" : "อัปโหลด"}</button>
          </div>
        </form>
      </div>
    );
  }

  window.SCREENS.documents = function DocumentHub() {
    window.useLiveData();
    const [folder, setFolder] = useState("all");
    const [q, setQ] = useState("");
    const docs = D.documents;   // live array — re-rendered via useLiveData
    const [showUpload, setShowUpload] = useState(false);
    const onStar = (id) => { window.DB.toggleStar(id); };
    const onUploaded = () => {};
    const onDelete = async (d) => {
      if (!confirm("ลบเอกสาร \"" + d.name + "\" ?\nไฟล์จะถูกย้ายไปยังโฟลเดอร์ _archive และสามารถกู้คืนได้ภายหลัง")) return;
      await window.DB.deleteDocument(d.id);
      window.toast("ย้ายไป _archive แล้ว");
    };

    const folders = D.docFolders.map((f) => f.id === "all" ? { ...f, count: docs.length } : f);
    let list = docs;
    if (folder !== "all") {
      const ftype = D.docFolders.find((f) => f.id === folder).type;
      list = list.filter((d) => d.type === ftype);
    }
    if (q) list = list.filter((d) => d.name.toLowerCase().includes(q.toLowerCase()) || d.project.toLowerCase().includes(q.toLowerCase()) || d.tags.some((t) => t.toLowerCase().includes(q.toLowerCase())));
    const starred = docs.filter((d) => d.starred);

    return (
      <div className="page wide">
        <header>
          <div className="eyebrow">Repository</div>
          <h1 className="page-title">ศูนย์เอกสาร</h1>
          <p className="page-sub">ศูนย์รวมเอกสารกลาง — BOQ, แบบ, ใบเสนอราคา, สัญญา และรายงานประชุม พร้อมการควบคุมเวอร์ชัน</p>
        </header>

        <div className="toolbar">
          {window.can("edit")
            ? <button className="btn pri" onClick={() => setShowUpload(true)}>{IC.upload} อัปโหลด</button>
            : <span className="pill neutral" style={{ padding: "8px 13px" }}>{IC.eye}<span style={{ marginLeft: 2 }}>อ่านอย่างเดียว</span></span>}
          <div className="chip" style={{ flex: "1 1 220px", maxWidth: 360, padding: "0 13px" }}>
            {IC.search}<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="ค้นหาเอกสาร, โครงการ, แท็ก…" style={{ border: 0, background: "none", outline: "none", font: "inherit", fontSize: 14, flex: 1, color: "var(--ink)", height: 40 }} />
          </div>
        </div>

        <div className="dh-folders">
          {folders.map((f) => (
            <button key={f.id} className={"folder-chip" + (folder === f.id ? " on" : "")} onClick={() => setFolder(f.id)}>
              <span className="fc-ic">{f.id === "all" ? IC.grid2 : IC.folder}</span>
              <span className="fc-n">{f.name}</span>
              <span className="fc-ct">{f.count}</span>
            </button>
          ))}
        </div>

        {folder === "all" && q === "" && starred.length > 0 && (
          <div className="block">
            <div className="sh"><span className="sec-title">ปักหมุด</span><span className="page-sub" style={{ marginTop: 0 }}>{starred.length} รายการ</span></div>
            <div className="doc-grid">{starred.map((d) => <DocCard key={d.id} d={d} onStar={onStar} onDelete={onDelete} />)}</div>
          </div>
        )}

        <div className="block">
          <div className="sh"><span className="sec-title">{folder === "all" ? "เอกสารทั้งหมด" : D.docFolders.find((f) => f.id === folder).name}</span><span className="page-sub" style={{ marginTop: 0 }}>{list.length} ไฟล์</span></div>
          {list.length === 0 ?
            <window.EmptyState icon="doc" title="ยังไม่มีเอกสาร" sub={q ? "ไม่พบเอกสารที่ตรงกับคำค้นหา ลองปรับคำค้นหรือเลือกหมวดอื่น" : "ยังไม่มีเอกสารในหมวดนี้"} ctaLabel={window.can("edit") ? "อัปโหลดเอกสารแรก" : undefined} onCta={window.can("edit") ? () => setShowUpload(true) : undefined} /> :
            <div className="doc-grid">{list.map((d) => <DocCard key={d.id} d={d} onStar={onStar} onDelete={onDelete} />)}</div>}
        </div>

        {showUpload && <UploadModal onClose={() => setShowUpload(false)} onDone={onUploaded} />}
      </div>
    );
  };
})();