/* TargiApp — zakładka Opinie: admin wrzuca zdjęcia projektów (drag&drop),
   każdy zalogowany pisze opinie (osoba + treść). Czytanie: wszyscy. Dodawanie projektów: tylko admin. */

function fmtWhen(ts) {
  const d = new Date(ts);
  return d.toLocaleDateString("pl-PL", { day: "2-digit", month: "2-digit" }) + ", " +
    d.toLocaleTimeString("pl-PL", { hour: "2-digit", minute: "2-digit" });
}

// zmniejsza zdjęcie do rozsądnego rozmiaru i zwraca dataURL (JPEG)
function fileToDataUrl(file, max, quality) {
  return new Promise((resolve, reject) => {
    if (!file.type || !file.type.startsWith("image/")) return reject(new Error("nie obraz"));
    const img = new Image();
    const url = URL.createObjectURL(file);
    img.onload = () => {
      let w = img.naturalWidth, h = img.naturalHeight;
      const s = Math.min(1, (max || 1600) / Math.max(w, h));
      w = Math.round(w * s); h = Math.round(h * s);
      const c = document.createElement("canvas"); c.width = w; c.height = h;
      c.getContext("2d").drawImage(img, 0, 0, w, h);
      URL.revokeObjectURL(url);
      resolve(c.toDataURL("image/jpeg", quality || 0.82));
    };
    img.onerror = () => { URL.revokeObjectURL(url); reject(new Error("błąd wczytania")); };
    img.src = url;
  });
}

function ProjectDropzone() {
  const store = useStore();
  const [over, setOver] = useState(false);
  const [busy, setBusy] = useState(false);
  const inputRef = useRef(null);

  async function handleFiles(fileList) {
    const files = [...fileList].filter((f) => f.type && f.type.startsWith("image/"));
    if (!files.length) return;
    setBusy(true);
    for (const f of files) {
      try {
        const data = await fileToDataUrl(f, 1600, 0.82);
        store.addProject(f.name.replace(/\.[^.]+$/, ""), data);
      } catch (e) { /* pomiń plik */ }
    }
    setBusy(false);
  }

  return (
    <div
      className={"fb-drop" + (over ? " over" : "")}
      onDragOver={(e) => { e.preventDefault(); setOver(true); }}
      onDragLeave={() => setOver(false)}
      onDrop={(e) => { e.preventDefault(); setOver(false); handleFiles(e.dataTransfer.files); }}
      onClick={() => inputRef.current && inputRef.current.click()}
    >
      <input ref={inputRef} type="file" accept="image/*" multiple style={{ display: "none" }}
        onChange={(e) => { handleFiles(e.target.files); e.target.value = ""; }} />
      <div className="fb-drop-icon">🖼️</div>
      <div className="fb-drop-title">{busy ? "Wczytywanie…" : "Przeciągnij zdjęcia projektów tutaj"}</div>
      <div className="fb-drop-sub">albo kliknij, aby wybrać pliki · każde zdjęcie = osobny projekt do opiniowania</div>
    </div>
  );
}

function OpinionRow({ o, canDelete }) {
  const store = useStore();
  const p = store.personById(o.personId);
  return (
    <div className="fb-op">
      <Avatar name={store.fullName(p)} size={32} />
      <div className="fb-op-body">
        <div className="fb-op-head">
          <span className="fb-op-name">{store.fullName(p)}</span>
          <span className="fb-op-time">{fmtWhen(o.createdAt)}</span>
          {canDelete ? <button className="fb-op-x" title="Usuń" onClick={() => store.removeOpinion(o.id)}>✕</button> : null}
        </div>
        <div className="fb-op-text">{o.text}</div>
      </div>
    </div>
  );
}

function ProjectCard({ p }) {
  const store = useStore();
  const user = store.currentUser();
  const ops = store.opinionsForProject(p.id);
  const [text, setText] = useState("");

  function submit() {
    if (store.addOpinion(p.id, text)) setText("");
  }

  return (
    <div className="fb-card">
      <div className="fb-card-top">
        {user.isAdmin
          ? <input className="fb-title-input" value={p.title} onChange={(e) => store.updateProject(p.id, { title: e.target.value })} />
          : <div className="fb-title">{p.title}</div>}
        {user.isAdmin
          ? <button className="icon-act danger" title="Usuń projekt"
              onClick={() => { if (confirm("Usunąć projekt „" + p.title + "” wraz z opiniami?")) store.removeProject(p.id); }}>🗑</button>
          : null}
      </div>
      <div className="fb-img-wrap"><img className="fb-img" src={p.image} alt={p.title} /></div>

      <div className="fb-ops">
        <div className="fb-ops-label">{ops.length ? "Opinie · " + ops.length : "Brak opinii — bądź pierwszy"}</div>
        {ops.map((o) => <OpinionRow key={o.id} o={o} canDelete={user.isAdmin || o.personId === user.id} />)}
      </div>

      <div className="fb-add">
        <Avatar name={store.fullName(user)} size={32} />
        <textarea className="fb-add-input" placeholder="Napisz swoją opinię o tym projekcie…"
          value={text} onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submit(); }} />
        <button className="btn primary" disabled={!text.trim()} onClick={submit}>Dodaj opinię</button>
      </div>
    </div>
  );
}

function FeedbackPage() {
  const store = useStore();
  const user = store.currentUser();
  const projects = store.state.projects || [];

  return (
    <div className="fb-feed">
      <div className="page-head">
        <div>
          <div className="page-title">Opinie</div>
          <div className="page-sub">
            {user.isAdmin
              ? "Wrzuć zdjęcia projektów — zespół doda swoje opinie"
              : "Przeglądaj projekty i dodawaj opinie · projekty dodaje administrator"}
          </div>
        </div>
      </div>

      {user.isAdmin ? <ProjectDropzone /> : null}

      {projects.length
        ? projects.map((p) => <ProjectCard key={p.id} p={p} />)
        : <div className="fb-empty">Brak projektów do opiniowania.{user.isAdmin ? " Przeciągnij zdjęcia powyżej." : " Administrator jeszcze nic nie dodał."}</div>}
    </div>
  );
}
Object.assign(window, { FeedbackPage });