/**
 * Admin Scheduled Callbacks Page
 * View and manage scheduled callbacks for debt collection, follow-ups, etc.
 */

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

interface ScheduledCallback {
  id: string;
  phoneNumber: string;
  customerName?: string;
  scheduledAt: string;
  reason: string;
  reasonDetails?: {
    amount?: number;
    currency?: string;
    invoiceId?: string;
  };
  status: 'pending' | 'in_progress' | 'completed' | 'failed' | 'cancelled';
  retryCount: number;
  maxRetries: number;
  callResult?: string;
  callSummary?: string;
  createdBy: string;
  createdAt: string;
}

export function AdminScheduledCallbacks() {
  const [callbacks, setCallbacks] = useState<ScheduledCallback[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<string>('all');
  const [showScheduleModal, setShowScheduleModal] = useState(false);

  useEffect(() => {
    fetchCallbacks();
  }, [filter]);

  const fetchCallbacks = async () => {
    try {
      const params = filter !== 'all' ? `?status=${filter}` : '';
      const response = await fetch(`/api/plugins/database-connector/callbacks${params}`);
      const data = await response.json();
      setCallbacks(data.callbacks || []);
    } catch (error) {
      console.error('Failed to fetch callbacks:', error);
    } finally {
      setLoading(false);
    }
  };

  const cancelCallback = async (id: string) => {
    if (!confirm('هل أنت متأكد من إلغاء هذه المكالمة المجدولة؟')) return;
    
    try {
      await fetch(`/api/plugins/database-connector/callbacks/${id}`, {
        method: 'DELETE',
      });
      fetchCallbacks();
    } catch (error) {
      console.error('Failed to cancel callback:', error);
    }
  };

  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      pending: 'bg-yellow-100 text-yellow-800',
      in_progress: 'bg-blue-100 text-blue-800',
      completed: 'bg-green-100 text-green-800',
      failed: 'bg-red-100 text-red-800',
      cancelled: 'bg-gray-100 text-gray-800',
    };
    const labels: Record<string, string> = {
      pending: 'قيد الانتظار',
      in_progress: 'جاري الاتصال',
      completed: 'مكتمل',
      failed: 'فشل',
      cancelled: 'ملغي',
    };
    return (
      <span className={`px-2 py-1 rounded-full text-xs ${styles[status] || styles.pending}`}>
        {labels[status] || status}
      </span>
    );
  };

  const getReasonLabel = (reason: string) => {
    const labels: Record<string, string> = {
      payment_reminder: '💰 تذكير بالدفع',
      follow_up: '📞 متابعة',
      appointment_confirmation: '📅 تأكيد موعد',
      survey: '📋 استبيان',
      custom: '📝 مخصص',
    };
    return labels[reason] || reason;
  };

  const stats = {
    total: callbacks.length,
    pending: callbacks.filter(c => c.status === 'pending').length,
    completed: callbacks.filter(c => c.status === 'completed').length,
    failed: callbacks.filter(c => c.status === 'failed').length,
  };

  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={() => setShowScheduleModal(true)}
          className="bg-primary text-primary-foreground px-4 py-2 rounded-lg flex items-center gap-2"
        >
          <span>+</span>
          <span>جدولة مكالمة</span>
        </button>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-4 gap-4 mb-6">
        <div className="bg-card border rounded-lg p-4 text-center">
          <div className="text-2xl font-bold">{stats.total}</div>
          <div className="text-sm text-muted-foreground">إجمالي</div>
        </div>
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-yellow-700">{stats.pending}</div>
          <div className="text-sm text-yellow-600">قيد الانتظار</div>
        </div>
        <div className="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-green-700">{stats.completed}</div>
          <div className="text-sm text-green-600">مكتمل</div>
        </div>
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-red-700">{stats.failed}</div>
          <div className="text-sm text-red-600">فشل</div>
        </div>
      </div>

      {/* Filter Tabs */}
      <div className="flex gap-2 mb-4 border-b">
        {[
          { id: 'all', label: 'الكل' },
          { id: 'pending', label: 'قيد الانتظار' },
          { id: 'completed', label: 'مكتمل' },
          { id: 'failed', label: 'فشل' },
        ].map((tab) => (
          <button
            key={tab.id}
            onClick={() => setFilter(tab.id)}
            className={`px-4 py-2 border-b-2 -mb-px ${
              filter === tab.id 
                ? 'border-primary text-primary' 
                : 'border-transparent text-muted-foreground hover:text-foreground'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Callbacks List */}
      {callbacks.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">
            سيتم عرض المكالمات المجدولة هنا عند إنشائها
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {callbacks.map((callback) => (
            <div
              key={callback.id}
              className="bg-card border rounded-lg p-4 hover:shadow-md transition-shadow"
            >
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="font-semibold">{callback.customerName || callback.phoneNumber}</span>
                    {getStatusBadge(callback.status)}
                  </div>
                  
                  <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
                    <span>📱 {callback.phoneNumber}</span>
                    <span>🏷️ {getReasonLabel(callback.reason)}</span>
                    <span>📅 {new Date(callback.scheduledAt).toLocaleString('ar-SA')}</span>
                    {callback.reasonDetails?.amount && (
                      <span>💰 {callback.reasonDetails.amount} {callback.reasonDetails.currency || 'ريال'}</span>
                    )}
                  </div>

                  {callback.callSummary && (
                    <div className="mt-2 p-2 bg-muted rounded text-sm">
                      <strong>ملخص المكالمة:</strong> {callback.callSummary}
                    </div>
                  )}

                  {callback.retryCount > 0 && (
                    <div className="mt-2 text-sm text-orange-600">
                      ⚠️ محاولة {callback.retryCount} من {callback.maxRetries}
                    </div>
                  )}
                </div>

                <div className="flex gap-2">
                  {callback.status === 'pending' && (
                    <>
                      <button className="px-3 py-1 text-sm border rounded hover:bg-muted">
                        ✏️ تعديل
                      </button>
                      <button 
                        onClick={() => cancelCallback(callback.id)}
                        className="px-3 py-1 text-sm border border-red-200 text-red-600 rounded hover:bg-red-50"
                      >
                        ❌ إلغاء
                      </button>
                    </>
                  )}
                  {callback.status === 'failed' && (
                    <button className="px-3 py-1 text-sm border rounded hover:bg-muted">
                      🔄 إعادة جدولة
                    </button>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default AdminScheduledCallbacks;