// Drawings (แบบก่อสร้าง) — In-app PDF viewer + folders + annotations + Drive integration

function DrawingsPage({ lang }) {
  const [projectFilter, setProjectFilter] = useState("all");
  const [folderId, setFolderId] = useState(null); // null = root
  const [folders, setFolders] = useState([]);
  const [drawings, setDrawings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [viewing, setViewing] = useState(null); // { id, name, url }
  const toast = useToast();

  const reload = useCallback(async () => {
    setLoading(true);
    try {
      const [drwList, fldList] = await Promise.all([
        window.electron?.getDrawings?.() || Promise.resolve([]),
        window.electron?.drawingFolderList?.() || Promise.resolve([]),
      ]);
      setDrawings(drwList || []);
      setFolders(fldList || []);
    } finally { setLoading(false); }
  }, []);

  useEffect(() => { reload(); }, [reload]);

  const filtered = drawings.filter(d => {
    if (projectFilter !== "all" && d.project_id != projectFilter) return false;
    if (folderId === null && d.folder_id) return false;          // root: only files w/o folder
    if (folderId !== null && d.folder_id != folderId) return false;
    return true;
  });

  const currentFolders = folders.filter(f => {
    if (projectFilter !== "all" && f.project_id != projectFilter) return false;
    return (folderId === null ? !f.parent_id : f.parent_id == folderId);
  });

  const breadcrumb = useMemo(() => {
    const path = [];
    let cur = folders.find(f => f.id === folderId);
    while (cur) { path.unshift(cur); cur = folders.find(f => f.id === cur.parent_id); }
    return path;
  }, [folderId, folders]);

  // ── Folder actions ────────────────────────────────────────
  const createFolder = async () => {
    const name = prompt(lang === "th" ? "ชื่อโฟลเดอร์ใหม่:" : "New folder name:");
    if (!name?.trim()) return;
    const pid = projectFilter !== "all" ? +projectFilter : null;
    const r = await window.electron.drawingFolderCreate({ name: name.trim(), projectId: pid, parentId: folderId });
    if (r.success) { toast(lang === "th" ? "สร้างโฟลเดอร์แล้ว" : "Folder created", "success"); reload(); }
    else toast(r.error, "danger");
  };
  const renameFolder = async (f) => {
    const name = prompt(lang === "th" ? "ชื่อใหม่:" : "New name:", f.name);
    if (!name?.trim() || name === f.name) return;
    const r = await window.electron.drawingFolderRename({ id: f.id, name: name.trim() });
    if (r.success) reload();
  };
  const deleteFolder = async (f) => {
    if (!confirm(lang === "th" ? `ลบโฟลเดอร์ "${f.name}"? (ไฟล์ข้างในจะย้ายไปไว้ที่ root)` : `Delete "${f.name}"?`)) return;
    const r = await window.electron.drawingFolderDelete(f.id);
    if (r.success) { toast(lang === "th" ? "ลบแล้ว" : "Deleted", "success"); reload(); }
  };
  const moveDrawing = async (drawingId, targetFolderId) => {
    const r = await window.electron.drawingMoveToFolder({ drawingId, folderId: targetFolderId });
    if (r.success) reload();
  };
  const renameDrawing = async (d) => {
    const cur = d.custom_name || d.name || d.file_name;
    const name = prompt(lang === "th" ? "ชื่อใหม่:" : "New name:", cur);
    if (!name?.trim() || name === cur) return;
    const r = await window.electron.drawingRename({ drawingId: d.id, name: name.trim() });
    if (r.success) reload();
  };
  const deleteDrawing = async (d) => {
    if (!confirm(lang === "th" ? `ลบแบบ "${d.custom_name || d.name}"?` : `Delete drawing?`)) return;
    const r = await window.electron.drawingDelete(d.id);
    if (r.success) { toast(lang === "th" ? "ลบแล้ว" : "Deleted", "success"); reload(); }
  };

  // ── Open PDF ──────────────────────────────────────────────
  const openPdf = async (d) => {
    toast(lang === "th" ? "กำลังโหลด PDF..." : "Loading PDF...", "info");
    const r = await window.electron.drawingGetPdfUrl(d.id);
    if (r.success) {
      setViewing({ id: d.id, name: d.custom_name || d.name || d.file_name, url: r.url, localPath: r.localPath });
    } else {
      toast((lang === "th" ? "เปิดไม่ได้: " : "Cannot open: ") + r.error, "danger");
    }
  };

  // ── Drag-drop helpers ─────────────────────────────────────
  const onDragStart = (e, drawingId) => {
    e.dataTransfer.setData('text/drawing-id', String(drawingId));
  };
  const onFolderDrop = (e, targetFolderId) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/drawing-id');
    if (id) moveDrawing(+id, targetFolderId);
  };

  return (
    <div className="anim-fadein">
      <PageHeader
        title={lang === "th" ? "แบบก่อสร้าง (PDF Viewer)" : "Construction Drawings"}
        subtitle={lang === "th" ? "เปิด/จัด/comment ไฟล์ PDF ในโปรแกรม" : "Open / organize / annotate PDFs"}
        actions={<>
          <button className="btn btn-sm" onClick={createFolder}><I.plus /> {lang === "th" ? "สร้างโฟลเดอร์" : "New folder"}</button>
          <button className="btn btn-sm" onClick={reload}><I.refresh /> {lang === "th" ? "รีโหลด" : "Reload"}</button>
        </>}
      />

      {/* Filter / breadcrumb bar */}
      <div className="card card-tight" style={{ marginBottom: 14, display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <div style={{ display: "flex", gap: 4, alignItems: "center", fontSize: 13 }}>
          <button className="btn btn-sm btn-ghost" onClick={() => setFolderId(null)}>📁 Root</button>
          {breadcrumb.map(b => (
            <React.Fragment key={b.id}>
              <span style={{ color: "var(--ink-mute)" }}>›</span>
              <button className="btn btn-sm btn-ghost" onClick={() => setFolderId(b.id)}>{b.name}</button>
            </React.Fragment>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <select className="field" style={{ width: 220, height: 32, fontSize: 12 }}
          value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
          <option value="all">{lang === "th" ? "ทุกโครงการ" : "All projects"}</option>
          {PROJECTS.map(p => <option key={p.id || p.code} value={p.id || p.code}>{p.name}</option>)}
        </select>
        <span className="chip">{filtered.length} {lang === "th" ? "ไฟล์" : "files"}</span>
        <span className="chip info">{currentFolders.length} {lang === "th" ? "โฟลเดอร์" : "folders"}</span>
      </div>

      {/* Drop zone for folder navigation */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12, marginBottom: 14 }}>
        {folderId !== null && (
          <div className="card card-tight" style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 10 }}
            onClick={() => setFolderId(breadcrumb[breadcrumb.length - 2]?.id ?? null)}
            onDragOver={(e) => e.preventDefault()}
            onDrop={(e) => onFolderDrop(e, breadcrumb[breadcrumb.length - 2]?.id ?? null)}>
            <div style={{ fontSize: 24 }}>⬅️</div>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{lang === "th" ? "ย้อนกลับ" : "Back"}</div>
          </div>
        )}

        {currentFolders.map(f => (
          <div key={f.id} className="card card-tight anim-fadein"
            style={{ cursor: "pointer", display: "flex", flexDirection: "column", gap: 6 }}
            onClick={() => setFolderId(f.id)}
            onDragOver={(e) => e.preventDefault()}
            onDrop={(e) => onFolderDrop(e, f.id)}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ fontSize: 28 }}>📁</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.name}</div>
                <div style={{ fontSize: 10.5, color: "var(--ink-mute)" }}>{drawings.filter(d => d.folder_id == f.id).length} {lang === "th" ? "ไฟล์" : "files"}</div>
              </div>
            </div>
            <div style={{ display: "flex", gap: 4, justifyContent: "flex-end" }} onClick={(e) => e.stopPropagation()}>
              <button className="btn btn-sm btn-ghost" onClick={() => renameFolder(f)} title={lang === "th" ? "เปลี่ยนชื่อ" : "Rename"}><I.edit /></button>
              <button className="btn btn-sm btn-ghost" onClick={() => deleteFolder(f)} style={{ color: "var(--rose)" }}><I.trash /></button>
            </div>
          </div>
        ))}
      </div>

      {/* Drawings list */}
      {loading ? (
        <div className="card" style={{ padding: 40, textAlign: "center", color: "var(--ink-mute)" }}>Loading…</div>
      ) : filtered.length === 0 ? (
        <div className="card" style={{ padding: 60, textAlign: "center", color: "var(--ink-mute)" }}>
          <I.pdf size={36} />
          <div style={{ marginTop: 12 }}>{lang === "th" ? "ไม่มีไฟล์ในโฟลเดอร์นี้" : "No files in this folder"}</div>
        </div>
      ) : (
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <table className="table">
            <thead><tr>
              <th>{lang === "th" ? "ชื่อไฟล์" : "File"}</th>
              <th>{lang === "th" ? "หมวด" : "Discipline"}</th>
              <th>{lang === "th" ? "โครงการ" : "Project"}</th>
              <th>{lang === "th" ? "วันที่" : "Date"}</th>
              <th>{lang === "th" ? "ขนาด" : "Size"}</th>
              <th></th>
            </tr></thead>
            <tbody>
              {filtered.map(d => (
                <tr key={d.id} className="row-int" draggable
                  onDragStart={(e) => onDragStart(e, d.id)}>
                  <td style={{ fontSize: 12.5, fontWeight: 500 }} onClick={() => openPdf(d)}>
                    <span style={{ cursor: "pointer", display: "inline-flex", gap: 8, alignItems: "center" }}>
                      📄 {d.custom_name || d.name || d.file_name}
                    </span>
                  </td>
                  <td><span className="chip" style={{ fontSize: 10 }}>{d.discipline || '—'}</span></td>
                  <td style={{ fontSize: 11.5, color: "var(--ink-soft)" }}>{d.project_name || (d.project_id ? `Project #${d.project_id}` : '—')}</td>
                  <td className="mono ink-soft" style={{ fontSize: 11 }}>{d.uploaded_date || d.created_at?.split('T')[0] || '—'}</td>
                  <td className="ink-mute" style={{ fontSize: 11 }}>{d.size_mb ? d.size_mb + ' MB' : '—'}</td>
                  <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
                    <button className="btn btn-sm btn-ghost" title={lang === "th" ? "เปิด" : "Open"} onClick={() => openPdf(d)}><I.eye /></button>
                    <button className="btn btn-sm btn-ghost" title={lang === "th" ? "เปลี่ยนชื่อ" : "Rename"} onClick={() => renameDrawing(d)}><I.edit /></button>
                    <button className="btn btn-sm btn-ghost" title={lang === "th" ? "ลบ" : "Delete"} onClick={() => deleteDrawing(d)} style={{ color: "var(--rose)" }}><I.trash /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* PDF viewer modal */}
      {viewing && (
        <PdfViewerModal viewing={viewing} lang={lang} onClose={() => setViewing(null)} />
      )}
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// PDF VIEWER MODAL
// ───────────────────────────────────────────────────────────────
function PdfViewerModal({ viewing, lang, onClose }) {
  const [annotations, setAnnotations] = useState([]);
  const [showAnnotPanel, setShowAnnotPanel] = useState(true);
  const [pageNumber, setPageNumber] = useState(1);
  const toast = useToast();

  // Load existing annotations
  useEffect(() => {
    (async () => {
      const a = await window.electron.annotList(viewing.id);
      setAnnotations(a || []);
    })();
  }, [viewing.id]);

  const addAnnotation = async () => {
    const text = prompt(lang === "th" ? "พิมพ์ comment:" : "Type comment:");
    if (!text?.trim()) return;
    const newA = {
      drawing_id: viewing.id,
      page_number: pageNumber,
      x: 50, y: 50, width: 240, height: 100,
      color: '#fbbf24',
      text: text.trim(),
      author: 'You',
    };
    const r = await window.electron.annotSave(newA);
    if (r.success) {
      setAnnotations(prev => [...prev, { ...newA, id: r.id, created_at: new Date().toISOString() }]);
      toast(lang === "th" ? "เพิ่ม comment แล้ว" : "Comment added", "success");
    }
  };

  const updateAnnotation = async (a, patch) => {
    const updated = { ...a, ...patch };
    setAnnotations(prev => prev.map(x => x.id === a.id ? updated : x));
    await window.electron.annotSave(updated);
  };

  const deleteAnnotation = async (id) => {
    if (!confirm(lang === "th" ? "ลบ comment นี้?" : "Delete this comment?")) return;
    await window.electron.annotDelete(id);
    setAnnotations(prev => prev.filter(x => x.id !== id));
  };

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 1000,
      background: "rgba(0,0,0,0.85)",
      display: "flex", flexDirection: "column",
    }}>
      {/* Top toolbar */}
      <div style={{
        display: "flex", alignItems: "center", gap: 10, padding: "12px 18px",
        background: "var(--bg-1)", borderBottom: "1px solid var(--line-strong)",
      }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14, flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          📄 {viewing.name}
        </div>
        <span className="chip">{annotations.length} {lang === "th" ? "comment" : "comments"}</span>
        <button className="btn btn-sm" onClick={addAnnotation}><I.plus /> {lang === "th" ? "เพิ่ม Comment" : "Add Comment"}</button>
        <button className="btn btn-sm" onClick={() => setShowAnnotPanel(p => !p)}>
          {showAnnotPanel ? '⇥' : '⇤'} {lang === "th" ? "แผง" : "Panel"}
        </button>
        <button className="btn btn-sm" onClick={() => window.electron.openDialog ? null : null}><I.download /></button>
        <button className="btn btn-sm" onClick={onClose}><I.x /> {lang === "th" ? "ปิด" : "Close"}</button>
      </div>

      {/* Main viewer area */}
      <div style={{ flex: 1, display: "grid", gridTemplateColumns: showAnnotPanel ? "1fr 340px" : "1fr", minHeight: 0 }}>
        {/* PDF iframe */}
        <div style={{ position: "relative", background: "#2a2a2a" }}>
          <iframe
            src={viewing.url + '#toolbar=1&navpanes=0'}
            style={{ width: "100%", height: "100%", border: 0 }}
            title={viewing.name}
          />
        </div>

        {/* Annotations panel */}
        {showAnnotPanel && (
          <div style={{
            background: "var(--bg-1)", borderLeft: "1px solid var(--line-strong)",
            display: "flex", flexDirection: "column", minHeight: 0,
          }}>
            <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)", fontWeight: 600, fontSize: 13, fontFamily: "var(--font-display)" }}>
              💬 {lang === "th" ? "Comments / บันทึก" : "Comments / Notes"}
            </div>
            <div style={{ flex: 1, overflowY: "auto", padding: 12 }}>
              {annotations.length === 0 ? (
                <div style={{ textAlign: "center", padding: 30, color: "var(--ink-mute)", fontSize: 12 }}>
                  {lang === "th" ? "ยังไม่มี comment กดปุ่ม \"เพิ่ม Comment\" ด้านบน" : "No comments yet"}
                </div>
              ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {annotations.map(a => (
                    <div key={a.id} style={{
                      background: "var(--glass-2)", border: "1px solid var(--line)", borderRadius: 10,
                      borderLeft: `3px solid ${a.color || '#fbbf24'}`,
                      padding: 10,
                    }}>
                      <textarea
                        defaultValue={a.text}
                        onBlur={(e) => { if (e.target.value !== a.text) updateAnnotation(a, { text: e.target.value }); }}
                        className="field" rows="3"
                        style={{ height: "auto", minHeight: 60, fontSize: 12, padding: "6px 8px", marginBottom: 6, resize: "vertical" }}
                      />
                      <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10.5 }}>
                        <span className="ink-mute">หน้า:</span>
                        <input type="number" min="1" defaultValue={a.page_number || 1}
                          onBlur={(e) => { const v = parseInt(e.target.value) || 1; if (v !== a.page_number) updateAnnotation(a, { page_number: v }); }}
                          className="field" style={{ width: 50, height: 22, fontSize: 11, padding: "0 4px" }} />
                        <span className="ink-mute" style={{ marginLeft: 'auto' }}>{a.created_at?.split('T')[0]}</span>
                        <button className="btn btn-sm btn-ghost" onClick={() => deleteAnnotation(a.id)} style={{ color: "var(--rose)", padding: "0 4px" }}>×</button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <div style={{ padding: 10, borderTop: "1px solid var(--line)", fontSize: 10.5, color: "var(--ink-mute)" }}>
              💡 {lang === "th" ? "Comments บันทึกอัตโนมัติเมื่อคลิกออกจากช่อง" : "Auto-saves on blur"}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.DrawingsPage = DrawingsPage;