import React, { useState, useEffect } from "react";
import { ApiClient } from "nexli";

const api = new ApiClient({
  baseUrl: "https://jsonplaceholder.typicode.com",
  queue: { concurrency: 5 },
  rateLimit: { maxRequests: 10, perMilliseconds: 5000 },
  offline: {
    enabled: true,
    storageKey: "react_nexli_offline_requests",
    limit: 100,
  },
});

function App() {
  const [posts, setPosts] = useState([]);
  const [syncStatus, setSyncStatus] = useState("Checking...");
  const [offlineMessage, setOfflineMessage] = useState("");

  useEffect(() => {
    api
      .syncOfflineRequests()
      .then(() => setSyncStatus("Sync Complete."))
      .catch(() => setSyncStatus("No pending requests found."));

    fetchPosts();
  }, []);

  const fetchPosts = async () => {
    try {
      const response = await api.get("/posts", { _limit: 5 });
      setPosts(response.data);
      setOfflineMessage("Online fetch successful.");
    } catch (error) {
      setOfflineMessage("Failed to fetch posts. Check connection.");
    }
  };

  const handleOfflineAction = async () => {
    setOfflineMessage("Attempting to send POST request...");
    try {
      await api.post("/posts", { title: "Offline Post", body: Date.now() });
      setOfflineMessage("POST request sent (or stored if offline).");
    } catch (error) {
      setOfflineMessage("POST request failed.");
    }
  };

  const handleManualSync = async () => {
    setSyncStatus("Manual Syncing...");
    await api.syncOfflineRequests();
    setSyncStatus("Manual Sync Complete!");
  };

  return (
    <div style={{ padding: "20px" }}>
      <h1>Nexli API Client Example ⚛️</h1>

      <h2>Status</h2>
      <p>
        <strong>Offline Sync:</strong> {syncStatus}
      </p>
      <p>
        <strong>Last Action:</strong> {offlineMessage}
      </p>

      <button onClick={handleOfflineAction} style={{ marginRight: "10px" }}>
        Simulate Offline POST
      </button>
      <button onClick={handleManualSync}>Manually Sync</button>

      <hr />

      <h2>Fetched Posts ({posts.length})</h2>
      <div style={{ maxHeight: "300px", overflowY: "scroll" }}>
        {posts.map((post) => (
          <div
            key={post.id}
            style={{ borderBottom: "1px solid #ccc", padding: "10px" }}
          >
            <strong>{post.title}</strong>
            <p>{post.body.substring(0, 50)}...</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;