/**
 * Query Builder UI Component
 * Visual interface for creating and managing saved queries
 */

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

interface SavedQuery {
  id: string;
  name: string;
  description?: string;
  queryTemplate: string;
  parameters: QueryParameter[];
  naturalLanguageTrigger?: string;
  responseTemplate?: string;
  connectionId: string;
  connectionName?: string;
}

interface QueryParameter {
  name: string;
  type: 'string' | 'number' | 'date' | 'boolean';
  required: boolean;
  defaultValue?: any;
  description?: string;
}

interface Connection {
  id: string;
  name: string;
  type: string;
}

export function QueryBuilder() {
  const [queries, setQueries] = useState<SavedQuery[]>([]);
  const [connections, setConnections] = useState<Connection[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editingQuery, setEditingQuery] = useState<SavedQuery | null>(null);
  const [testResult, setTestResult] = useState<any>(null);
  const [testLoading, setTestLoading] = useState(false);

  const [formData, setFormData] = useState<Partial<SavedQuery>>({
    name: '',
    description: '',
    queryTemplate: '',
    parameters: [],
    naturalLanguageTrigger: '',
    responseTemplate: '',
    connectionId: '',
  });

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

  const fetchData = async () => {
    setLoading(true);
    try {
      const [queriesRes, connectionsRes] = await Promise.all([
        fetch('/api/plugins/database-connector/queries'),
        fetch('/api/plugins/database-connector/connections'),
      ]);
      
      const queriesData = await queriesRes.json();
      const connectionsData = await connectionsRes.json();
      
      setQueries(queriesData.queries || []);
      setConnections(connectionsData.connections || []);
    } catch (error) {
      console.error('Failed to fetch data:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      const url = editingQuery 
        ? `/api/plugins/database-connector/queries/${editingQuery.id}`
        : '/api/plugins/database-connector/queries';
      
      const response = await fetch(url, {
        method: editingQuery ? 'PUT' : 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        setShowForm(false);
        setEditingQuery(null);
        resetForm();
        fetchData();
      }
    } catch (error) {
      console.error('Failed to save query:', error);
    }
  };

  const handleEdit = (query: SavedQuery) => {
    setEditingQuery(query);
    setFormData(query);
    setShowForm(true);
  };

  const handleDelete = async (queryId: string) => {
    if (!confirm('هل أنت متأكد من حذف هذا الاستعلام؟')) return;

    try {
      await fetch(`/api/plugins/database-connector/queries/${queryId}`, {
        method: 'DELETE',
      });
      fetchData();
    } catch (error) {
      console.error('Failed to delete query:', error);
    }
  };

  const handleTest = async () => {
    setTestLoading(true);
    setTestResult(null);

    try {
      const response = await fetch('/api/plugins/database-connector/queries/test', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          connectionId: formData.connectionId,
          query: formData.queryTemplate,
          parameters: {},
        }),
      });

      const result = await response.json();
      setTestResult(result);
    } catch (error) {
      setTestResult({ error: 'فشل في تنفيذ الاستعلام' });
    } finally {
      setTestLoading(false);
    }
  };

  const resetForm = () => {
    setFormData({
      name: '',
      description: '',
      queryTemplate: '',
      parameters: [],
      naturalLanguageTrigger: '',
      responseTemplate: '',
      connectionId: '',
    });
  };

  const addParameter = () => {
    setFormData({
      ...formData,
      parameters: [
        ...(formData.parameters || []),
        { name: '', type: 'string', required: false },
      ],
    });
  };

  const updateParameter = (index: number, updates: Partial<QueryParameter>) => {
    const newParams = [...(formData.parameters || [])];
    newParams[index] = { ...newParams[index], ...updates };
    setFormData({ ...formData, parameters: newParams });
  };

  const removeParameter = (index: number) => {
    const newParams = formData.parameters?.filter((_, i) => i !== index) || [];
    setFormData({ ...formData, parameters: newParams });
  };

  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">
      {/* Header */}
      <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={() => { setShowForm(true); resetForm(); setEditingQuery(null); }}
          className="bg-primary text-primary-foreground px-4 py-2 rounded-lg flex items-center gap-2"
        >
          <span>+</span>
          <span>استعلام جديد</span>
        </button>
      </div>

      {/* Query Form Modal */}
      {showForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-background rounded-lg w-full max-w-3xl max-h-[90vh] overflow-y-auto p-6">
            <h2 className="text-xl font-bold mb-4">
              {editingQuery ? 'تعديل الاستعلام' : 'استعلام جديد'}
            </h2>

            <form onSubmit={handleSubmit} className="space-y-4">
              {/* Basic Info */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1">اسم الاستعلام</label>
                  <input
                    type="text"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    className="w-full border rounded-lg px-3 py-2"
                    placeholder="مثال: استعلام طلبات العميل"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1">الاتصال</label>
                  <select
                    value={formData.connectionId}
                    onChange={(e) => setFormData({ ...formData, connectionId: e.target.value })}
                    className="w-full border rounded-lg px-3 py-2"
                    required
                  >
                    <option value="">اختر الاتصال</option>
                    {connections.map((conn) => (
                      <option key={conn.id} value={conn.id}>{conn.name} ({conn.type})</option>
                    ))}
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium mb-1">الوصف</label>
                <input
                  type="text"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  className="w-full border rounded-lg px-3 py-2"
                  placeholder="وصف مختصر للاستعلام"
                />
              </div>

              {/* SQL Template */}
              <div>
                <label className="block text-sm font-medium mb-1">قالب SQL</label>
                <textarea
                  value={formData.queryTemplate}
                  onChange={(e) => setFormData({ ...formData, queryTemplate: e.target.value })}
                  className="w-full border rounded-lg px-3 py-2 font-mono text-sm h-32"
                  placeholder={`SELECT * FROM orders
WHERE customer_id = {{customer_id}}
ORDER BY created_at DESC
LIMIT {{limit:10}}`}
                  required
                />
                <p className="text-xs text-muted-foreground mt-1">
                  استخدم {'{{parameter_name}}'} للمعاملات. يمكنك تحديد قيمة افتراضية: {'{{limit:10}}'}
                </p>
              </div>

              {/* Parameters */}
              <div>
                <div className="flex justify-between items-center mb-2">
                  <label className="text-sm font-medium">المعاملات</label>
                  <button
                    type="button"
                    onClick={addParameter}
                    className="text-sm text-primary hover:underline"
                  >
                    + إضافة معامل
                  </button>
                </div>
                
                {formData.parameters?.map((param, index) => (
                  <div key={index} className="flex gap-2 mb-2 items-center">
                    <input
                      type="text"
                      value={param.name}
                      onChange={(e) => updateParameter(index, { name: e.target.value })}
                      className="flex-1 border rounded px-2 py-1 text-sm"
                      placeholder="اسم المعامل"
                    />
                    <select
                      value={param.type}
                      onChange={(e) => updateParameter(index, { type: e.target.value as any })}
                      className="border rounded px-2 py-1 text-sm"
                    >
                      <option value="string">نص</option>
                      <option value="number">رقم</option>
                      <option value="date">تاريخ</option>
                      <option value="boolean">منطقي</option>
                    </select>
                    <label className="flex items-center gap-1 text-sm">
                      <input
                        type="checkbox"
                        checked={param.required}
                        onChange={(e) => updateParameter(index, { required: e.target.checked })}
                      />
                      مطلوب
                    </label>
                    <button
                      type="button"
                      onClick={() => removeParameter(index)}
                      className="text-red-500 hover:text-red-700"
                    >
                      ✕
                    </button>
                  </div>
                ))}
              </div>

              {/* Natural Language Trigger */}
              <div>
                <label className="block text-sm font-medium mb-1">محفز اللغة الطبيعية</label>
                <input
                  type="text"
                  value={formData.naturalLanguageTrigger}
                  onChange={(e) => setFormData({ ...formData, naturalLanguageTrigger: e.target.value })}
                  className="w-full border rounded-lg px-3 py-2"
                  placeholder='مثال: "ما هي طلباتي" أو "اعرض طلباتي"'
                />
                <p className="text-xs text-muted-foreground mt-1">
                  الكلمات التي عند ذكرها من العميل يتم تنفيذ هذا الاستعلام
                </p>
              </div>

              {/* Response Template */}
              <div>
                <label className="block text-sm font-medium mb-1">قالب الرد</label>
                <textarea
                  value={formData.responseTemplate}
                  onChange={(e) => setFormData({ ...formData, responseTemplate: e.target.value })}
                  className="w-full border rounded-lg px-3 py-2 h-20"
                  placeholder='لديك {{count}} طلبات. آخر طلب رقم {{last_id}} بقيمة {{last_total}} ريال.'
                />
              </div>

              {/* Test Query */}
              <div className="border rounded-lg p-4 bg-muted/50">
                <div className="flex justify-between items-center mb-2">
                  <span className="font-medium">اختبار الاستعلام</span>
                  <button
                    type="button"
                    onClick={handleTest}
                    disabled={testLoading || !formData.connectionId || !formData.queryTemplate}
                    className="bg-secondary text-secondary-foreground px-3 py-1 rounded text-sm disabled:opacity-50"
                  >
                    {testLoading ? 'جاري التنفيذ...' : 'تنفيذ'}
                  </button>
                </div>
                
                {testResult && (
                  <div className={`p-3 rounded text-sm ${testResult.error ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`}>
                    {testResult.error ? (
                      <span>خطأ: {testResult.error}</span>
                    ) : (
                      <div>
                        <div>✓ تم بنجاح - {testResult.rowCount || 0} صف</div>
                        {testResult.data && (
                          <pre className="mt-2 text-xs overflow-auto max-h-32">
                            {JSON.stringify(testResult.data.slice(0, 3), null, 2)}
                          </pre>
                        )}
                      </div>
                    )}
                  </div>
                )}
              </div>

              {/* Form Actions */}
              <div className="flex justify-end gap-3 pt-4 border-t">
                <button
                  type="button"
                  onClick={() => { setShowForm(false); setEditingQuery(null); }}
                  className="px-4 py-2 border rounded-lg"
                >
                  إلغاء
                </button>
                <button
                  type="submit"
                  className="bg-primary text-primary-foreground px-4 py-2 rounded-lg"
                >
                  {editingQuery ? 'حفظ التعديلات' : 'إنشاء الاستعلام'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Queries List */}
      <div className="grid gap-4">
        {queries.length === 0 ? (
          <div className="text-center py-12 bg-muted/50 rounded-lg">
            <span className="text-4xl mb-4 block">🔍</span>
            <p className="text-muted-foreground">لا توجد استعلامات محفوظة</p>
            <button
              onClick={() => { setShowForm(true); resetForm(); }}
              className="mt-4 text-primary hover:underline"
            >
              إنشاء أول استعلام
            </button>
          </div>
        ) : (
          queries.map((query) => (
            <div key={query.id} className="bg-card border rounded-lg p-4">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="font-semibold">{query.name}</h3>
                  {query.description && (
                    <p className="text-sm text-muted-foreground">{query.description}</p>
                  )}
                  <div className="flex gap-2 mt-2">
                    <span className="text-xs bg-muted px-2 py-1 rounded">
                      {query.connectionName || 'اتصال'}
                    </span>
                    {query.naturalLanguageTrigger && (
                      <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
                        "{query.naturalLanguageTrigger}"
                      </span>
                    )}
                    {query.parameters?.length > 0 && (
                      <span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
                        {query.parameters.length} معاملات
                      </span>
                    )}
                  </div>
                </div>
                <div className="flex gap-2">
                  <button
                    onClick={() => handleEdit(query)}
                    className="text-sm text-primary hover:underline"
                  >
                    تعديل
                  </button>
                  <button
                    onClick={() => handleDelete(query.id)}
                    className="text-sm text-red-500 hover:underline"
                  >
                    حذف
                  </button>
                </div>
              </div>
              
              <div className="mt-3 bg-muted rounded p-2 font-mono text-xs overflow-x-auto">
                {query.queryTemplate}
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

export default QueryBuilder;