'use client'

import { Key, Plus, Trash2, Copy, Eye, EyeOff } from 'lucide-react'

export default function APIKeys() {
  return (
    <div>
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">مفاتيح API</h1>
          <p className="text-gray-600">إدارة مفاتيح الوصول للـ API</p>
        </div>
        <button className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all shadow-md">
          <Plus className="h-5 w-5" />
          <span className="font-semibold">إنشاء مفتاح جديد</span>
        </button>
      </div>

      <div className="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8">
        <h3 className="text-lg font-bold text-blue-900 mb-2">💡 معلومات مهمة</h3>
        <ul className="text-sm text-blue-800 space-y-2">
          <li>• لا تشارك مفاتيح API الخاصة بك مع أي شخص</li>
          <li>• احفظ المفاتيح في مكان آمن</li>
          <li>• قم بتجديد المفاتيح بشكل دوري لزيادة الأمان</li>
        </ul>
      </div>

      <div className="space-y-4">
        {[
          { name: 'Production API Key', key: 'sk_live_abc123...', created: '2024-01-01', lastUsed: '2024-01-06' },
          { name: 'Development API Key', key: 'sk_test_xyz789...', created: '2024-01-01', lastUsed: '2024-01-05' }
        ].map((apiKey, index) => (
          <div key={index} className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div className="flex items-start justify-between mb-4">
              <div className="flex items-center gap-3">
                <div className="bg-purple-100 p-3 rounded-lg">
                  <Key className="h-6 w-6 text-purple-600" />
                </div>
                <div>
                  <h3 className="font-bold text-gray-900">{apiKey.name}</h3>
                  <p className="text-sm text-gray-600">تم الإنشاء: {apiKey.created}</p>
                </div>
              </div>
              <div className="flex gap-2">
                <button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg">
                  <Copy className="h-4 w-4" />
                </button>
                <button className="p-2 text-red-600 hover:bg-red-50 rounded-lg">
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </div>

            <div className="bg-gray-50 p-4 rounded-lg font-mono text-sm flex items-center justify-between">
              <span className="text-gray-700">{apiKey.key}</span>
              <button className="text-gray-600 hover:text-gray-900">
                <Eye className="h-4 w-4" />
              </button>
            </div>

            <div className="mt-4 flex items-center justify-between text-sm text-gray-600">
              <span>آخر استخدام: {apiKey.lastUsed}</span>
              <span className="flex items-center gap-1">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                نشط
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}