// OCR Image screen — upload a photo, run the same tesseract path as Source image filter.
// Shows raw OCR text plus unique tokens to copy into Filter images keywords.

const { useState, useEffect } = React;

const OcrImageScreen = () => {
  const toast = useToast();
  const [file, setFile] = useState(null);
  const [preview, setPreview] = useState("");
  const [running, setRunning] = useState(false);
  const [text, setText] = useState("");
  const [tokens, setTokens] = useState([]);
  const [hasResult, setHasResult] = useState(false);

  useEffect(() => () => {
    if (preview) URL.revokeObjectURL(preview);
  }, [preview]);

  const handlePick = (e) => {
    const next = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!next) return;
    if (!/^image\/(png|jpeg|webp)$/.test(next.type)) {
      toast.error("Only PNG, JPEG, or WebP images are allowed");
      return;
    }
    if (next.size > 2097152) {
      toast.error("Image must be ≤ 2MB. Compress it on tinypng.com.");
      return;
    }
    if (preview) URL.revokeObjectURL(preview);
    setFile(next);
    setPreview(URL.createObjectURL(next));
    setHasResult(false);
    setText("");
    setTokens([]);
  };

  const handleRun = async () => {
    if (!file) {
      toast.error("Choose an image first");
      return;
    }
    setRunning(true);
    try {
      const data = await OcrApi.probe(file);
      setText(data.text || "");
      setTokens(Array.isArray(data.tokens) ? data.tokens : []);
      setHasResult(true);
    } catch (err) {
      toast.error(err.message || "OCR failed");
    } finally {
      setRunning(false);
    }
  };

  const copyValue = async (value, label) => {
    try {
      await navigator.clipboard.writeText(value);
      toast.success(label || "Copied");
    } catch {
      toast.error("Copy failed");
    }
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">OCR Image</h1>
          <div className="page-sub">Trial the same OCR the image filter uses. Copy tokens into Source → Filter images.</div>
        </div>
        <button className="btn primary" disabled={!file || running} onClick={handleRun}>
          {running ? "Reading…" : "Run OCR"}
        </button>
      </div>

      <Card title="Upload">
        <div className="field">
          <label className="field-label">Image</label>
          <input
            className="input"
            type="file"
            accept="image/png,image/jpeg,image/webp"
            onChange={handlePick}
          />
          <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
            PNG, JPEG, or WebP. Max 2MB. File is not saved.
          </div>
        </div>
        {preview && (
          <div style={{ marginTop: 12 }}>
            <img
              src={preview}
              alt="OCR preview"
              style={{ maxWidth: "100%", maxHeight: 280, borderRadius: 8, border: "1px solid var(--border)" }}
            />
            <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>{file && file.name}</div>
          </div>
        )}
      </Card>

      {hasResult && (
        <Card title="Extracted text">
          {text.trim() ? (
            <>
              <textarea
                className="input"
                readOnly
                value={text}
                rows={8}
                style={{ fontFamily: "var(--mono, ui-monospace, monospace)", whiteSpace: "pre-wrap" }}
              />
              <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
                <button className="btn ghost sm" onClick={() => copyValue(text, "OCR text copied")}>
                  <I.Copy /> Copy all
                </button>
              </div>
            </>
          ) : (
            <div className="muted" style={{ fontSize: 13 }}>No text detected. The filter would keep this photo.</div>
          )}
        </Card>
      )}

      {hasResult && tokens.length > 0 && (
        <Card title="Suggested keywords">
          <div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>
            Click a token to copy it into Source → Filter images.
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {tokens.map((token) => (
              <button
                key={token}
                type="button"
                className="btn ghost sm"
                onClick={() => copyValue(token, `Copied “${token}”`)}
              >
                {token}
              </button>
            ))}
          </div>
        </Card>
      )}
    </div>
  );
};

Object.assign(window, { OcrImageScreen });