/**
 * WordPress Integration Modal Component
 * Form for connecting/managing WordPress integration
 */
import React, { useState } from 'react';
import { X, Globe, AlertCircle } from 'lucide-react';
import { Modal } from '../ui/modal';
import Button from '../ui/button/Button';
import Label from '../form/Label';
import Input from '../form/input/InputField';
import Checkbox from '../form/input/Checkbox';
import { useToast } from '../ui/toast/ToastContainer';

interface WordPressIntegrationModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: WordPressIntegrationFormData) => Promise<void>;
  initialData?: WordPressIntegrationFormData;
  siteId: number;
}

export interface WordPressIntegrationFormData {
  url: string;
  username: string;
  app_password: string;
  is_active: boolean;
  sync_enabled: boolean;
}

export default function WordPressIntegrationModal({
  isOpen,
  onClose,
  onSubmit,
  initialData,
  siteId,
}: WordPressIntegrationModalProps) {
  const toast = useToast();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState<WordPressIntegrationFormData>({
    url: initialData?.url || '',
    username: initialData?.username || '',
    app_password: initialData?.app_password || '',
    is_active: initialData?.is_active ?? true,
    sync_enabled: initialData?.sync_enabled ?? true,
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!formData.url || !formData.username || !formData.app_password) {
      toast.error('Please fill in all required fields');
      return;
    }

    try {
      setLoading(true);
      await onSubmit(formData);
      toast.success('WordPress integration saved successfully');
      onClose();
    } catch (error: any) {
      toast.error(`Failed to save integration: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="lg">
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
              <Globe className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
            </div>
            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
              {initialData ? 'Edit WordPress Integration' : 'Connect WordPress Site'}
            </h2>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
            <div className="flex items-start gap-3">
              <AlertCircle className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
              <div className="text-sm text-blue-800 dark:text-blue-300">
                <p className="font-medium mb-1">WordPress Application Password Required</p>
                <p>
                  You need to create an Application Password in WordPress. Go to Users → Profile → 
                  Application Passwords to generate one.
                </p>
              </div>
            </div>
          </div>

          <div>
            <Label htmlFor="url" required>
              WordPress Site URL
            </Label>
            <Input
              id="url"
              type="url"
              value={formData.url}
              onChange={(e) => setFormData({ ...formData, url: e.target.value })}
              placeholder="https://example.com"
              required
            />
            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
              Enter your WordPress site URL (without trailing slash)
            </p>
          </div>

          <div>
            <Label htmlFor="username" required>
              WordPress Username
            </Label>
            <Input
              id="username"
              type="text"
              value={formData.username}
              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
              placeholder="admin"
              required
            />
          </div>

          <div>
            <Label htmlFor="app_password" required>
              Application Password
            </Label>
            <Input
              id="app_password"
              type="password"
              value={formData.app_password}
              onChange={(e) => setFormData({ ...formData, app_password: e.target.value })}
              placeholder="xxxx xxxx xxxx xxxx xxxx xxxx"
              required
            />
            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
              Enter the application password (with spaces or without)
            </p>
          </div>

          <div className="space-y-3 pt-2">
            <Checkbox
              id="is_active"
              checked={formData.is_active}
              onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
              label="Enable Integration"
            />
            <Checkbox
              id="sync_enabled"
              checked={formData.sync_enabled}
              onChange={(e) => setFormData({ ...formData, sync_enabled: e.target.checked })}
              label="Enable Two-Way Sync"
            />
          </div>

          <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
            <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
              Cancel
            </Button>
            <Button type="submit" variant="primary" disabled={loading}>
              {loading ? 'Saving...' : initialData ? 'Update Integration' : 'Connect'}
            </Button>
          </div>
        </form>
      </div>
    </Modal>
  );
}

