'use client';

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { blogPosts } from '@/data/blog';
import { promos } from '@/data/promos';
import { locations } from '@/data/locations';
import AdminLayout from '@/components/admin/AdminLayout';

export default function AdminDashboardPage() {
  const router = useRouter();
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [testimonialCount, setTestimonialCount] = useState(0);

  useEffect(() => {
    const token = localStorage.getItem('admin_token');
    const loggedIn = localStorage.getItem('admin_token') || localStorage.getItem('admin_logged_in');
    if (!token && !loggedIn) { router.push('/admin/login'); return; }
    setIsLoggedIn(true);
    fetchTestimonials();
  }, [router]);

  const fetchTestimonials = async () => {
    try {
      const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000';
      const res = await fetch(`${apiUrl}/api/testimonials`);
      if (res.ok) { const data = await res.json(); setTestimonialCount(data.length); }
    } catch (e) {}
  };

  if (!isLoggedIn) return null;

  const stats = [
    { icon: '📝', label: 'Total Artikel', value: blogPosts.length, desc: 'Published & Draft' },
    { icon: '⭐', label: 'Testimonial', value: testimonialCount, desc: 'Client Reviews' },
    { icon: '🏥', label: 'Cabang', value: locations.length, desc: 'Outlet Aktif' },
    { icon: '🚀', label: 'Promo Aktif', value: promos.length, desc: 'Sedang Berlangsung' },
  ];

  return (
    <AdminLayout title="Dashboard">
      <div className="space-y-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6">
          {stats.map((stat) => (
            <div key={stat.label} className="bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md transition">
              <div className="flex items-center justify-between mb-3"><span className="text-2xl">{stat.icon}</span></div>
              <p className="text-3xl font-bold text-gray-800">{stat.value}</p>
              <p className="text-sm font-medium text-gray-700 mt-1">{stat.label}</p>
              <p className="text-xs text-gray-400">{stat.desc}</p>
            </div>
          ))}
        </div>
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
          <div className="bg-white rounded-xl border border-gray-200 p-6">
            <h3 className="font-semibold text-gray-800 mb-4 flex items-center gap-2">📰 Artikel Terbaru</h3>
            <div className="space-y-3">
              {blogPosts.slice(0, 4).map((post) => (
                <div key={post.id} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                  <div className="min-w-0 flex-1">
                    <p className="text-sm text-gray-800 font-medium truncate">{post.title}</p>
                    <p className="text-xs text-gray-400">{post.date} · {post.category}</p>
                  </div>
                  <span className={`text-xs px-2 py-0.5 rounded-full ml-3 font-medium ${post.id === '1' ? 'bg-green-50 text-green-600' : 'bg-gray-50 text-gray-500'}`}>
                    {post.id === '1' ? 'Published' : 'Draft'}
                  </span>
                </div>
              ))}
            </div>
          </div>
          <div className="bg-white rounded-xl border border-gray-200 p-6">
            <h3 className="font-semibold text-gray-800 mb-4 flex items-center gap-2">💬 Testimonial Terbaru</h3>
            <p className="text-sm text-gray-500">Total {testimonialCount} testimonial tersimpan di database.</p>
          </div>
        </div>
      </div>
    </AdminLayout>
  );
}
