← back to Goodquestion

src/components/mindmap/MindMap.tsx

231 lines

'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import {
  Database,
  Brain,
  BarChart3,
  Server,
  Cloud,
  GitBranch,
  Zap,
  TrendingUp,
} from 'lucide-react'

interface MindMapNode {
  id: string
  label: string
  icon: React.ReactNode
  color: string
  children?: MindMapNode[]
}

export function MindMap() {
  const mindMapData: MindMapNode = {
    id: 'root',
    label: 'Local Business Viability SWOT Engine',
    icon: <Brain className="h-6 w-6" />,
    color: 'bg-purple-500',
    children: [
      {
        id: 'data-ingestion',
        label: 'Data Ingestion (Source)',
        icon: <Database className="h-5 w-5" />,
        color: 'bg-blue-500',
        children: [
          {
            id: 'business-dir',
            label: 'Local Business Directories',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-blue-400',
          },
          {
            id: 'historical',
            label: 'Historical Documents',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-blue-400',
          },
          {
            id: 'trajectory',
            label: 'Economic Trajectory Data',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-blue-400',
          },
        ],
      },
      {
        id: 'ai-core',
        label: 'AI Core (Processing)',
        icon: <Brain className="h-5 w-5" />,
        color: 'bg-green-500',
        children: [
          {
            id: 'claude',
            label: 'Claude API',
            icon: <Zap className="h-4 w-4" />,
            color: 'bg-green-400',
          },
          {
            id: 'mcp',
            label: 'MCP Server',
            icon: <Server className="h-4 w-4" />,
            color: 'bg-green-400',
          },
          {
            id: 'vector',
            label: 'Vector Database',
            icon: <Database className="h-4 w-4" />,
            color: 'bg-green-400',
          },
        ],
      },
      {
        id: 'output',
        label: 'Output & Visualization',
        icon: <BarChart3 className="h-5 w-5" />,
        color: 'bg-orange-500',
        children: [
          {
            id: 'swot',
            label: 'Full SWOT Analysis',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-orange-400',
          },
          {
            id: 'timeline',
            label: 'Historical Timeline',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-orange-400',
          },
          {
            id: 'market',
            label: 'Market Size Projections',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-orange-400',
          },
          {
            id: 'scorecard',
            label: 'Go/No-Go Scorecard',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-orange-400',
          },
        ],
      },
      {
        id: 'infrastructure',
        label: 'Infrastructure & Development',
        icon: <Cloud className="h-5 w-5" />,
        color: 'bg-red-500',
        children: [
          {
            id: 'vercel',
            label: 'Vercel Deployment',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-red-400',
          },
          {
            id: 'github',
            label: 'GitHub Repository',
            icon: <GitBranch className="h-4 w-4" />,
            color: 'bg-red-400',
          },
          {
            id: 'next-steps',
            label: 'Next Steps',
            icon: <TrendingUp className="h-4 w-4" />,
            color: 'bg-red-400',
          },
        ],
      },
    ],
  }

  const renderNode = (node: MindMapNode, level: number = 0) => {
    const isRoot = level === 0
    const isLeaf = !node.children || node.children.length === 0

    return (
      <div key={node.id} className={`${level > 0 ? 'ml-8' : ''} mb-4`}>
        <div
          className={`
            flex items-center gap-3 p-4 rounded-lg border-2
            ${isRoot ? 'border-purple-500 bg-purple-50 shadow-lg' : 'border-gray-200 bg-white'}
            hover:shadow-md transition-all cursor-pointer
          `}
        >
          <div className={`${node.color} text-white p-2 rounded-lg`}>
            {node.icon}
          </div>
          <div className="flex-1">
            <div className={`font-semibold ${isRoot ? 'text-lg' : 'text-sm'}`}>
              {node.label}
            </div>
            {isRoot && (
              <div className="text-xs text-muted-foreground mt-1">
                AI-Powered Business Analysis Platform
              </div>
            )}
          </div>
          {!isLeaf && (
            <Badge variant="secondary">
              {node.children?.length} {node.children?.length === 1 ? 'item' : 'items'}
            </Badge>
          )}
        </div>

        {node.children && (
          <div className="relative">
            {/* Connecting line */}
            {level === 0 && (
              <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gradient-to-b from-gray-300 to-transparent" />
            )}
            <div className="mt-4 space-y-3">
              {node.children.map(child => renderNode(child, level + 1))}
            </div>
          </div>
        )}
      </div>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <GitBranch className="h-5 w-5" />
          System Architecture Mind Map
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          {renderNode(mindMapData)}
        </div>

        {/* Legend */}
        <div className="mt-8 p-4 bg-muted/50 rounded-lg">
          <h4 className="text-sm font-semibold mb-3">Component Categories</h4>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-blue-500 rounded" />
              <span className="text-xs">Data Sources</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-green-500 rounded" />
              <span className="text-xs">AI Processing</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-orange-500 rounded" />
              <span className="text-xs">Visualizations</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-red-500 rounded" />
              <span className="text-xs">Infrastructure</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}