import React from 'react';
import { Users, Server, AlertTriangle, Settings, Search, Download } from 'lucide-react';

const AdminPanel = () => {
  return (
    <div className="container animate-fade-in" style={{ padding: '4rem 0' }}>
      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '3rem' }}>
        <div>
          <h2 style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>Admin Kontrol Merkezi</h2>
          <p style={{ color: 'var(--text-muted)' }}>Küresel sistem yönetimi ve kullanıcı izleme.</p>
        </div>
        <div style={{ display: 'flex', gap: '1rem' }}>
          <div className="glass" style={{ display: 'flex', alignItems: 'center', padding: '0 1rem', borderRadius: '12px' }}>
            <Search size={18} color="var(--text-muted)" />
            <input type="text" placeholder="Kullanıcı/Hizmet ara..." style={{ background: 'transparent', border: 'none', padding: '0.75rem', color: 'white', outline: 'none' }} />
          </div>
          <button className="btn btn-outline"><Download size={18} /> Logları Dışa Aktar</button>
        </div>
      </header>

      {/* Admin İstatistikleri */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1.5rem', marginBottom: '3rem' }}>
        <AdminStatCard icon={<Users />} label="Toplam Kullanıcı" value="1.284" color="#6366f1" />
        <AdminStatCard icon={<Server />} label="Aktif Düğümler" value="42" color="#10b981" />
        <AdminStatCard icon={<AlertTriangle />} label="Sistem Uyarıları" value="2" color="#f43f5e" />
        <AdminStatCard icon={<Settings />} label="Bekleyen Görevler" value="18" color="#f59e0b" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '2rem' }}>
        {/* Kullanıcı Yönetimi Tablosu */}
        <div className="glass" style={{ padding: '2rem' }}>
          <h3 style={{ marginBottom: '1.5rem' }}>Küresel Kullanıcı Listesi</h3>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ textAlign: 'left', borderBottom: '1px solid var(--border)' }}>
                <th style={{ padding: '1rem', color: 'var(--text-muted)', fontSize: '0.9rem' }}>Kullanıcı</th>
                <th style={{ padding: '1rem', color: 'var(--text-muted)', fontSize: '0.9rem' }}>Plan</th>
                <th style={{ padding: '1rem', color: 'var(--text-muted)', fontSize: '0.9rem' }}>Hizmetler</th>
                <th style={{ padding: '1rem', color: 'var(--text-muted)', fontSize: '0.9rem' }}>İşlemler</th>
              </tr>
            </thead>
            <tbody>
              <UserRow name="Hilman Bey" email="hilman@example.com" plan="Enterprise" services="12" />
              <UserRow name="Alice Smith" email="alice@example.com" plan="Pro" services="3" />
              <UserRow name="Bob Johnson" email="bob@example.com" plan="Free" services="1" />
            </tbody>
          </table>
        </div>

        {/* Sistem Sağlığı */}
        <div className="glass" style={{ padding: '2rem' }}>
          <h3 style={{ marginBottom: '1.5rem' }}>Sistem Sağlığı</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
            <HealthItem label="API Yanıt Süresi" value="42ms" status="Optimal" />
            <HealthItem label="Veritabanı Yükü" value="%14" status="Düşük" />
            <HealthItem label="Ağ Trafiği" value="2.4 GB/s" status="Normal" />
            <HealthItem label="Kaynak Kıtlığı" value="Yok" status="İyi" />
          </div>
        </div>
      </div>
    </div>
  );
};

const AdminStatCard = ({ icon, label, value, color }) => (
  <div className="glass" style={{ padding: '1.5rem' }}>
    <div style={{ color, marginBottom: '1rem' }}>{icon}</div>
    <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{label}</p>
    <h4 style={{ fontSize: '1.75rem', fontWeight: 'bold' }}>{value}</h4>
  </div>
);

const UserRow = ({ name, email, plan, services }) => (
  <tr style={{ borderBottom: '1px solid var(--border)' }}>
    <td style={{ padding: '1rem' }}>
      <div style={{ fontWeight: '600' }}>{name}</div>
      <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>{email}</div>
    </td>
    <td style={{ padding: '1rem' }}>
      <span style={{ fontSize: '0.8rem', background: 'rgba(255,255,255,0.05)', padding: '0.2rem 0.5rem', borderRadius: '4px' }}>{plan}</span>
    </td>
    <td style={{ padding: '1rem' }}>{services}</td>
    <td style={{ padding: '1rem' }}>
      <button style={{ background: 'none', border: 'none', color: 'var(--primary)', cursor: 'pointer', fontSize: '0.9rem' }}>Yönet</button>
    </td>
  </tr>
);

const HealthItem = ({ label, value, status }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
      <span style={{ fontSize: '0.9rem' }}>{label}</span>
      <span style={{ fontSize: '0.8rem', color: '#10b981' }}>{status}</span>
    </div>
    <div style={{ fontSize: '1.1rem', fontWeight: 'bold' }}>{value}</div>
  </div>
);

export default AdminPanel;