/**
 * Site Integrations Section
 * Phase 6: Site Integration & Multi-Destination Publishing
 */
import React, { useState, useEffect } from 'react';
import { PlusIcon, TrashIcon, TestTubeIcon, RefreshCw } from 'lucide-react';
import Button from '../ui/button/Button';
import { Modal } from '../ui/modal';
import FormModal, { FormField } from '../common/FormModal';
import PlatformSelector from './PlatformSelector';
import IntegrationStatus from './IntegrationStatus';
import { useToast } from '../ui/toast/ToastContainer';
import { fetchAPI } from '../../services/api';

interface SiteIntegration {
  id: number;
  site: number;
  site_name?: string;
  platform: string;
  platform_type: string;
  is_active: boolean;
  sync_enabled: boolean;
  sync_status: 'success' | 'failed' | 'pending' | 'syncing';
  last_sync_at: string | null;
  sync_error: string | null;
}

interface SiteIntegrationsSectionProps {
  siteId?: number;
}

export default function SiteIntegrationsSection({ siteId }: SiteIntegrationsSectionProps) {
  const toast = useToast();
  const [integrations, setIntegrations] = useState<SiteIntegration[]>([]);
  const [loading, setLoading] = useState(true);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [selectedIntegration, setSelectedIntegration] = useState<SiteIntegration | null>(null);
  const [isSaving, setIsSaving] = useState(false);
  const [isTesting, setIsTesting] = useState(false);

  useEffect(() => {
    loadIntegrations();
  }, [siteId]);

  const loadIntegrations = async () => {
    try {
      setLoading(true);
      const params = siteId ? `?site=${siteId}` : '';
      const data = await fetchAPI(`/v1/integration/integrations/${params}`);
      if (data && Array.isArray(data)) {
        setIntegrations(data);
      }
    } catch (error: any) {
      toast.error(`Failed to load integrations: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  const handleAdd = () => {
    setSelectedIntegration(null);
    setShowAddModal(true);
  };

  const handleEdit = (integration: SiteIntegration) => {
    setSelectedIntegration(integration);
    setShowEditModal(true);
  };

  const handleDelete = async (id: number) => {
    if (!confirm('Are you sure you want to delete this integration?')) return;

    try {
      await fetchAPI(`/v1/integration/integrations/${id}/`, {
        method: 'DELETE',
      });
      toast.success('Integration deleted successfully');
      loadIntegrations();
    } catch (error: any) {
      toast.error(`Failed to delete integration: ${error.message}`);
    }
  };

  const handleTestConnection = async (integration: SiteIntegration) => {
    setIsTesting(true);
    try {
      const data = await fetchAPI(`/v1/integration/integrations/${integration.id}/test_connection/`, {
        method: 'POST',
      });
      if (data?.success) {
        toast.success(data.message || 'Connection test successful');
      } else {
        toast.error(data?.message || 'Connection test failed');
      }
      loadIntegrations();
    } catch (error: any) {
      toast.error(`Connection test failed: ${error.message}`);
    } finally {
      setIsTesting(false);
    }
  };

  const handleSync = async (integration: SiteIntegration) => {
    try {
      const data = await fetchAPI(`/v1/integration/integrations/${integration.id}/sync/`, {
        method: 'POST',
        body: JSON.stringify({
          direction: 'both',
        }),
      });
      if (data?.success) {
        toast.success(`Sync completed. ${data.synced_count || 0} items synced`);
      } else {
        toast.error('Sync failed');
      }
      loadIntegrations();
    } catch (error: any) {
      toast.error(`Sync failed: ${error.message}`);
    }
  };

  const handleSave = async (formData: Record<string, any>) => {
    setIsSaving(true);
    try {
      const payload = {
        site: siteId || formData.site,
        platform: formData.platform,
        platform_type: formData.platform_type || 'cms',
        config_json: {
          site_url: formData.site_url,
          ...(formData.platform === 'shopify' && {
            shop_domain: formData.shop_domain,
          }),
        },
        credentials_json: {
          username: formData.username,
          app_password: formData.app_password,
          ...(formData.platform === 'shopify' && {
            access_token: formData.access_token,
          }),
        },
        is_active: formData.is_active !== false,
        sync_enabled: formData.sync_enabled || false,
      };

      if (selectedIntegration) {
        // Update
        await fetchAPI(`/v1/integration/integrations/${selectedIntegration.id}/`, {
          method: 'PUT',
          body: JSON.stringify(payload),
        });
        toast.success('Integration updated successfully');
      } else {
        // Create
        await fetchAPI('/v1/integration/integrations/', {
          method: 'POST',
          body: JSON.stringify(payload),
        });
        toast.success('Integration created successfully');
      }
      setShowAddModal(false);
      setShowEditModal(false);
      loadIntegrations();
    } catch (error: any) {
      toast.error(`Failed to save integration: ${error.message}`);
    } finally {
      setIsSaving(false);
    }
  };

  const getFields = (): FormField[] => {
    const platform = selectedIntegration?.platform || 'wordpress';
    
    const baseFields: FormField[] = [
      {
        name: 'platform',
        label: 'Platform',
        type: 'custom',
        component: (
          <PlatformSelector
            value={platform}
            onChange={() => {}}
            disabled={!!selectedIntegration}
          />
        ),
        required: true,
      },
    ];

    if (platform === 'wordpress') {
      baseFields.push(
        { name: 'site_url', label: 'WordPress Site URL', type: 'text', required: true, placeholder: 'https://example.com' },
        { name: 'username', label: 'Username', type: 'text', required: true },
        { name: 'app_password', label: 'Application Password', type: 'password', required: true }
      );
    } else if (platform === 'shopify') {
      baseFields.push(
        { name: 'shop_domain', label: 'Shop Domain', type: 'text', required: true, placeholder: 'myshop.myshopify.com' },
        { name: 'access_token', label: 'Access Token', type: 'password', required: true }
      );
    } else {
      baseFields.push(
        { name: 'site_url', label: 'API URL', type: 'text', required: true },
        { name: 'username', label: 'API Key', type: 'text', required: true },
        { name: 'app_password', label: 'API Secret', type: 'password', required: false }
      );
    }

    baseFields.push(
      { name: 'is_active', label: 'Active', type: 'checkbox', defaultValue: true },
      { name: 'sync_enabled', label: 'Enable Two-Way Sync', type: 'checkbox', defaultValue: false }
    );

    return baseFields;
  };

  if (loading) {
    return <div>Loading integrations...</div>;
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Site Integrations</h2>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Connect your sites to external platforms (WordPress, Shopify, Custom APIs)
          </p>
        </div>
        <Button onClick={handleAdd} variant="primary" startIcon={<PlusIcon className="w-4 h-4" />}>
          Add Integration
        </Button>
      </div>

      {integrations.length === 0 ? (
        <div className="text-center py-12 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg">
          <p className="text-gray-600 dark:text-gray-400">No integrations configured</p>
          <Button onClick={handleAdd} variant="outline" className="mt-4">
            Add Your First Integration
          </Button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {integrations.map((integration) => (
            <div
              key={integration.id}
              className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3"
            >
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="font-semibold text-gray-900 dark:text-white capitalize">
                    {integration.platform}
                  </h3>
                  {integration.site_name && (
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      {integration.site_name}
                    </p>
                  )}
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => handleTestConnection(integration)}
                    disabled={isTesting}
                    title="Test Connection"
                  >
                    <TestTubeIcon className="w-4 h-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => handleDelete(integration.id)}
                    title="Delete"
                  >
                    <TrashIcon className="w-4 h-4" />
                  </Button>
                </div>
              </div>

              <IntegrationStatus
                syncEnabled={integration.sync_enabled}
                syncStatus={integration.sync_status}
                lastSyncAt={integration.last_sync_at}
                syncError={integration.sync_error}
              />

              <div className="flex gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleEdit(integration)}
                  className="flex-1"
                >
                  Edit
                </Button>
                {integration.sync_enabled && (
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleSync(integration)}
                    className="flex-1"
                  >
                    <RefreshCw className="w-4 h-4 mr-1" />
                    Sync
                  </Button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Add/Edit Modal */}
      <FormModal
        isOpen={showAddModal || showEditModal}
        onClose={() => {
          setShowAddModal(false);
          setShowEditModal(false);
        }}
        onSubmit={handleSave}
        title={selectedIntegration ? 'Edit Integration' : 'Add Integration'}
        fields={getFields()}
        submitLabel="Save"
        cancelLabel="Cancel"
        isLoading={isSaving}
        initialValues={selectedIntegration ? {
          platform: selectedIntegration.platform,
          site_url: selectedIntegration.site_name || '',
          is_active: selectedIntegration.is_active,
          sync_enabled: selectedIntegration.sync_enabled,
        } : undefined}
      />
    </div>
  );
}

