import { useState, useEffect, useRef } from "react";
export default function IgeldokuApp() {
  const [docs, setDocs] = useState([]);
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const [file, setFile] = useState(null);
  const fileInputRef = useRef(null);
  const loadDocs = async () => {
    const res = await fetch("/igeldoku/api/docs.php");
    const data = await res.json();
    setDocs(data);
  };

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

  const handleUpload = async () => {
    if (!title || !author || !file) return;

    const formData = new FormData();
    formData.append("title", title);
    formData.append("author", author);
    formData.append("file", file);

    await fetch("/igeldoku/api/upload.php", {
      method: "POST",
      body: formData
    });

    loadDocs();

    setTitle("");
    setAuthor("");
    setFile(null);
  };

  const downloadFile = (doc) => {
    window.open(`/igeldoku/api/download.php?file=${doc.fileName}`);
  };

  return (
    <div style={{ fontFamily: "Arial, sans-serif", padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>
        INTEGRA Igel-Doku
      </h1>


      <div style={{ border: "1px solid #ccc", padding: "15px", marginBottom: "20px" }}>
        <input
          placeholder="Titel"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          style={{ display: "block", width: "100%", marginBottom: "10px", padding: "6px" }}
        />

        <input
          placeholder="Autor"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
          style={{ display: "block", width: "100%", marginBottom: "10px", padding: "6px" }}
        />

        <input
          type="file"
          ref={fileInputRef}
          onChange={(e) => setFile(e.target.files[0])}
          style={{ display: "none" }}
        />

        <button
          onClick={() => fileInputRef.current.click()}
          style={{ padding: "6px 12px", marginRight: "10px", cursor: "pointer" }}
        >
          Datei auswählen
        </button>

        <span style={{ fontSize: "12px" }}>
          {file ? file.name : "Keine Datei ausgewählt"}
        </span>
        <div style={{ marginTop: "10px" }}>
          <button
            onClick={handleUpload}
            style={{ padding: "6px 12px", cursor: "pointer" }}
          >
            Hochladen
          </button>
        </div>
      </div>


      <div>
        {docs.map((doc) => (
          <div
            key={doc.id}
            style={{ border: "1px solid #ccc", padding: "10px", marginBottom: "10px", display: "flex", justifyContent: "space-between" }}
          >
            <div>
              <div style={{ fontWeight: "bold" }}>{doc.title}</div>
              <div style={{ fontSize: "12px", color: "#555" }}>
                {doc.author} - {new Date(doc.date).toLocaleString()}
              </div>
            </div>

            <button              onClick={() => downloadFile(doc)}
              style={{ padding: "4px 10px", cursor: "pointer" }}
            >
              Download
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}