import * as React from "react"
 
import { useConsoleCapture } from "@/hooks/use-console-capture"
 
function LogViewer() {
  const { logs, clear, setScope, enable, disable, isEnabled } =
    useConsoleCapture({
      scope: "all",
      enabled: true,
    })
 
  return (
    <div>
      <button onClick={() => setScope("all")}>Capture All Logs</button>
      <button onClick={() => setScope("current")}>
        Capture Current Component
      </button>
      <button
        onClick={() => setScope("path", { componentPath: "/components" })}
      >
        Capture by Path
      </button>
      <button onClick={disable}>Disable</button>
      <button onClick={clear}>Clear Logs</button>
 
      <div>
        {logs.map((log) => (
          <div key={log.id}>
            [{log.level}] {log.message}
          </div>
        ))}
      </div>
    </div>
  )
}

type CaptureScope = "all" | "current" | "path" | "disabled"

type LogLevel = "log" | "info" | "warn" | "error" | "debug"

interface ConsoleLog {
  id: string
  level: LogLevel
  message: string
  args: unknown[]
  timestamp: number
  componentPath?: string
  componentName?: string
  stack?: string
}

function App() {
  const { logs } = useConsoleCapture({
    scope: "all",
    enabled: true,
  })
 
  return (
    <div>
      {logs.map((log) => (
        <div key={log.id}>
          [{log.level}] {log.message}
        </div>
      ))}
    </div>
  )
}

function MyComponent() {
  const { logs } = useConsoleCapture({
    scope: "current",
    componentName: "MyComponent",
  })
 
  const handleClick = () => {
    console.log("Button clicked")
  }
 
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <div>
        {logs.map((log) => (
          <div key={log.id}>{log.message}</div>
        ))}
      </div>
    </div>
  )
}

function LogViewer() {
  const { logs, setScope } = useConsoleCapture({
    scope: "path",
    componentPath: "/components/utils",
  })
 
  return (
    <div>
      <button
        onClick={() => setScope("path", { componentPath: "/components/utils" })}
      >
        Filter by Path
      </button>
      {/* Display logs */}
    </div>
  )
}

function ConsolePanel() {
  const { logs, setScope, enable, disable, isEnabled, scope } =
    useConsoleCapture()
 
  return (
    <div>
      <select
        value={scope}
        onChange={(e) => setScope(e.target.value as CaptureScope)}
      >
        <option value="all">All Logs</option>
        <option value="current">Current Component</option>
        <option value="path">By Path</option>
        <option value="disabled">Disabled</option>
      </select>
 
      <button onClick={isEnabled ? disable : enable}>
        {isEnabled ? "Disable" : "Enable"}
      </button>
 
      <div>
        {logs.map((log) => (
          <div key={log.id}>
            <span>[{log.level}]</span>
            <span>{log.message}</span>
            {log.componentName && <span>from {log.componentName}</span>}
          </div>
        ))}
      </div>
    </div>
  )
}

function ErrorViewer() {
  const { logs } = useConsoleCapture({
    scope: "all",
    levels: ["error", "warn"], // Only capture errors and warnings
  })
 
  return (
    <div>
      <h3>Errors and Warnings</h3>
      {logs.map((log) => (
        <div
          key={log.id}
          className={log.level === "error" ? "error" : "warning"}
        >
          {log.message}
        </div>
      ))}
    </div>
  )
}

function CompactLogViewer() {
  const { logs } = useConsoleCapture({
    scope: "all",
    maxLogs: 50, // Keep only last 50 logs
  })
 
  return (
    <div>
      {logs.map((log) => (
        <div key={log.id}>{log.message}</div>
      ))}
    </div>
  )
}