import * as React from "react"
 
import { useDependencyGraph } from "@/hooks/use-dependency-graph"
 
function UserProfile() {
  const { registerHook, registerContext } = useDependencyGraph({
    componentName: "UserProfile",
  })
 
  const auth = useAuth()
  const data = useFetch("/api/user")
 
  React.useEffect(() => {
    registerHook("useFetch")
    registerContext("AuthContext")
  }, [registerHook, registerContext])
 
  return <div>...</div>
}
 
function Dashboard() {
  const { getInspectorOutput } = useDependencyGraph({
    componentName: "Dashboard",
  })
 
  // Later, analyze the entire dependency graph
  const analysis = getInspectorOutput()
  console.log("Coupling score:", analysis.metrics.couplingScore)
  console.log("Recommendations:", analysis.recommendations)
 
  return <div>...</div>
}

interface InspectorOutput {
  graph: DependencyGraph
  metrics: {
    totalNodes: number
    totalEdges: number
    components: number
    hooks: number
    stores: number
    contexts: number
    maxDependencies: number
    minDependencies: number
    avgDependencies: number
    couplingScore: number // 0-1, higher = more tightly coupled
  }
  clusters: Array<{
    nodes: string[]
    type: "tightly-coupled" | "loosely-coupled" | "isolated"
    score: number
  }>
  recommendations: string[]
}

interface DependencyGraph {
  nodes: Map<string, DependencyNode>
  edges: DependencyEdge[]
  timestamp: number
}
 
interface DependencyNode {
  id: string
  name: string
  type: "component" | "hook" | "store" | "context"
  filePath?: string
  lineNumber?: number
  metadata?: Record<string, unknown>
}
 
interface DependencyEdge {
  from: string // source node ID
  to: string // target node ID
  type: "uses" | "provides" | "consumes" | "depends-on"
  weight?: number // optional coupling strength indicator
}

function ShoppingCart() {
  const { registerHook, registerStore } = useDependencyGraph({
    componentName: "ShoppingCart",
  })
 
  const cart = useCartStore()
  const data = useFetch("/api/cart")
 
  React.useEffect(() => {
    registerHook("useFetch")
    registerStore("CartStore")
  }, [registerHook, registerStore])
 
  return <div>...</div>
}

function ArchitectureAnalyzer() {
  const { getInspectorOutput, downloadGraph } = useDependencyGraph()
 
  const handleAnalyze = () => {
    const output = getInspectorOutput()
 
    // Check coupling score
    if (output.metrics.couplingScore > 0.7) {
      console.warn("High coupling detected!")
    }
 
    // Review recommendations
    output.recommendations.forEach((rec) => {
      console.log("💡", rec)
    })
 
    // Download as JSON file
    downloadGraph("architecture-analysis.json")
  }
 
  return <button onClick={handleAnalyze}>Analyze Architecture</button>
}

function CouplingInspector() {
  const { getInspectorOutput } = useDependencyGraph()
 
  const output = getInspectorOutput()
  const tightClusters = output.clusters.filter(
    (c) => c.type === "tightly-coupled"
  )
 
  return (
    <div>
      <h3>Tightly Coupled Clusters</h3>
      {tightClusters.map((cluster, idx) => (
        <div key={idx}>
          <p>
            Cluster {idx + 1}: {cluster.nodes.length} nodes
          </p>
          <p>Score: {cluster.score.toFixed(2)}</p>
        </div>
      ))}
    </div>
  )
}