frontend/src/components/Stats/MetricsPanel.tsx

import React from 'react';
import { useGridStore } from '../../store/gridStore';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Activity, Clock, HardDrive, Route } from 'lucide-react';

export const MetricsPanel: React.FC = () => {
  const { searchResult, planResult } = useGridStore();

  const result = searchResult || planResult;

  if (!result) {
    return null;
  }

  const metrics = [
    {
      label: 'Cost',
      value: 'cost' in result ? result.cost : result.totalCost,
      icon: Route,
    },
    {
      label: 'Nodes',
      value: 'nodesExpanded' in result ? result.nodesExpanded : result.totalNodesExpanded,
      icon: Activity,
    },
    {
      label: 'Runtime',
      value: `${result.runtimeMs.toFixed(1)}ms`,
      icon: Clock,
    },
    {
      label: 'Memory',
      value: `${result.memoryKb.toFixed(2)}KB`,
      icon: HardDrive,
    },
  ];

  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-zinc-400 font-medium">
          <Activity className="w-4 h-4" />
          Results
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-2">
          {metrics.map((metric) => (
            <div key={metric.label} className="bg-zinc-800 rounded p-2">
              <div className="flex items-center gap-1.5 text-xs text-zinc-600 mb-0.5">
                <metric.icon className="w-3 h-3" />
                <span>{metric.label}</span>
              </div>
              <p className="text-sm font-mono text-zinc-300">
                {metric.value}
              </p>
            </div>
          ))}
        </div>

        {searchResult?.plan && (
          <div className="mt-3">
            <div className="text-xs text-zinc-600 mb-1">Path</div>
            <div className="bg-zinc-800 rounded p-2 text-xs font-mono text-zinc-400 overflow-x-auto">
              {searchResult.plan || 'No path found'}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

export default MetricsPanel;