beaver_project/app-instance/frontend/app/(app)/plugins/page.tsx

'use client';

import React, { useEffect, useState } from 'react';
import {
  Blocks,
  RefreshCw,
  Loader2,
  AlertCircle,
  Bot,
  Terminal,
  Wrench,
  ChevronDown,
  ChevronRight,
  Globe,
  FolderOpen,
} from 'lucide-react';
import { listPlugins } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import type { PluginInfo } from '@/types';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';

export default function PluginsPage() {
  const { locale } = useAppI18n();
  const [plugins, setPlugins] = useState<PluginInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await listPlugins();
      setPlugins(Array.isArray(data) ? data : []);
    } catch (err: any) {
      setError(err.message || pickAppText(locale, '加载插件失败', 'Failed to load plugins'));
    } finally {
      setLoading(false);
    }
  };

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

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="max-w-5xl mx-auto p-6 space-y-6">
      {/* Page header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <Blocks className="w-6 h-6" />
            {pickAppText(locale, '插件', 'Plugins')}
          </h1>
          <p className="text-sm text-muted-foreground mt-1">
            {pickAppText(locale, '已安装位置：全局插件目录或当前 workspace 的 ', 'Installed from the global plugin directory or this workspace\'s ')}
            <code className="text-xs bg-muted px-1 py-0.5 rounded">plugins/</code>
          </p>
        </div>
        <Button onClick={load} variant="outline" size="sm">
          <RefreshCw className="w-4 h-4 mr-2" />
          {pickAppText(locale, '刷新', 'Refresh')}
        </Button>
      </div>

      {/* Error */}
      {error && (
        <Card className="border-destructive">
          <CardContent className="pt-6">
            <div className="flex items-center gap-2 text-destructive text-sm">
              <AlertCircle className="w-4 h-4" />
              {error}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Empty state */}
      {!error && plugins.length === 0 && (
        <Card>
          <CardContent className="py-16 text-center text-muted-foreground">
            <Blocks className="w-12 h-12 mx-auto mb-4 opacity-30" />
            <p className="font-medium">{pickAppText(locale, '还没有安装任何插件', 'No plugins are installed yet')}</p>
            <p className="text-sm mt-2 max-w-sm mx-auto">
              {pickAppText(locale, '把插件目录放到全局插件目录或当前 workspace 的 ', 'Put a plugin directory in the global plugin directory or this workspace\'s ')}
              <code className="text-xs bg-muted px-1 py-0.5 rounded">plugins/</code>
              {pickAppText(locale, '，然后重启 Boardware Agent Sandbox。', ', then restart Boardware Agent Sandbox.')}
            </p>
          </CardContent>
        </Card>
      )}

      {/* Plugin cards */}
      <div className="space-y-4">
        {plugins.map((plugin) => (
          <PluginCard key={plugin.name} plugin={plugin} />
        ))}
      </div>
    </div>
  );
}

function PluginCard({ plugin }: { plugin: PluginInfo }) {
  const { locale } = useAppI18n();
  const [agentsOpen, setAgentsOpen] = useState(true);
  const [commandsOpen, setCommandsOpen] = useState(true);
  const [skillsOpen, setSkillsOpen] = useState(false);

  const totalItems = plugin.agents.length + plugin.commands.length + plugin.skills.length;

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <CardTitle className="text-base font-semibold">{plugin.name}</CardTitle>
              <SourceBadge source={plugin.source} />
            </div>
            {plugin.description && (
              <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
                {plugin.description}
              </p>
            )}
          </div>
          {/* Summary chips */}
          <div className="flex items-center gap-1.5 shrink-0 flex-wrap justify-end">
            {plugin.agents.length > 0 && (
              <span className="flex items-center gap-1 text-xs bg-muted px-2 py-0.5 rounded-full">
                <Bot className="w-3 h-3" />
                {pickAppText(locale, `${plugin.agents.length} 个智能体`, `${plugin.agents.length} agents`)}
              </span>
            )}
            {plugin.commands.length > 0 && (
              <span className="flex items-center gap-1 text-xs bg-muted px-2 py-0.5 rounded-full">
                <Terminal className="w-3 h-3" />
                {pickAppText(locale, `${plugin.commands.length} 条命令`, `${plugin.commands.length} commands`)}
              </span>
            )}
            {plugin.skills.length > 0 && (
              <span className="flex items-center gap-1 text-xs bg-muted px-2 py-0.5 rounded-full">
                <Wrench className="w-3 h-3" />
                {pickAppText(locale, `${plugin.skills.length} 个技能`, `${plugin.skills.length} skills`)}
              </span>
            )}
          </div>
        </div>
      </CardHeader>

      {totalItems > 0 && (
        <CardContent className="pt-0 space-y-3">
          {/* Agents */}
          {plugin.agents.length > 0 && (
            <Section
              icon={<Bot className="w-3.5 h-3.5" />}
              label={pickAppText(locale, '智能体', 'Agents')}
              count={plugin.agents.length}
              open={agentsOpen}
              onToggle={() => setAgentsOpen((v) => !v)}
            >
              <div className="divide-y divide-border rounded-md border">
                {plugin.agents.map((agent) => (
                  <div key={agent.name} className="px-3 py-2 flex items-start gap-3">
                    <code className="text-xs font-mono text-primary shrink-0 mt-0.5">
                      {agent.name}
                    </code>
                    <div className="flex-1 min-w-0">
                      <p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">{agent.description || '—'}</p>
                    </div>
                    {agent.model && (
                      <Badge variant="outline" className="text-xs shrink-0">
                        {agent.model}
                      </Badge>
                    )}
                  </div>
                ))}
              </div>
            </Section>
          )}

          {/* Commands */}
          {plugin.commands.length > 0 && (
            <Section
              icon={<Terminal className="w-3.5 h-3.5" />}
              label={pickAppText(locale, '命令', 'Commands')}
              count={plugin.commands.length}
              open={commandsOpen}
              onToggle={() => setCommandsOpen((v) => !v)}
            >
              <div className="divide-y divide-border rounded-md border">
                {plugin.commands.map((cmd) => (
                  <div key={cmd.name} className="px-3 py-2 flex items-start gap-3">
                    <div className="flex items-center gap-1.5 shrink-0 mt-0.5">
                      <code className="text-xs font-mono text-primary">/{cmd.name}</code>
                      {cmd.argument_hint && (
                        <span className="text-xs text-muted-foreground">{cmd.argument_hint}</span>
                      )}
                    </div>
                    <p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">
                      {cmd.description || '—'}
                    </p>
                  </div>
                ))}
              </div>
            </Section>
          )}

          {/* Skills */}
          {plugin.skills.length > 0 && (
            <Section
              icon={<Wrench className="w-3.5 h-3.5" />}
              label={pickAppText(locale, '技能', 'Skills')}
              count={plugin.skills.length}
              open={skillsOpen}
              onToggle={() => setSkillsOpen((v) => !v)}
            >
              <div className="flex flex-wrap gap-1.5">
                {plugin.skills.map((skill) => (
                  <Badge key={skill} variant="secondary" className="text-xs font-mono">
                    {skill}
                  </Badge>
                ))}
              </div>
            </Section>
          )}
        </CardContent>
      )}
    </Card>
  );
}

function SourceBadge({ source }: { source: 'global' | 'workspace' }) {
  const { locale } = useAppI18n();
  if (source === 'workspace') {
    return (
      <Badge variant="default" className="text-xs gap-1">
        <FolderOpen className="w-3 h-3" />
        {pickAppText(locale, '工作区', 'Workspace')}
      </Badge>
    );
  }
  return (
    <Badge variant="secondary" className="text-xs gap-1">
      <Globe className="w-3 h-3" />
      {pickAppText(locale, '全局', 'Global')}
    </Badge>
  );
}

function Section({
  icon,
  label,
  count,
  open,
  onToggle,
  children,
}: {
  icon: React.ReactNode;
  label: string;
  count: number;
  open: boolean;
  onToggle: () => void;
  children: React.ReactNode;
}) {
  return (
    <div>
      <button
        onClick={onToggle}
        className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors mb-2 w-full text-left"
      >
        {open ? (
          <ChevronDown className="w-3.5 h-3.5" />
        ) : (
          <ChevronRight className="w-3.5 h-3.5" />
        )}
        {icon}
        {label}
        <span className="ml-1 text-muted-foreground/60">({count})</span>
      </button>
      {open && children}
    </div>
  );
}