import React, { useEffect, useState, useRef } from "react";

// MiniVideoPlatform.jsx
// Single-file React component (Tailwind CSS assumed).
// Features:
// - Create posts with video or image and optional caption
// - Feed of posts (videos autoplay muted on scroll into view)
// - Comments per post
// - Likes
// - Local persistence via localStorage
// - Simple responsive layout

// How to use:
// 1) Create a React app (Vite or CRA) with Tailwind CSS configured.
// 2) Drop this file into src/components or src/ and import it into App.jsx.
// 3) Run the dev server. Files are stored in-memory (object URLs) and metadata in localStorage.

export default function MiniVideoPlatform() {
  const [posts, setPosts] = useState(() => {
    try {
      const raw = localStorage.getItem("mvp_posts_v1");
      return raw ? JSON.parse(raw) : [];
    } catch (e) {
      return [];
    }
  });
  const [file, setFile] = useState(null);
  const [caption, setCaption] = useState("");
  const [uploading, setUploading] = useState(false);
  const [query, setQuery] = useState("");

  useEffect(() => {
    localStorage.setItem("mvp_posts_v1", JSON.stringify(posts));
  }, [posts]);

  // Helper to create an object URL and store minimal metadata
  function handleFileChange(e) {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    // Basic validation
    const isVideo = f.type.startsWith("video/");
    const isImage = f.type.startsWith("image/");
    if (!isVideo && !isImage) {
      alert("Please select a video or image file.");
      return;
    }
    setFile({ file: f, preview: URL.createObjectURL(f), type: isVideo ? "video" : "image" });
  }

  function createPost(e) {
    e.preventDefault();
    if (!file) return alert("Choose an image or video first.");
    setUploading(true);
    // Simulate upload delay
    setTimeout(() => {
      const newPost = {
        id: Date.now().toString(),
        type: file.type,
        url: file.preview,
        caption: caption.trim(),
        likes: 0,
        comments: [],
        createdAt: new Date().toISOString(),
      };
      setPosts(prev => [newPost, ...prev]);
      setFile(null);
      setCaption("");
      setUploading(false);
    }, 600);
  }

  function addComment(postId, text) {
    if (!text || !text.trim()) return;
    setPosts(prev => prev.map(p => p.id === postId ? { ...p, comments: [...p.comments, { id: Date.now().toString(), text: text.trim(), createdAt: new Date().toISOString() }] } : p));
  }

  function toggleLike(postId) {
    setPosts(prev => prev.map(p => p.id === postId ? { ...p, likes: p.likes + 1 } : p));
  }

  function deletePost(postId) {
    // Revoke object URL to free memory
    const post = posts.find(p => p.id === postId);
    if (post && post.url && post.url.startsWith("blob:")) URL.revokeObjectURL(post.url);
    setPosts(prev => prev.filter(p => p.id !== postId));
  }

  // Simple search/filter
  const visiblePosts = posts.filter(p => p.caption.toLowerCase().includes(query.toLowerCase()));

  return (
    <div className="min-h-screen bg-gray-50 p-4 md:p-8">
      <header className="max-w-4xl mx-auto">
        <h1 className="text-2xl md:text-3xl font-bold mb-2">Mini Video Platform</h1>
        <p className="text-sm text-gray-600 mb-4">A simple client-side demo of a short-video feed: upload videos/images, comment, like.</p>
      </header>

      <main className="max-w-4xl mx-auto grid grid-cols-1 gap-6 md:grid-cols-3">
        {/* Upload panel */}
        <section className="md:col-span-1 bg-white p-4 rounded-2xl shadow-sm">
          <h2 className="font-semibold mb-2">Create post</h2>
          <form onSubmit={createPost} className="space-y-3">
            <label className="block">
              <span className="text-xs text-gray-600">Media (video or image)</span>
              <input
                type="file"
                accept="video/*,image/*"
                onChange={handleFileChange}
                className="mt-2 block w-full text-sm"
              />
            </label>

            {file && (
              <div className="rounded-md border p-2">
                {file.type === "video" ? (
                  <video src={file.preview} controls className="w-full rounded-md" />
                ) : (
                  <img src={file.preview} alt="preview" className="w-full rounded-md object-contain" />
                )}
              </div>
            )}

            <label className="block">
              <span className="text-xs text-gray-600">Caption</span>
              <input value={caption} onChange={e => setCaption(e.target.value)} placeholder="Add a caption..." className="mt-2 w-full rounded-md border p-2 text-sm" />
            </label>

            <div className="flex items-center gap-2">
              <button disabled={uploading} className="px-4 py-2 bg-blue-600 text-white rounded-md disabled:opacity-60">
                {uploading ? "Posting..." : "Post"}
              </button>
              <button type="button" onClick={() => { setFile(null); setCaption(""); }} className="px-3 py-2 border rounded-md text-sm">Clear</button>
            </div>

            <div className="text-xs text-gray-500">Note: media is stored temporarily in your browser (localStorage + object URLs).</div>
          </form>

          <div className="mt-4">
            <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search captions..." className="w-full rounded-md border p-2 text-sm" />
          </div>
        </section>

        {/* Feed */}
        <section className="md:col-span-2 space-y-4">
          {visiblePosts.length === 0 ? (
            <div className="bg-white p-6 rounded-2xl shadow-sm text-center">No posts yet — be the first to upload!</div>
          ) : (
            visiblePosts.map(post => (
              <article key={post.id} className="bg-white p-4 rounded-2xl shadow-sm">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">U</div>
                    <div>
                      <div className="font-semibold">User</div>
                      <div className="text-xs text-gray-500">{new Date(post.createdAt).toLocaleString()}</div>
                    </div>
                  </div>
                  <div className="text-sm text-gray-500">{post.likes} likes</div>
                </div>

                <div className="mt-3">
                  {post.type === "video" ? (
                    <AutoPlayVideo src={post.url} />
                  ) : (
                    <img src={post.url} alt="post" className="w-full rounded-md object-contain" />
                  )}
                </div>

                {post.caption && <div className="mt-2 text-sm">{post.caption}</div>}

                <div className="mt-3 flex items-center gap-3">
                  <button onClick={() => toggleLike(post.id)} className="px-3 py-1 border rounded-md text-sm">Like</button>
                  <CommentBox post={post} onAdd={addComment} />
                  <button onClick={() => deletePost(post.id)} className="ml-auto text-xs text-red-500">Delete</button>
                </div>

                {post.comments.length > 0 && (
                  <div className="mt-3 border-t pt-3 text-sm space-y-2">
                    {post.comments.map(c => (
                      <div key={c.id} className="flex items-start gap-3">
                        <div className="w-7 h-7 rounded-full bg-gray-200 text-xs flex items-center justify-center">C</div>
                        <div>
                          <div className="text-sm">{c.text}</div>
                          <div className="text-xs text-gray-400">{new Date(c.createdAt).toLocaleString()}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </article>
            ))
          )}
        </section>
      </main>

      <footer className="max-w-4xl mx-auto mt-8 text-center text-xs text-gray-400">Demo platform — no backend. Refreshing will keep posts in localStorage.</footer>
    </div>
  );
}

// Small helper components below:
function CommentBox({ post, onAdd }) {
  const [text, setText] = useState("");
  return (
    <form className="flex items-center gap-2" onSubmit={(e) => { e.preventDefault(); onAdd(post.id, text); setText(""); }}>
      <input value={text} onChange={e => setText(e.target.value)} placeholder="Add comment..." className="rounded-md border p-2 text-sm" />
      <button type="submit" className="px-3 py-1 border rounded-md text-sm">Send</button>
    </form>
  );
}

function AutoPlayVideo({ src }) {
  const ref = useRef(null);

  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    let observer;
    // Autoplay when visible
    if ("IntersectionObserver" in window) {
      observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            node.play().catch(() => {});
          } else {
            node.pause();
          }
        });
      }, { threshold: 0.5 });
      observer.observe(node);
    }
    return () => observer && observer.disconnect();
  }, []);

  return <video ref={ref} src={src} controls muted playsInline className="w-full rounded-md" />;
}