import { useState } from 'react';
import { Calendar, Clock, Image, Video, Newspaper, Plus, X, ChevronRight } from 'lucide-react';

export default function CheckersApp() {
  const [isAdmin, setIsAdmin] = useState(true); // Toggle for demo purposes
  const [activeTab, setActiveTab] = useState('events');
  const [posts, setPosts] = useState([
    {
      id: 1,
      type: 'event',
      title: 'Annual Community Gathering',
      date: '2024-02-20',
      time: '14:00',
      description: 'Join us for our annual community gathering with food and entertainment.',
      image: 'https://images.unsplash.com/photo-1511578314322-379afb476865'
    },
    {
      id: 2,
      type: 'news',
      title: 'New Community Center Opening',
      date: '2024-02-15',
      description: 'We are excited to announce the opening of our new community center.',
      image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab'
    }
  ]);

  const [newPost, setNewPost] = useState({
    title: '',
    date: '',
    time: '',
    description: '',
    image: '',
    video: '',
    type: 'event'
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    setPosts([...posts, { ...newPost, id: posts.length + 1 }]);
    setNewPost({
      title: '',
      date: '',
      time: '',
      description: '',
      image: '',
      video: '',
      type: 'event'
    });
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center">
            <h1 className="text-2xl font-bold text-gray-900">Checkers App</h1>
            <button
              onClick={() => setIsAdmin(!isAdmin)}
              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
            >
              {isAdmin ? 'Switch to User View' : 'Switch to Admin View'}
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
        {/* Tabs */}
        <div className="flex space-x-4 mb-8">
          <button
            onClick={() => setActiveTab('events')}
            className={`px-4 py-2 rounded-md ${
              activeTab === 'events'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
            }`}
          >
            Events
          </button>
          <button
            onClick={() => setActiveTab('news')}
            className={`px-4 py-2 rounded-md ${
              activeTab === 'news'
                ? 'bg-blue-600 text-white'
                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
            }`}
          >
            News
          </button>
        </div>

        {/* Admin Post Form */}
        {isAdmin && (
          <div className="bg-white rounded-lg shadow p-6 mb-8">
            <h2 className="text-xl font-semibold mb-4">Create New Post</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700">Type</label>
                <select
                  value={newPost.type}
                  onChange={(e) => setNewPost({ ...newPost, type: e.target.value })}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                >
                  <option value="event">Event</option>
                  <option value="news">News</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">Title</label>
                <input
                  type="text"
                  value={newPost.title}
                  onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                  required
                />
              </div>
              {newPost.type === 'event' && (
                <>
                  <div>
                    <label className="block text-sm font-medium text-gray-700">Date</label>
                    <input
                      type="date"
                      value={newPost.date}
                      onChange={(e) => setNewPost({ ...newPost, date: e.target.value })}
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                      required
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700">Time</label>
                    <input
                      type="time"
                      value={newPost.time}
                      onChange={(e) => setNewPost({ ...newPost, time: e.target.value })}
                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                      required
                    />
                  </div>
                </>
              )}
              <div>
                <label className="block text-sm font-medium text-gray-700">Description</label>
                <textarea
                  value={newPost.description}
                  onChange={(e) => setNewPost({ ...newPost, description: e.target.value })}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                  rows="3"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">Image URL</label>
                <input
                  type="url"
                  value={newPost.image}
                  onChange={(e) => setNewPost({ ...newPost, image: e.target.value })}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">Video URL</label>
                <input
                  type="url"
                  value={newPost.video}
                  onChange={(e) => setNewPost({ ...newPost, video: e.target.value })}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
              </div>
              <button
                type="submit"
                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                Post
              </button>
            </form>
          </div>
        )}

        {/* Posts Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {posts
            .filter((post) => post.type === activeTab)
            .map((post) => (
              <div key={post.id} className="bg-white rounded-lg shadow overflow-hidden">
                {post.image && (
                  <img
                    src={post.image}
                    alt={post.title}
                    className="w-full h-48 object-cover"
                  />
                )}
                <div className="p-6">
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">{post.title}</h3>
                  {post.type === 'event' && (
                    <div className="flex items-center text-gray-500 mb-2">
                      <Calendar className="w-4 h-4 mr-2" />
                      <span>{post.date}</span>
                      <Clock className="w-4 h-4 ml-4 mr-2" />
                      <span>{post.time}</span>
                    </div>
                  )}
                  <p className="text-gray-600 mb-4">{post.description}</p>
                  {isAdmin && (
                    <button
                      onClick={() => setPosts(posts.filter((p) => p.id !== post.id))}
                      className="text-red-600 hover:text-red-700"
                    >
                      Delete
                    </button>
                  )}
                </div>
              </div>
            ))}
        </div>
      </main>
    </div>
  );
}