KiloStar/data/plugin/data_analytics/frontend/CredentialPanel.tsx

import { useState } from 'react';
import { Plus, Trash2, Loader2, Key, Eye, EyeOff } from 'lucide-react';
import { usePluginContext } from './client';
import type { S3Credential } from './types';

const API_BASE = '/api/v1/plugin/data_analytics';

interface Props {
  credentials: S3Credential[];
  loading: boolean;
  onChanged: () => void;
}

export function CredentialPanel({ credentials, loading, onChanged }: Props) {
  const { client } = usePluginContext();
  const [showForm, setShowForm] = useState(false);
  const [showSecret, setShowSecret] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [form, setForm] = useState({
    display_name: '',
    endpoint_url: '',
    region: 'us-east-1',
    access_key: '',
    secret_key: '',
  });

  const reset = () => {
    setForm({ display_name: '', endpoint_url: '', region: 'us-east-1', access_key: '', secret_key: '' });
    setError('');
    setShowSecret(false);
  };

  const submit = async () => {
    if (!form.display_name.trim() || !form.access_key.trim() || !form.secret_key.trim()) {
      setError('显示名 / Access Key / Secret Key 必填');
      return;
    }
    setBusy(true);
    setError('');
    try {
      await client.post(`${API_BASE}/credentials`, {
        display_name: form.display_name.trim(),
        endpoint_url: form.endpoint_url.trim() || null,
        region: form.region.trim() || 'us-east-1',
        access_key: form.access_key,
        secret_key: form.secret_key,
      });
      reset();
      setShowForm(false);
      onChanged();
    } catch (e: unknown) {
      const msg = (e as { response?: { data?: { detail?: string } } }).response?.data?.detail;
      setError(msg || '保存失败');
    } finally {
      setBusy(false);
    }
  };

  const remove = async (cred_id: string) => {
    if (!confirm('确定删除该凭证？删除后该凭证下的任务将无法继续运行。')) return;
    try {
      await client.delete(`${API_BASE}/credentials/${cred_id}`);
      onChanged();
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div className="bg-bg-card rounded-2xl border border-border-primary p-5">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="font-semibold text-text-primary flex items-center gap-2">
            <Key size={16} className="text-accent" /> S3 凭证
          </h3>
          <p className="text-xs text-text-muted mt-0.5">访问密钥加密存储于本地 SQLite。</p>
        </div>
        <button
          className="px-3 py-1.5 text-xs rounded-lg bg-accent text-white hover:opacity-90 transition flex items-center gap-1.5"
          onClick={() => { setShowForm((s) => !s); setError(''); }}
        >
          <Plus size={14} /> {showForm ? '取消' : '新增'}
        </button>
      </div>

      {showForm && (
        <div className="space-y-3 mb-4 p-4 bg-bg-secondary rounded-xl border border-border-secondary">
          <input
            className="w-full px-3 py-2 text-sm rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
            placeholder="显示名（如 prod-aws）"
            value={form.display_name}
            onChange={(e) => setForm({ ...form, display_name: e.target.value })}
          />
          <input
            className="w-full px-3 py-2 text-sm rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
            placeholder="Endpoint URL（可选，自托管 S3 / MinIO 填写）"
            value={form.endpoint_url}
            onChange={(e) => setForm({ ...form, endpoint_url: e.target.value })}
          />
          <input
            className="w-full px-3 py-2 text-sm rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
            placeholder="Region（默认 us-east-1）"
            value={form.region}
            onChange={(e) => setForm({ ...form, region: e.target.value })}
          />
          <input
            className="w-full px-3 py-2 text-sm font-mono rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
            placeholder="Access Key"
            value={form.access_key}
            onChange={(e) => setForm({ ...form, access_key: e.target.value })}
          />
          <div className="relative">
            <input
              type={showSecret ? 'text' : 'password'}
              className="w-full px-3 py-2 pr-10 text-sm font-mono rounded-lg bg-bg-base border border-border-primary focus:outline-none focus:border-accent"
              placeholder="Secret Key"
              value={form.secret_key}
              onChange={(e) => setForm({ ...form, secret_key: e.target.value })}
            />
            <button
              type="button"
              className="absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary"
              onClick={() => setShowSecret((s) => !s)}
            >
              {showSecret ? <EyeOff size={14} /> : <Eye size={14} />}
            </button>
          </div>
          {error && <div className="text-xs text-danger">{error}</div>}
          <button
            className="w-full px-3 py-2 text-sm rounded-lg bg-accent text-white hover:opacity-90 disabled:opacity-50 transition flex items-center justify-center gap-2"
            onClick={submit}
            disabled={busy}
          >
            {busy && <Loader2 size={14} className="animate-spin" />} 保存
          </button>
        </div>
      )}

      {loading ? (
        <div className="flex items-center justify-center py-8 text-text-muted">
          <Loader2 size={20} className="animate-spin" />
        </div>
      ) : credentials.length === 0 ? (
        <div className="text-sm text-text-muted text-center py-8 border border-dashed border-border-primary rounded-xl">
          还没有凭证，点右上角「新增」开始。
        </div>
      ) : (
        <div className="space-y-2">
          {credentials.map((c) => (
            <div
              key={c.cred_id}
              className="flex items-center justify-between p-3 bg-bg-secondary rounded-xl border border-border-secondary"
            >
              <div className="min-w-0 flex-1">
                <div className="text-sm font-medium text-text-primary truncate">{c.display_name}</div>
                <div className="text-[11px] text-text-muted font-mono mt-0.5">
                  {c.endpoint_url || 'aws-s3'} · {c.region} · {c.access_key}
                </div>
              </div>
              <button
                className="p-1.5 text-text-muted hover:text-danger transition"
                onClick={() => remove(c.cred_id)}
                title="删除"
              >
                <Trash2 size={14} />
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}