openclaw-dashboard/components/ProviderManager.tsx

'use client';

import { useEffect, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Key, Plus, RefreshCw, Check, X, Edit, Trash2 } from 'lucide-react';

interface Provider {
  id: string;
  name: string;
  type: string;
  hasKey: boolean;
  key?: string;
}

export function ProviderManager() {
  const [providers, setProviders] = useState<Provider[]>([]);
  const [loading, setLoading] = useState(true);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingProvider, setEditingProvider] = useState<Provider | null>(null);
  const [apiKey, setApiKey] = useState('');
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);

  const fetchProviders = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/providers');
      const data = await response.json();
      setProviders(data.providers || []);
    } catch (error) {
      console.error('Failed to fetch providers:', error);
      setMessage({ type: 'error', text: 'Failed to load providers' });
    } finally {
      setLoading(false);
    }
  };

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

  const handleEdit = (provider: Provider) => {
    setEditingProvider(provider);
    setApiKey(provider.key || '');
    setDialogOpen(true);
  };

  const handleAddNew = () => {
    setEditingProvider(null);
    setApiKey('');
    setDialogOpen(true);
  };

  const handleSave = async () => {
    if (!editingProvider) {
      setMessage({ type: 'error', text: 'Please select a provider to edit' });
      return;
    }

    setSaving(true);
    setMessage(null);

    try {
      const response = await fetch('/api/providers', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          providerId: editingProvider.id,
          apiKey,
        }),
      });

      const result = await response.json();

      if (result.success) {
        setMessage({ type: 'success', text: result.message });
        setDialogOpen(false);
        fetchProviders();
      } else {
        setMessage({ type: 'error', text: result.message || 'Failed to update API key' });
      }
    } catch (error) {
      setMessage({ type: 'error', text: 'Failed to update API key' });
    } finally {
      setSaving(false);
    }
  };

  const groupedProviders = providers.reduce((acc, provider) => {
    if (!acc[provider.type]) {
      acc[provider.type] = [];
    }
    acc[provider.type].push(provider);
    return acc;
  }, {} as Record<string, Provider[]>);

  return (
    <div className="space-y-4">
      {/* Header Actions */}
      <div className="flex justify-between items-center">
        <Button
          onClick={fetchProviders}
          disabled={loading}
          variant="outline"
          className="border-zinc-700 hover:bg-zinc-800"
        >
          <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
          Refresh
        </Button>
        <Button onClick={handleAddNew} className="bg-orange-500 hover:bg-orange-600">
          <Plus className="w-4 h-4 mr-2" />
          Add Provider
        </Button>
      </div>

      {/* Message */}
      {message && (
        <Alert variant={message.type === 'error' ? 'destructive' : 'default'} className={
          message.type === 'success' ? 'bg-green-500/10 border-green-500/20 text-green-400' : ''
        }>
          {message.type === 'success' ? (
            <Check className="h-4 w-4" />
          ) : (
            <X className="h-4 w-4" />
          )}
          <AlertDescription>{message.text}</AlertDescription>
        </Alert>
      )}

      {/* Providers List */}
      {loading ? (
        <div className="flex items-center justify-center h-64">
          <RefreshCw className="w-8 h-8 animate-spin text-orange-400" />
        </div>
      ) : Object.keys(groupedProviders).length === 0 ? (
        <Card className="bg-zinc-900/50 border-zinc-800">
          <CardContent className="py-12 text-center text-zinc-500">
            <Key className="w-12 h-12 mx-auto mb-4 opacity-50" />
            <p>No providers found</p>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          {Object.entries(groupedProviders).map(([type, typeProviders]) => (
            <Card key={type} className="bg-zinc-900/50 border-zinc-800">
              <CardHeader>
                <CardTitle className="capitalize text-lg">
                  {type}
                  <Badge variant="outline" className="ml-2 border-zinc-700">
                    {typeProviders.length}
                  </Badge>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {typeProviders.map((provider) => (
                    <div
                      key={provider.id}
                      className="flex items-center justify-between p-3 rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition-colors"
                    >
                      <div className="flex items-center gap-3">
                        <Key className="w-4 h-4 text-zinc-400" />
                        <div>
                          <p className="font-medium">{provider.name}</p>
                          <p className="text-xs text-zinc-500">{provider.id}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge variant={provider.hasKey ? 'default' : 'secondary'} className={
                          provider.hasKey ? 'bg-green-500/20 text-green-400 hover:bg-green-500/30' : ''
                        }>
                          {provider.hasKey ? 'Configured' : 'No Key'}
                        </Badge>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleEdit(provider)}
                          className="hover:bg-zinc-700"
                        >
                          <Edit className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* Edit/Add Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="bg-zinc-900 border-zinc-800">
          <DialogHeader>
            <DialogTitle>
              {editingProvider ? `Edit ${editingProvider.name}` : 'Add Provider'}
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            {editingProvider ? (
              <>
                <div>
                  <Label>Provider ID</Label>
                  <Input value={editingProvider.id} disabled className="bg-zinc-800 border-zinc-700" />
                </div>
                <div>
                  <Label>Provider Name</Label>
                  <Input value={editingProvider.name} disabled className="bg-zinc-800 border-zinc-700" />
                </div>
              </>
            ) : (
              <Alert>
                <AlertDescription>
                  To add a new provider, please first add it via the OpenClaw CLI configuration.
                </AlertDescription>
              </Alert>
            )}
            {editingProvider && (
              <div>
                <Label htmlFor="api-key">API Key</Label>
                <Input
                  id="api-key"
                  type="password"
                  value={apiKey}
                  onChange={(e) => setApiKey(e.target.value)}
                  placeholder="Enter API key..."
                  className="bg-zinc-800 border-zinc-700 focus:border-orange-500"
                />
                <p className="text-xs text-zinc-500 mt-1">
                  The key will be masked after saving.
                </p>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setDialogOpen(false)}
              className="border-zinc-700 hover:bg-zinc-800"
            >
              Cancel
            </Button>
            {editingProvider && (
              <Button
                onClick={handleSave}
                disabled={saving}
                className="bg-orange-500 hover:bg-orange-600"
              >
                {saving ? (
                  <>
                    <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                    Saving...
                  </>
                ) : (
                  'Save'
                )}
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}