import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import AdminLayout from '../../components/AdminLayout';
import { getStats, getBlogPosts } from '../../utils/api';

const AdminDashboard = () => {
  const [stats, setStats] = useState(null);
  const [recentPosts, setRecentPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadDashboardData();
  }, []);

  const loadDashboardData = async () => {
    try {
      const [statsRes, postsRes] = await Promise.all([
        getStats(),
        getBlogPosts()
      ]);
      setStats(statsRes.data);
      setRecentPosts(postsRes.data.slice(0, 5));
    } catch (error) {
      console.error('Error loading dashboard:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <AdminLayout>
        <div className="text-center py-20">Loading...</div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout>
      <div className="mb-8">
        <h1 className="text-3xl font-extrabold text-gray-900">Dashboard</h1>
        <p className="text-gray-600 mt-2">Selamat datang di Admin Panel RH Elektronik</p>
      </div>

      {/* Stats Grid */}
      <div className="grid md:grid-cols-4 gap-6 mb-8">
        <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-gray-600 font-semibold">Blog Posts</h3>
            <span className="text-2xl">📝</span>
          </div>
          <p className="text-3xl font-bold text-gray-900">{stats?.blog_posts || 0}</p>
          <p className="text-sm text-gray-500 mt-1">Published articles</p>
        </div>

        <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-gray-600 font-semibold">Drafts</h3>
            <span className="text-2xl">📋</span>
          </div>
          <p className="text-3xl font-bold text-gray-900">{stats?.drafts || 0}</p>
          <p className="text-sm text-gray-500 mt-1">Unpublished drafts</p>
        </div>

        <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-gray-600 font-semibold">Services</h3>
            <span className="text-2xl">🔧</span>
          </div>
          <p className="text-3xl font-bold text-gray-900">{stats?.services || 0}</p>
          <p className="text-sm text-gray-500 mt-1">Service offerings</p>
        </div>

        <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-gray-600 font-semibold">Brands</h3>
            <span className="text-2xl">🏭</span>
          </div>
          <p className="text-3xl font-bold text-gray-900">{stats?.brands || 0}</p>
          <p className="text-sm text-gray-500 mt-1">Partner brands</p>
        </div>
      </div>

      {/* Recent Blog Posts */}
      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-xl font-bold text-gray-900">Recent Blog Posts</h2>
          <Link 
            to="/admin/blogs"
            className="text-blue-600 hover:text-blue-700 font-semibold"
          >
            View All →
          </Link>
        </div>

        {recentPosts.length === 0 ? (
          <p className="text-gray-500 text-center py-8">No blog posts yet</p>
        ) : (
          <div className="space-y-4">
            {recentPosts.map((post) => (
              <div 
                key={post.id}
                className="flex items-center justify-between p-4 border border-gray-200 rounded-xl hover:bg-gray-50 transition"
              >
                <div className="flex-1">
                  <h3 className="font-semibold text-gray-900">{post.title}</h3>
                  <p className="text-sm text-gray-500 mt-1">
                    {post.author} • {new Date(post.created_at).toLocaleDateString('id-ID')}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
                    post.status === 'published' 
                      ? 'bg-green-100 text-green-700' 
                      : 'bg-yellow-100 text-yellow-700'
                  }`}>
                    {post.status}
                  </span>
                  <Link 
                    to={`/admin/blogs/${post.id}`}
                    className="text-blue-600 hover:text-blue-700"
                  >
                    Edit
                  </Link>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Quick Actions */}
      <div className="grid md:grid-cols-3 gap-6 mt-8">
        <Link 
          to="/admin/blogs/new"
          className="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition"
        >
          <div className="text-3xl mb-3">✍️</div>
          <h3 className="text-xl font-bold mb-2">New Blog Post</h3>
          <p className="text-blue-100">Create a new article</p>
        </Link>

        <Link 
          to="/admin/services"
          className="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition"
        >
          <div className="text-3xl mb-3">🔧</div>
          <h3 className="text-xl font-bold mb-2">Manage Services</h3>
          <p className="text-purple-100">Edit service offerings</p>
        </Link>

        <Link 
          to="/admin/brands"
          className="bg-gradient-to-br from-green-500 to-green-600 text-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition"
        >
          <div className="text-3xl mb-3">🏭</div>
          <h3 className="text-xl font-bold mb-2">Manage Brands</h3>
          <p className="text-green-100">Update partner brands</p>
        </Link>
      </div>
    </AdminLayout>
  );
};

export default AdminDashboard;
