// CICDWebhookContent.tsx — CI/CD Webhook 弹窗内容
// 作者: Logan.Li
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import { useUserStore } from '@/store';

export interface CICDWebhookContentProps {
  clusterCode: string;
  namespace: string;
  deploymentName: string;
}

export function CICDWebhookContent({ clusterCode, namespace, deploymentName }: CICDWebhookContentProps) {
  const { toast } = useToast();
  const token = useUserStore(( s: any) => s.token) || localStorage.getItem('token') || '';
  const webhookUrl = `${window.location.origin}/api/v1/clusters/${clusterCode}/namespaces/${namespace}/deployments/${deploymentName}/update-image`;
  const curlCmd = `curl -X POST '${webhookUrl}' \\
  -H 'Authorization: Bearer ${token ? token.substring(0, 16) + '...' : 'YOUR_TOKEN'}' \\
  -H 'Content-Type: application/json' \\
  -d '{"image": "harbor.example.com/app:v1.0", "container": "your-container-name"}'`;

  const copy = (text: string) => {
    navigator.clipboard.writeText(text).then(() => toast({ title: '已复制' })).catch(() => {});
  };

  return (
    <div className="space-y-4">
      <div>
        <Label className="text-slate-400 text-sm">Webhook URL</Label>
        <div className="flex items-center gap-2 mt-1">
          <code className="flex-1 text-xs text-slate-300 bg-slate-800 rounded px-3 py-2 break-all font-mono">{webhookUrl}</code>
          <Button variant="outline" size="sm" className="border-slate-700 text-slate-400 shrink-0" onClick={() => copy(webhookUrl)}>复制</Button>
        </div>
      </div>
      <div>
        <Label className="text-slate-400 text-sm">curl 示例</Label>
        <div className="relative mt-1">
          <pre className="text-xs text-slate-300 bg-slate-800 rounded p-3 overflow-x-auto font-mono whitespace-pre-wrap">{curlCmd}</pre>
          <Button variant="outline" size="sm" className="absolute top-2 right-2 border-slate-700 text-slate-400" onClick={() => copy(curlCmd)}>复制</Button>
        </div>
      </div>
      <div className="text-xs text-slate-500 space-y-1">
        <p>• 使用 Bearer Token 认证（JWT 登录令牌）</p>
        <p>• <code className="text-slate-400">image</code> 必填，指定新镜像地址</p>
        <p>• <code className="text-slate-400">container</code> 可选，不填则更新第一个容器</p>
      </div>
    </div>
  );
}