import React, { useEffect, useState } from 'react';
import { fetchApi } from '../../utils/api';

export const AdminDashboardOverview: React.FC = () => {
  const [stats, setStats] = useState({
    deputies: 0,
    news: 0,
    galleries: 0,
    achievements: 0,
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadStats() {
      try {
        const [deputies, news, galleries, achievements] = await Promise.all([
          fetchApi('/deputies').catch(() => []),
          fetchApi('/news').catch(() => []),
          fetchApi('/galleries').catch(() => []),
          fetchApi('/achievements').catch(() => []),
        ]);

        setStats({
          deputies: deputies.length,
          news: news.length,
          galleries: galleries.length,
          achievements: achievements.length,
        });
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    }
    loadStats();
  }, []);

  return (
    <div>
      <h1 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '24px' }}>
        Dashboard Summary
      </h1>

      {loading ? (
        <div style={{ color: '#94a3b8' }}>Memuat statistik...</div>
      ) : (
        <div style={styles.grid}>
          <div style={{ ...styles.card, borderColor: '#3b82f6' }}>
            <span style={styles.cardIcon}>🏢</span>
            <div>
              <div style={styles.cardValue}>{stats.deputies}</div>
              <div style={styles.cardLabel}>Total Kedeputian / Unit</div>
            </div>
          </div>

          <div style={{ ...styles.card, borderColor: '#10b981' }}>
            <span style={styles.cardIcon}>📰</span>
            <div>
              <div style={styles.cardValue}>{stats.news}</div>
              <div style={styles.cardLabel}>Artikel & Berita</div>
            </div>
          </div>

          <div style={{ ...styles.card, borderColor: '#f59e0b' }}>
            <span style={styles.cardIcon}>🖼️</span>
            <div>
              <div style={styles.cardValue}>{stats.galleries}</div>
              <div style={styles.cardLabel}>Item Galeri & Dokumentasi</div>
            </div>
          </div>

          <div style={{ ...styles.card, borderColor: '#8b5cf6' }}>
            <span style={styles.cardIcon}>🏆</span>
            <div>
              <div style={styles.cardValue}>{stats.achievements}</div>
              <div style={styles.cardLabel}>Laporan Capaian & Prestasi</div>
            </div>
          </div>
        </div>
      )}

      <div style={styles.guideCard}>
        <h3 style={{ margin: '0 0 12px 0', color: '#60a5fa' }}>⚡ Petunjuk Penggunaan CMS Museum BNN</h3>
        <ul style={{ margin: 0, paddingLeft: '20px', lineHeight: '1.8', color: '#cbd5e1' }}>
          <li><b>Berita & Informasi</b>: Tambah dan edit artikel berita per kedeputian (Dukungan Bahasa Indonesia & Inggris).</li>
          <li><b>Galeri & Media</b>: Unggah foto, video (MP4), dan dokumen PDF yang terhubung ke masing-masing kedeputian.</li>
          <li><b>Struktur Organisasi</b>: Ganti bagan gambar struktur organisasi kedeputian.</li>
          <li><b>Capaian & Prestasi</b>: Kelola daftar capaian serta dokumen pendukung PDF.</li>
        </ul>
      </div>
    </div>
  );
};

const styles: { [key: string]: React.CSSProperties } = {
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
    gap: '20px',
    marginBottom: '32px',
  },
  card: {
    backgroundColor: '#1e293b',
    borderRadius: '12px',
    padding: '24px',
    borderLeft: '5px solid #3b82f6',
    display: 'flex',
    alignItems: 'center',
    gap: '16px',
    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
  },
  cardIcon: {
    fontSize: '36px',
  },
  cardValue: {
    fontSize: '28px',
    fontWeight: 700,
    color: '#ffffff',
  },
  cardLabel: {
    fontSize: '13px',
    color: '#94a3b8',
    marginTop: '2px',
  },
  guideCard: {
    backgroundColor: '#1e293b',
    borderRadius: '12px',
    padding: '24px',
    border: '1px solid #334155',
  },
};