import { useButlerInsights } from '../../hooks/useButlerInsights';
import { InsightsSection } from './InsightsSection';
import { ProposalsSection } from './ProposalsSection';
import { MemorySection } from './MemorySection';

interface ButlerPanelProps {
  agentId: string | undefined;
}

export function ButlerPanel({ agentId }: ButlerPanelProps) {
  const { painPoints, proposals, loading, error, refresh } = useButlerInsights(agentId);

  if (!agentId) {
    return (
      <div className="flex items-center justify-center h-full">
        <p className="text-sm text-gray-500 dark:text-gray-400">请先选择一个 Agent</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {error && (
        <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 px-3 py-2 text-xs text-red-700 dark:text-red-300">
          {error}
        </div>
      )}

      {loading && (
        <div className="flex items-center justify-center py-4">
          <div className="w-5 h-5 border-2 border-gray-300 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin" />
        </div>
      )}

      {/* Insights section */}
      <div>
        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
          我最近在关注
        </h3>
        <InsightsSection painPoints={painPoints} />
      </div>

      {/* Proposals section */}
      <div>
        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
          我提出的方案
        </h3>
        <ProposalsSection proposals={proposals} onStatusChange={refresh} />
      </div>

      {/* Memory section */}
      <div>
        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
          我记得关于您
        </h3>
        <MemorySection agentId={agentId} />
      </div>
    </div>
  );
}