import { useState } from 'react';
import { MessageCircle, ThumbsUp, Send, Clock } from 'lucide-react';

export default function DiscussionApp() {
  const [posts, setPosts] = useState([]);
  const [newPost, setNewPost] = useState('');

  const addPost = (e) => {
    e.preventDefault();
    if (!newPost.trim()) return;
    
    const post = {
      id: Date.now(),
      content: newPost,
      likes: 0,
      timestamp: new Date(),
      replies: [],
      author: 'User'
    };
    
    setPosts([post, ...posts]);
    setNewPost('');
  };

  const addReply = (postId, replyContent) => {
    setPosts(posts.map(post => {
      if (post.id === postId) {
        return {
          ...post,
          replies: [...post.replies, {
            id: Date.now(),
            content: replyContent,
            timestamp: new Date(),
            author: 'User'
          }]
        };
      }
      return post;
    }));
  };

  const handleLike = (postId) => {
    setPosts(posts.map(post => 
      post.id === postId ? { ...post, likes: post.likes + 1 } : post
    ));
  };

  const formatTime = (date) => {
    return new Date(date).toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: 'numeric'
    });
  };

  return (
    <div className="min-h-screen bg-gray-50 p-4 md:p-8">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">Discussion Board</h1>
        
        {/* Post Creation Form */}
        <form onSubmit={addPost} className="mb-8">
          <div className="flex gap-2">
            <input
              type="text"
              value={newPost}
              onChange={(e) => setNewPost(e.target.value)}
              placeholder="What's on your mind?"
              className="flex-1 p-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <button
              type="submit"
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
            >
              <Send size={20} /> Post
            </button>
          </div>
        </form>

        {/* Posts List */}
        <div className="space-y-6">
          {posts.map(post => (
            <div key={post.id} className="bg-white rounded-xl shadow-sm p-6">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                    {post.author[0]}
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">{post.author}</h3>
                    <div className="flex items-center text-sm text-gray-500">
                      <Clock size={14} className="mr-1" />
                      {formatTime(post.timestamp)}
                    </div>
                  </div>
                </div>
              </div>
              
              <p className="mt-4 text-gray-700">{post.content}</p>
              
              <div className="mt-4 flex items-center gap-4">
                <button
                  onClick={() => handleLike(post.id)}
                  className="flex items-center gap-1 text-gray-500 hover:text-blue-600 transition-colors"
                >
                  <ThumbsUp size={18} />
                  <span>{post.likes}</span>
                </button>
                
                <ReplyForm postId={post.id} onReply={addReply} />
              </div>

              {/* Replies */}
              {post.replies.length > 0 && (
                <div className="mt-4 pl-4 border-l-2 border-gray-100 space-y-4">
                  {post.replies.map(reply => (
                    <div key={reply.id} className="bg-gray-50 rounded-lg p-4">
                      <div className="flex items-center gap-2">
                        <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-sm">
                          {reply.author[0]}
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-900">{reply.author}</h4>
                          <div className="text-xs text-gray-500 flex items-center">
                            <Clock size={12} className="mr-1" />
                            {formatTime(reply.timestamp)}
                          </div>
                        </div>
                      </div>
                      <p className="mt-2 text-gray-700">{reply.content}</p>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ReplyForm({ postId, onReply }) {
  const [isReplying, setIsReplying] = useState(false);
  const [replyContent, setReplyContent] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!replyContent.trim()) return;
    
    onReply(postId, replyContent);
    setReplyContent('');
    setIsReplying(false);
  };

  return (
    <div>
      <button
        onClick={() => setIsReplying(!isReplying)}
        className="flex items-center gap-1 text-gray-500 hover:text-blue-600 transition-colors"
      >
        <MessageCircle size={18} />
        Reply
      </button>
      
      {isReplying && (
        <form onSubmit={handleSubmit} className="mt-4">
          <input
            type="text"
            value={replyContent}
            onChange={(e) => setReplyContent(e.target.value)}
            placeholder="Write a reply..."
            className="w-full p-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <div className="mt-2 flex justify-end gap-2">
            <button
              type="button"
              onClick={() => setIsReplying(false)}
              className="px-3 py-1 text-gray-600 hover:text-gray-800"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-3 py-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              Reply
            </button>
          </div>
        </form>
      )}
    </div>
  );
}