/**
 * Admin Database Connections Page
 * Manage database connections, test connectivity, discover schemas
 */

import React, { useState, useEffect } from 'react';

interface DatabaseConnection {
  id: string;
  name: string;
  description?: string;
  connectorType: string;
  isActive: boolean;
  healthStatus: 'healthy' | 'unhealthy' | 'unknown';
  healthMessage?: string;
  lastHealthCheck?: string;
  allowedTables?: string[];
  allowedOperations: string[];
  createdAt: string;
}

interface ConnectionFormData {
  name: string;
  description: string;
  connectorType: string;
  host: string;
  port: number;
  database: string;
  username: string;
  password: string;
  ssl: boolean;
  allowedOperations: string[];
}

export function AdminDatabaseConnections() {
  const [connections, setConnections] = useState<DatabaseConnection[]>([]);
  const [loading, setLoading] = useState(true);
  const [showAddModal, setShowAddModal] = useState(false);
  const [testingId, setTestingId] = useState<string | null>(null);
  const [discoveringId, setDiscoveringId] = useState<string | null>(null);

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

  const fetchConnections = async () => {
    try {
      const response = await fetch('/api/plugins/database-connector/connections');
      const data = await response.json();
      setConnections(data.connections || []);
    } catch (error) {
      console.error('Failed to fetch connections:', error);
    } finally {
      setLoading(false);
    }
  };

  const testConnection = async (id: string) => {
    setTestingId(id);
    try {
      const response = await fetch(`/api/plugins/database-connector/connections/${id}/test`, {
        method: 'POST',
      });
      const result = await response.json();
      
      // Update connection status in UI
      setConnections(prev => prev.map(conn => 
        conn.id === id 
          ? { ...conn, healthStatus: result.success ? 'healthy' : 'unhealthy', healthMessage: result.message }
          : conn
      ));
    } catch (error) {
      console.error('Test failed:', error);
    } finally {
      setTestingId(null);
    }
  };

  const discoverSchema = async (id: string) => {
    setDiscoveringId(id);
    try {
      const response = await fetch(`/api/plugins/database-connector/connections/${id}/discover`, {
        method: 'POST',
      });
      const result = await response.json();
      console.log('Discovered schemas:', result.schemas);
      // TODO: Show schema explorer modal
    } catch (error) {
      console.error('Discovery failed:', error);
    } finally {
      setDiscoveringId(null);
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'healthy': return '🟢';
      case 'unhealthy': return '🔴';
      default: return '⚪';
    }
  };

  const getConnectorIcon = (type: string) => {
    switch (type) {
      case 'mysql': return '🐬';
      case 'postgres': return '🐘';
      case 'mongodb': return '🍃';
      case 'rest_api': return '🔗';
      default: return '📦';
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className="p-6" dir="rtl">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-2xl font-bold">🗄️ اتصالات قواعد البيانات</h1>
          <p className="text-muted-foreground">إدارة الاتصالات بقواعد البيانات الخارجية</p>
        </div>
        <button
          onClick={() => setShowAddModal(true)}
          className="bg-primary text-primary-foreground px-4 py-2 rounded-lg flex items-center gap-2"
        >
          <span>+</span>
          <span>إضافة اتصال</span>
        </button>
      </div>

      {connections.length === 0 ? (
        <div className="text-center py-12 bg-muted/50 rounded-lg">
          <div className="text-4xl mb-4">🗄️</div>
          <h3 className="text-lg font-semibold mb-2">لا توجد اتصالات</h3>
          <p className="text-muted-foreground mb-4">
            أضف اتصال بقاعدة بيانات لتمكين الوكلاء من الوصول للبيانات
          </p>
          <button
            onClick={() => setShowAddModal(true)}
            className="bg-primary text-primary-foreground px-4 py-2 rounded-lg"
          >
            إضافة اتصال جديد
          </button>
        </div>
      ) : (
        <div className="grid gap-4">
          {connections.map((connection) => (
            <div
              key={connection.id}
              className="bg-card border rounded-lg p-4 hover:shadow-md transition-shadow"
            >
              <div className="flex justify-between items-start">
                <div className="flex items-start gap-3">
                  <div className="text-2xl">{getConnectorIcon(connection.connectorType)}</div>
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="font-semibold">{connection.name}</h3>
                      <span>{getStatusIcon(connection.healthStatus)}</span>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {connection.connectorType.toUpperCase()}
                    </p>
                    {connection.description && (
                      <p className="text-sm mt-1">{connection.description}</p>
                    )}
                    {connection.healthMessage && (
                      <p className={`text-xs mt-1 ${connection.healthStatus === 'healthy' ? 'text-green-600' : 'text-red-600'}`}>
                        {connection.healthMessage}
                      </p>
                    )}
                  </div>
                </div>
                
                <div className="flex gap-2">
                  <button
                    onClick={() => testConnection(connection.id)}
                    disabled={testingId === connection.id}
                    className="px-3 py-1 text-sm border rounded hover:bg-muted disabled:opacity-50"
                  >
                    {testingId === connection.id ? '⏳' : '🔌'} اختبار
                  </button>
                  <button
                    onClick={() => discoverSchema(connection.id)}
                    disabled={discoveringId === connection.id}
                    className="px-3 py-1 text-sm border rounded hover:bg-muted disabled:opacity-50"
                  >
                    {discoveringId === connection.id ? '⏳' : '🔍'} استكشاف
                  </button>
                  <button className="px-3 py-1 text-sm border rounded hover:bg-muted">
                    ⚙️ إعدادات
                  </button>
                </div>
              </div>

              <div className="flex gap-4 mt-4 text-sm text-muted-foreground">
                <span>
                  العمليات: {connection.allowedOperations.map(op => 
                    op === 'read' ? 'قراءة' : op === 'write' ? 'كتابة' : 'حذف'
                  ).join('، ')}
                </span>
                {connection.lastHealthCheck && (
                  <span>آخر فحص: {new Date(connection.lastHealthCheck).toLocaleString('ar-SA')}</span>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Add Connection Modal would go here */}
      {showAddModal && (
        <AddConnectionModal 
          onClose={() => setShowAddModal(false)}
          onSave={() => {
            setShowAddModal(false);
            fetchConnections();
          }}
        />
      )}
    </div>
  );
}

function AddConnectionModal({ onClose, onSave }: { onClose: () => void; onSave: () => void }) {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState<ConnectionFormData>({
    name: '',
    description: '',
    connectorType: '',
    host: '',
    port: 3306,
    database: '',
    username: '',
    password: '',
    ssl: false,
    allowedOperations: ['read'],
  });
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);

  const connectorTypes = [
    { id: 'mysql', name: 'MySQL', icon: '🐬', port: 3306 },
    { id: 'postgres', name: 'PostgreSQL', icon: '🐘', port: 5432 },
    { id: 'mongodb', name: 'MongoDB', icon: '🍃', port: 27017 },
    { id: 'rest_api', name: 'REST API', icon: '🔗', port: 443 },
  ];

  const handleSubmit = async () => {
    try {
      const config = formData.connectorType === 'rest_api' 
        ? {
            type: 'rest_api',
            baseUrl: formData.host,
            authType: 'none',
          }
        : {
            type: formData.connectorType,
            host: formData.host,
            port: formData.port,
            database: formData.database,
            username: formData.username,
            password: formData.password,
            ssl: formData.ssl,
          };

      await fetch('/api/plugins/database-connector/connections', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: formData.name,
          description: formData.description,
          config,
          allowedOperations: formData.allowedOperations,
        }),
      });

      onSave();
    } catch (error) {
      console.error('Failed to create connection:', error);
    }
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-background rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto" dir="rtl">
        <div className="p-4 border-b flex justify-between items-center">
          <h2 className="text-lg font-semibold">إضافة اتصال جديد</h2>
          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">✕</button>
        </div>

        <div className="p-4">
          {step === 1 && (
            <div>
              <p className="mb-4">اختر نوع قاعدة البيانات:</p>
              <div className="grid grid-cols-2 gap-3">
                {connectorTypes.map((type) => (
                  <button
                    key={type.id}
                    onClick={() => {
                      setFormData(prev => ({ ...prev, connectorType: type.id, port: type.port }));
                      setStep(2);
                    }}
                    className="p-4 border rounded-lg hover:bg-muted text-center"
                  >
                    <div className="text-3xl mb-2">{type.icon}</div>
                    <div className="font-medium">{type.name}</div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-1">اسم الاتصال</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
                  className="w-full border rounded-lg px-3 py-2"
                  placeholder="مثال: قاعدة بيانات CRM"
                />
              </div>

              {formData.connectorType !== 'rest_api' ? (
                <>
                  <div className="grid grid-cols-3 gap-3">
                    <div className="col-span-2">
                      <label className="block text-sm font-medium mb-1">المضيف (Host)</label>
                      <input
                        type="text"
                        value={formData.host}
                        onChange={(e) => setFormData(prev => ({ ...prev, host: e.target.value }))}
                        className="w-full border rounded-lg px-3 py-2"
                        placeholder="localhost"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-1">المنفذ</label>
                      <input
                        type="number"
                        value={formData.port}
                        onChange={(e) => setFormData(prev => ({ ...prev, port: parseInt(e.target.value) }))}
                        className="w-full border rounded-lg px-3 py-2"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium mb-1">اسم قاعدة البيانات</label>
                    <input
                      type="text"
                      value={formData.database}
                      onChange={(e) => setFormData(prev => ({ ...prev, database: e.target.value }))}
                      className="w-full border rounded-lg px-3 py-2"
                    />
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-sm font-medium mb-1">اسم المستخدم</label>
                      <input
                        type="text"
                        value={formData.username}
                        onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value }))}
                        className="w-full border rounded-lg px-3 py-2"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-1">كلمة المرور</label>
                      <input
                        type="password"
                        value={formData.password}
                        onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
                        className="w-full border rounded-lg px-3 py-2"
                      />
                    </div>
                  </div>

                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={formData.ssl}
                      onChange={(e) => setFormData(prev => ({ ...prev, ssl: e.target.checked }))}
                    />
                    <span className="text-sm">استخدام SSL</span>
                  </label>
                </>
              ) : (
                <div>
                  <label className="block text-sm font-medium mb-1">رابط API</label>
                  <input
                    type="url"
                    value={formData.host}
                    onChange={(e) => setFormData(prev => ({ ...prev, host: e.target.value }))}
                    className="w-full border rounded-lg px-3 py-2"
                    placeholder="https://api.example.com/v1"
                  />
                </div>
              )}

              <div>
                <label className="block text-sm font-medium mb-2">العمليات المسموحة</label>
                <div className="flex gap-4">
                  {['read', 'write', 'delete'].map((op) => (
                    <label key={op} className="flex items-center gap-2">
                      <input
                        type="checkbox"
                        checked={formData.allowedOperations.includes(op)}
                        onChange={(e) => {
                          if (e.target.checked) {
                            setFormData(prev => ({ ...prev, allowedOperations: [...prev.allowedOperations, op] }));
                          } else {
                            setFormData(prev => ({ ...prev, allowedOperations: prev.allowedOperations.filter(o => o !== op) }));
                          }
                        }}
                      />
                      <span className="text-sm">
                        {op === 'read' ? 'قراءة' : op === 'write' ? 'كتابة' : 'حذف'}
                      </span>
                    </label>
                  ))}
                </div>
              </div>

              {testResult && (
                <div className={`p-3 rounded-lg ${testResult.success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                  {testResult.success ? '✅' : '❌'} {testResult.message}
                </div>
              )}
            </div>
          )}
        </div>

        <div className="p-4 border-t flex justify-between">
          {step > 1 && (
            <button
              onClick={() => setStep(step - 1)}
              className="px-4 py-2 border rounded-lg hover:bg-muted"
            >
              السابق
            </button>
          )}
          <div className="flex gap-2 mr-auto">
            <button onClick={onClose} className="px-4 py-2 border rounded-lg hover:bg-muted">
              إلغاء
            </button>
            {step === 2 && (
              <button
                onClick={handleSubmit}
                disabled={!formData.name || !formData.host}
                className="px-4 py-2 bg-primary text-primary-foreground rounded-lg disabled:opacity-50"
              >
                حفظ
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default AdminDatabaseConnections;