/**
 * ProviderEditor Component
 *
 * Provider configuration editor: API Key, Base URL, enabled state, custom models
 */

import { useState, useEffect } from 'react';
import {
  X,
  Save,
  Server,
  Key,
  Globe,
  AlertCircle,
  Plus,
  Trash2,
  Eye,
  EyeOff,
  Cpu,
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { toast } from 'sonner';
import { cn } from '../utils/cn';
import { modalOverlay, modalContent, smoothTransition } from '../utils/animations';
import { Button } from '../primitives/Button';
import { Input } from '../primitives/Input';
import {
  getProvider,
  updateProviderConfig,
  addProviderModel,
  deleteProviderModel,
  type ProviderDetail,
  type ProviderConfig,
  type ModelInfo,
} from '../api/client.js';

interface ProviderEditorProps {
  /** Provider ID to edit */
  providerId: string;
  onClose: () => void;
  onSave: () => void;
  /** Enable responsive layout */
  responsive?: boolean;
}

export function ProviderEditor({
  providerId,
  onClose,
  onSave,
  responsive = false,
}: ProviderEditorProps) {
  // Provider data
  const [provider, setProvider] = useState<ProviderDetail | null>(null);

  // Form state
  const [apiKey, setApiKey] = useState('');
  const [baseUrl, setBaseUrl] = useState('');
  const [enabled, setEnabled] = useState(true);

  // Custom model form
  const [showAddModel, setShowAddModel] = useState(false);
  const [newModelId, setNewModelId] = useState('');
  const [newModelName, setNewModelName] = useState('');
  const [newModelVision, setNewModelVision] = useState(false);
  const [newModelTools, setNewModelTools] = useState(false);

  // UI state
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showApiKey, setShowApiKey] = useState(false);

  // Load provider data
  useEffect(() => {
    async function loadProvider() {
      setLoading(true);
      setError(null);
      try {
        const result = await getProvider(providerId);
        if (result.success && result.data) {
          setProvider(result.data);
          // Initialize form with current config
          const config = result.data.config;
          // API key is not returned for security, but we show if it's configured via hasApiKey
          setApiKey('');
          setBaseUrl(config.baseUrl || result.data.baseUrl || '');
          setEnabled(config.enabled !== false);
        } else {
          setError(result.error || 'Failed to load provider');
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load provider');
      } finally {
        setLoading(false);
      }
    }

    loadProvider();
  }, [providerId]);

  // Save configuration
  const handleSave = async () => {
    setSaving(true);
    setError(null);

    try {
      const config: Partial<ProviderConfig> = {
        enabled,
      };

      // Only include changed values
      if (apiKey.trim()) {
        config.apiKey = apiKey;
      }
      if (baseUrl.trim() && baseUrl !== provider?.baseUrl) {
        config.baseUrl = baseUrl;
      }

      const result = await updateProviderConfig(providerId, config);
      if (result.success) {
        toast.success(`Provider "${providerId}" updated`);
        onSave();
      } else {
        setError(result.error || 'Failed to save');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to save');
    } finally {
      setSaving(false);
    }
  };

  // Add custom model
  const handleAddModel = async () => {
    if (!newModelId.trim() || !newModelName.trim()) {
      toast.error('Model ID and Name are required');
      return;
    }

    try {
      const model: ModelInfo = {
        id: newModelId.trim(),
        name: newModelName.trim(),
        capabilities: {
          vision: newModelVision,
          functionCalling: newModelTools,
        },
      };

      const result = await addProviderModel(providerId, model);
      if (result.success) {
        toast.success(`Model "${newModelId}" added`);
        // Reset form
        setNewModelId('');
        setNewModelName('');
        setNewModelVision(false);
        setNewModelTools(false);
        setShowAddModel(false);
        // Reload provider
        const updated = await getProvider(providerId);
        if (updated.success && updated.data) {
          setProvider(updated.data);
        }
      } else {
        toast.error(result.error || 'Failed to add model');
      }
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to add model');
    }
  };

  // Delete custom model
  const handleDeleteModel = async (modelId: string) => {
    if (!confirm(`Delete model "${modelId}"?`)) return;

    try {
      const result = await deleteProviderModel(providerId, modelId);
      if (result.success) {
        toast.success(`Model "${modelId}" deleted`);
        // Reload provider
        const updated = await getProvider(providerId);
        if (updated.success && updated.data) {
          setProvider(updated.data);
        }
      } else {
        toast.error(result.error || 'Failed to delete model');
      }
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to delete model');
    }
  };

  return (
    <AnimatePresence>
      <motion.div
        variants={modalOverlay}
        initial="initial"
        animate="animate"
        exit="exit"
        transition={{ duration: 0.2 }}
        className={cn(
          'fixed inset-0 bg-black/50 flex z-60',
          responsive ? 'items-end md:items-center justify-center' : 'items-center justify-center'
        )}
        onClick={onClose}
      >
        <motion.div
          variants={modalContent}
          initial="initial"
          animate="animate"
          exit="exit"
          transition={smoothTransition}
          onClick={(e) => e.stopPropagation()}
          className={cn(
            'bg-surface-subtle max-h-[90vh] overflow-hidden flex flex-col',
            responsive
              ? 'w-full md:w-full md:max-w-lg md:mx-4 rounded-t-2xl md:rounded-lg'
              : 'rounded-lg w-full max-w-lg mx-4'
          )}
        >
          {/* Header */}
          <div
            className={cn(
              'flex items-center justify-between border-b border-line',
              responsive ? 'px-4 md:px-6 py-4' : 'px-6 py-4'
            )}
          >
            {responsive && (
              <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-surface-emphasis rounded-full md:hidden" />
            )}
            <div className={cn(responsive && 'mt-2 md:mt-0')}>
              <h2 className="text-lg font-semibold flex items-center gap-2">
                <Server size={20} className="text-primary-400" />
                {loading ? 'Loading...' : provider?.name || providerId}
              </h2>
              {provider && (
                <p className="text-xs text-fg-subtle">
                  {provider.builtin ? 'Built-in Provider' : 'Custom Provider'}
                </p>
              )}
            </div>
            <div className="flex items-center gap-2">
              <Button
                variant="default"
                size="sm"
                onClick={handleSave}
                disabled={saving || loading}
                className={cn(responsive && 'min-h-[44px]')}
              >
                <Save size={16} className="mr-1" />
                {saving ? 'Saving...' : 'Save'}
              </Button>
              <Button
                variant="ghost"
                size="icon"
                onClick={onClose}
                className={cn(responsive && 'min-w-[44px] min-h-[44px]')}
              >
                <X size={20} />
              </Button>
            </div>
          </div>

          {/* Content */}
          <div className="flex-1 overflow-y-auto p-4 space-y-6">
            {loading ? (
              <div className="flex items-center justify-center py-12">
                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary-500" />
              </div>
            ) : (
              <>
                {/* Error */}
                {error && (
                  <div className="flex items-start gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
                    <AlertCircle size={16} className="mt-0.5 flex-shrink-0" />
                    <span>{error}</span>
                  </div>
                )}

                {/* Enabled Toggle */}
                <div className="flex items-center justify-between p-3 bg-surface-base/50 rounded-lg">
                  <div>
                    <span className="text-sm font-medium">Enabled</span>
                    <p className="text-xs text-fg-subtle">Use this provider for model selection</p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setEnabled(!enabled)}
                    className={cn(
                      'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
                      enabled ? 'bg-primary-500' : 'bg-surface-emphasis'
                    )}
                  >
                    <span
                      className={cn(
                        'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
                        enabled ? 'translate-x-6' : 'translate-x-1'
                      )}
                    />
                  </button>
                </div>

                {/* API Key Section */}
                <div className="space-y-3">
                  <h3 className="text-sm font-medium text-fg-secondary flex items-center gap-2">
                    <Key size={14} />
                    API Key Configuration
                  </h3>

                  {/* API Key Input */}
                  <div>
                    <label className="block text-xs text-fg-muted mb-1">API Key</label>
                    <div className="relative">
                      <Input
                        type={showApiKey ? 'text' : 'password'}
                        value={apiKey}
                        onChange={(e) => setApiKey(e.target.value)}
                        placeholder={provider?.config.hasApiKey ? '••••••••' : 'Enter API key'}
                        className="pr-10"
                      />
                      <button
                        type="button"
                        onClick={() => setShowApiKey(!showApiKey)}
                        className="absolute right-3 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-secondary"
                      >
                        {showApiKey ? <EyeOff size={16} /> : <Eye size={16} />}
                      </button>
                    </div>
                    {provider?.config.hasApiKey && (
                      <p className="text-xs text-green-400 mt-1">API key is configured</p>
                    )}
                  </div>

                </div>

                {/* Base URL Section */}
                <div className="space-y-3">
                  <h3 className="text-sm font-medium text-fg-secondary flex items-center gap-2">
                    <Globe size={14} />
                    Endpoint Configuration
                  </h3>

                  <div>
                    <label className="block text-xs text-fg-muted mb-1">Base URL</label>
                    <Input
                      value={baseUrl}
                      onChange={(e) => setBaseUrl(e.target.value)}
                      placeholder={provider?.baseUrl || 'https://api.provider.com/v1'}
                    />
                    {provider?.builtin && (
                      <p className="text-xs text-fg-subtle mt-1">
                        Leave empty to use default endpoint
                      </p>
                    )}
                  </div>
                </div>

                {/* Custom Models Section */}
                {provider?.allowCustomModels && (
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <h3 className="text-sm font-medium text-fg-secondary flex items-center gap-2">
                        <Cpu size={14} />
                        Custom Models ({provider.config.customModels.length})
                      </h3>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => setShowAddModel(!showAddModel)}
                        className="text-xs text-primary-400"
                      >
                        <Plus size={14} className="mr-1" />
                        Add Model
                      </Button>
                    </div>

                    {/* Add Model Form */}
                    <AnimatePresence>
                      {showAddModel && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: 'auto', opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          className="overflow-hidden"
                        >
                          <div className="p-3 bg-surface-base/50 rounded-lg space-y-3 border border-line">
                            <div className="grid grid-cols-2 gap-3">
                              <div>
                                <label className="block text-xs text-fg-muted mb-1">Model ID</label>
                                <Input
                                  value={newModelId}
                                  onChange={(e) => setNewModelId(e.target.value)}
                                  placeholder="gpt-4o-custom"
                                  className="text-sm"
                                />
                              </div>
                              <div>
                                <label className="block text-xs text-fg-muted mb-1">Display Name</label>
                                <Input
                                  value={newModelName}
                                  onChange={(e) => setNewModelName(e.target.value)}
                                  placeholder="GPT-4o Custom"
                                  className="text-sm"
                                />
                              </div>
                            </div>
                            <div className="flex items-center gap-4">
                              <label className="flex items-center gap-2 text-sm text-fg-muted cursor-pointer">
                                <input
                                  type="checkbox"
                                  checked={newModelVision}
                                  onChange={(e) => setNewModelVision(e.target.checked)}
                                  className="w-4 h-4 rounded border-line-muted bg-surface-base text-primary-500"
                                />
                                Vision
                              </label>
                              <label className="flex items-center gap-2 text-sm text-fg-muted cursor-pointer">
                                <input
                                  type="checkbox"
                                  checked={newModelTools}
                                  onChange={(e) => setNewModelTools(e.target.checked)}
                                  className="w-4 h-4 rounded border-line-muted bg-surface-base text-primary-500"
                                />
                                Function Calling
                              </label>
                            </div>
                            <div className="flex justify-end gap-2">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => {
                                  setShowAddModel(false);
                                  setNewModelId('');
                                  setNewModelName('');
                                }}
                              >
                                Cancel
                              </Button>
                              <Button size="sm" onClick={handleAddModel}>
                                Add
                              </Button>
                            </div>
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>

                    {/* Custom Models List */}
                    {provider.config.customModels.length > 0 ? (
                      <div className="space-y-1">
                        {provider.config.customModels.map((model) => (
                          <div
                            key={model.id}
                            className="flex items-center justify-between p-2 bg-surface-base/50 rounded-lg text-sm"
                          >
                            <div>
                              <span className="text-fg-secondary">{model.name}</span>
                              <span className="text-fg-subtle ml-2">({model.id})</span>
                              <div className="flex items-center gap-2 mt-0.5">
                                {model.capabilities?.vision && (
                                  <span className="text-[10px] text-fg-subtle">Vision</span>
                                )}
                                {model.capabilities?.functionCalling && (
                                  <span className="text-[10px] text-fg-subtle">Tools</span>
                                )}
                              </div>
                            </div>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleDeleteModel(model.id)}
                              className="text-red-400 hover:text-red-300 p-1"
                            >
                              <Trash2 size={14} />
                            </Button>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <p className="text-xs text-fg-subtle text-center py-2">
                        No custom models added yet
                      </p>
                    )}
                  </div>
                )}

                {/* Built-in Models Info */}
                {provider && (
                  <div className="text-xs text-fg-subtle p-3 bg-surface-base/30 rounded-lg">
                    <p className="font-medium mb-1">Built-in Models:</p>
                    <div className="flex flex-wrap gap-1">
                      {provider.models.slice(0, 5).map((m) => (
                        <span key={m.id} className="px-1.5 py-0.5 bg-surface-subtle rounded">
                          {m.name}
                        </span>
                      ))}
                      {provider.models.length > 5 && (
                        <span className="px-1.5 py-0.5 text-fg-muted">
                          +{provider.models.length - 5} more
                        </span>
                      )}
                    </div>
                  </div>
                )}
              </>
            )}
          </div>

          {/* Footer */}
          <div
            className={cn(
              'border-t border-line flex justify-end gap-2',
              responsive ? 'px-4 py-3 safe-area-pb' : 'px-6 py-3'
            )}
          >
            <Button variant="ghost" onClick={onClose}>
              Cancel
            </Button>
            <Button variant="default" onClick={handleSave} disabled={saving || loading}>
              <Save size={16} className="mr-1" />
              {saving ? 'Saving...' : 'Save'}
            </Button>
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
}