import { useState } from 'react';
import { Search, Plus, Edit2, Trash2, ChevronLeft, ChevronRight } from 'lucide-react';

export default function AdminPanel() {
  const [posts, setPosts] = useState([
    { id: 1, title: 'Getting Started with React', status: 'Published', date: '2024-01-15', author: 'John Doe' },
    { id: 2, title: 'CSS Best Practices', status: 'Draft', date: '2024-01-16', author: 'Jane Smith' },
    { id: 3, title: 'JavaScript Tips and Tricks', status: 'Published', date: '2024-01-17', author: 'Mike Johnson' },
  ]);

  const [selectedTab, setSelectedTab] = useState('posts');
  const [searchTerm, setSearchTerm] = useState('');

  const filteredPosts = posts.filter(post =>
    post.title.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Sidebar */}
      <div className="fixed left-0 top-0 h-full w-64 bg-white shadow-lg">
        <div className="p-6">
          <h1 className="text-xl font-bold text-gray-800">Blog Admin</h1>
        </div>
        <nav className="mt-6">
          <button
            onClick={() => setSelectedTab('posts')}
            className={`w-full px-6 py-3 text-left ${
              selectedTab === 'posts' ? 'bg-blue-50 text-blue-600' : 'text-gray-600'
            }`}
          >
            Posts
          </button>
          <button
            onClick={() => setSelectedTab('comments')}
            className={`w-full px-6 py-3 text-left ${
              selectedTab === 'comments' ? 'bg-blue-50 text-blue-600' : 'text-gray-600'
            }`}
          >
            Comments
          </button>
          <button
            onClick={() => setSelectedTab('settings')}
            className={`w-full px-6 py-3 text-left ${
              selectedTab === 'settings' ? 'bg-blue-50 text-blue-600' : 'text-gray-600'
            }`}
          >
            Settings
          </button>
        </nav>
      </div>

      {/* Main Content */}
      <div className="ml-64 p-8">
        <div className="mb-8 flex items-center justify-between">
          <h2 className="text-2xl font-bold text-gray-800">Blog Posts</h2>
          <button className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
            <Plus size={20} />
            New Post
          </button>
        </div>

        {/* Search Bar */}
        <div className="mb-6 flex items-center gap-4">
          <div className="relative flex-1">
            <input
              type="text"
              placeholder="Search posts..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full rounded-lg border border-gray-300 py-2 pl-10 pr-4 focus:border-blue-500 focus:outline-none"
            />
            <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
          </div>
          <select className="rounded-lg border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none">
            <option>All Status</option>
            <option>Published</option>
            <option>Draft</option>
          </select>
        </div>

        {/* Posts Table */}
        <div className="rounded-lg bg-white p-6 shadow-sm">
          <table className="w-full">
            <thead>
              <tr className="border-b text-left">
                <th className="pb-4">Title</th>
                <th className="pb-4">Author</th>
                <th className="pb-4">Status</th>
                <th className="pb-4">Date</th>
                <th className="pb-4">Actions</th>
              </tr>
            </thead>
            <tbody>
              {filteredPosts.map((post) => (
                <tr key={post.id} className="border-b">
                  <td className="py-4">{post.title}</td>
                  <td className="py-4">{post.author}</td>
                  <td className="py-4">
                    <span
                      className={`rounded-full px-3 py-1 text-sm ${
                        post.status === 'Published'
                          ? 'bg-green-100 text-green-800'
                          : 'bg-yellow-100 text-yellow-800'
                      }`}
                    >
                      {post.status}
                    </span>
                  </td>
                  <td className="py-4">{post.date}</td>
                  <td className="py-4">
                    <div className="flex gap-2">
                      <button className="rounded p-1 hover:bg-gray-100">
                        <Edit2 size={18} className="text-gray-600" />
                      </button>
                      <button className="rounded p-1 hover:bg-gray-100">
                        <Trash2 size={18} className="text-red-600" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {/* Pagination */}
          <div className="mt-4 flex items-center justify-between">
            <p className="text-sm text-gray-600">Showing 1-3 of 3 posts</p>
            <div className="flex items-center gap-2">
              <button className="rounded border p-2 hover:bg-gray-50">
                <ChevronLeft size={18} />
              </button>
              <button className="rounded border p-2 hover:bg-gray-50">
                <ChevronRight size={18} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}