import { useState, useEffect } from "react";

const STORAGE_KEY = "onepost-messages";

export default function App() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [hasPosted, setHasPosted] = useState(false);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [mySessionId] = useState(() => {
    // Use sessionStorage as a proxy for "IP" in this environment
    let id = sessionStorage.getItem("onepost-session");
    if (!id) {
      id = Math.random().toString(36).slice(2);
      sessionStorage.setItem("onepost-session", id);
    }
    return id;
  });

  const load = async () => {
    try {
      const res = await window.storage.get(STORAGE_KEY, true);
      if (res) {
        const data = JSON.parse(res.value);
        setMessages(data.messages || []);
        setHasPosted(data.sessions?.includes(mySessionId) || false);
      }
    } catch (e) {
      setMessages([]);
    }
    setLoading(false);
  };

  useEffect(() => {
    load();
    const interval = setInterval(load, 3000);
    return () => clearInterval(interval);
  }, []);

  const submit = async () => {
    if (!input.trim() || hasPosted || submitting) return;
    setSubmitting(true);
    try {
      // Re-fetch to get latest state
      let data = { messages: [], sessions: [] };
      try {
        const res = await window.storage.get(STORAGE_KEY, true);
        if (res) data = JSON.parse(res.value);
      } catch (e) {}

      if (data.sessions?.includes(mySessionId)) {
        setHasPosted(true);
        setSubmitting(false);
        return;
      }

      const newMsg = {
        id: Date.now(),
        text: input.trim(),
        likes: 0,
        likedBy: [],
        time: new Date().toISOString(),
      };

      data.messages = [newMsg, ...(data.messages || [])].slice(0, 50);
      data.sessions = [...(data.sessions || []), mySessionId];

      await window.storage.set(STORAGE_KEY, JSON.stringify(data), true);
      setMessages(data.messages);
      setHasPosted(true);
    } catch (e) {}
    setSubmitting(false);
  };

  const like = async (id) => {
    try {
      let data = { messages: [], sessions: [] };
      try {
        const res = await window.storage.get(STORAGE_KEY, true);
        if (res) data = JSON.parse(res.value);
      } catch (e) {}

      data.messages = data.messages.map((m) => {
        if (m.id !== id) return m;
        if (m.likedBy?.includes(mySessionId)) return m;
        return { ...m, likes: (m.likes || 0) + 1, likedBy: [...(m.likedBy || []), mySessionId] };
      });

      await window.storage.set(STORAGE_KEY, JSON.stringify(data), true);
      setMessages(data.messages);
    } catch (e) {}
  };

  const formatTime = (iso) => {
    const d = new Date(iso);
    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  };

  return (
    <div style={{
      fontFamily: "'Courier New', monospace",
      maxWidth: 600,
      margin: "80px auto",
      padding: "0 20px",
    }}>
      <h1 style={{ fontWeight: 400, fontSize: 13, letterSpacing: 4, textTransform: "uppercase", marginBottom: 60, color: "#888" }}>
        one post per person
      </h1>

      {!hasPosted && (
        <div style={{ marginBottom: 60 }}>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="say something"
            maxLength={300}
            rows={3}
            style={{
              width: "100%",
              border: "none",
              borderBottom: "1px solid #ddd",
              outline: "none",
              resize: "none",
              fontFamily: "inherit",
              fontSize: 15,
              padding: "8px 0",
              background: "transparent",
              color: "#111",
              boxSizing: "border-box",
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); }
            }}
          />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8 }}>
            <span style={{ fontSize: 11, color: "#bbb" }}>{input.length}/300</span>
            <button
              onClick={submit}
              disabled={!input.trim() || submitting}
              style={{
                border: "1px solid #111",
                background: "none",
                padding: "5px 14px",
                fontFamily: "inherit",
                fontSize: 11,
                letterSpacing: 2,
                textTransform: "uppercase",
                cursor: "pointer",
                opacity: !input.trim() ? 0.3 : 1,
              }}
            >
              post
            </button>
          </div>
        </div>
      )}

      {hasPosted && (
        <p style={{ fontSize: 12, color: "#aaa", marginBottom: 48, letterSpacing: 1 }}>you've posted.</p>
      )}

      {loading ? (
        <p style={{ fontSize: 12, color: "#ccc" }}>...</p>
      ) : messages.length === 0 ? (
        <p style={{ fontSize: 12, color: "#ccc" }}>nothing yet.</p>
      ) : (
        <div>
          {messages.map((m) => (
            <div key={m.id} style={{ marginBottom: 36 }}>
              <p style={{ fontSize: 15, color: "#111", margin: "0 0 8px 0", lineHeight: 1.6 }}>{m.text}</p>
              <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
                <span style={{ fontSize: 11, color: "#bbb" }}>{formatTime(m.time)}</span>
                <button
                  onClick={() => like(m.id)}
                  style={{
                    border: "none",
                    background: "none",
                    fontFamily: "inherit",
                    fontSize: 11,
                    color: m.likedBy?.includes(mySessionId) ? "#111" : "#999",
                    cursor: "pointer",
                    padding: 0,
                    letterSpacing: 1,
                  }}
                >
                  like {m.likes > 0 ? m.likes : ""}
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}