import React, { useState } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ServiceProvider } from './context/ServiceContext';
import { useGraph } from './domains/graph/hooks/useGraph';
import DomainGraph from './components/DomainGraph';
import './App.css';

// Create a client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      refetchOnWindowFocus: false,
    },
  },
});

function VisualizerApp() {
  const {
    graphData,
    isLoading,
    error,
    isError,
    getDomainById,
    getConnectedDomains,
    isPartOfCircularDependency,
    getCircularDependenciesForDomain,
    refetch,
  } = useGraph();

  const [selectedNode, setSelectedNode] = useState<string | null>(null);
  const [showCircular, setShowCircular] = useState(true);

  const handleNodeClick = (nodeId: string) => {
    setSelectedNode(selectedNode === nodeId ? null : nodeId);
  };

  const selectedNodeData = selectedNode ? getDomainById(selectedNode) : null;
  const connectedDomains = selectedNode
    ? getConnectedDomains(selectedNode)
    : null;

  if (isLoading) {
    return (
      <div className="loading-container">
        <div className="spinner"></div>
        <h2>Loading domain dependencies...</h2>
        <p>Analyzing your project structure...</p>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="error-container">
        <h2>❌ Error Loading Data</h2>
        <p>{error?.message || 'Failed to load graph data'}</p>
        <button onClick={() => refetch()} className="retry-button">
          🔄 Retry
        </button>
      </div>
    );
  }

  if (!graphData || graphData.nodes.length === 0) {
    return (
      <div className="empty-container">
        <h2>📭 No Domains Found</h2>
        <p>
          No domains were found in your project's <code>src/domains/</code>{' '}
          directory.
        </p>
        <p>Create some domains using the RUCH CLI to see the visualization.</p>
      </div>
    );
  }

  return (
    <div className="app">
      <header className="app-header">
        <h1>🏗️ RUCH Domain Visualizer</h1>
        <div className="stats">
          <span className="stat">
            📁 {graphData.stats.totalDomains} domains
          </span>
          <span className="stat">
            🔗 {graphData.stats.totalDependencies} dependencies
          </span>
          {graphData.stats.circularDependencyCount > 0 && (
            <span className="stat circular">
              ⚠️ {graphData.stats.circularDependencyCount} circular
            </span>
          )}
        </div>
      </header>

      <div className="app-content">
        <div className="graph-section">
          <div className="graph-controls">
            <label className="control-item">
              <input
                type="checkbox"
                checked={showCircular}
                onChange={(e) => setShowCircular(e.target.checked)}
              />
              Highlight circular dependencies
            </label>
            <button onClick={() => refetch()} className="refresh-button">
              🔄 Refresh
            </button>
          </div>

          <div className="graph-container">
            <DomainGraph
              graphData={graphData}
              onNodeClick={handleNodeClick}
              showCircular={showCircular}
            />
          </div>
        </div>

        <div className="sidebar">
          {selectedNodeData ? (
            <div className="node-details">
              <h3>📁 {selectedNodeData.name}</h3>

              <div className="detail-item">
                <strong>Type:</strong>
                <span className={`domain-type ${selectedNodeData.type}`}>
                  {selectedNodeData.type}
                </span>
              </div>

              <div className="detail-item">
                <strong>Files:</strong> {selectedNodeData.fileCount}
              </div>

              {isPartOfCircularDependency(selectedNodeData.id) && (
                <div className="circular-warning">
                  ⚠️ Part of circular dependency
                </div>
              )}

              {connectedDomains && connectedDomains.dependencies.length > 0 && (
                <div className="detail-section">
                  <h4>Dependencies ({connectedDomains.dependencies.length})</h4>
                  <ul className="domain-list">
                    {connectedDomains.dependencies.map((dep) => (
                      <li
                        key={dep.id}
                        onClick={() => setSelectedNode(dep.id)}
                        className="clickable-domain"
                      >
                        <span className={`domain-type ${dep.type}`}></span>
                        {dep.name}
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              {connectedDomains && connectedDomains.dependents.length > 0 && (
                <div className="detail-section">
                  <h4>Used by ({connectedDomains.dependents.length})</h4>
                  <ul className="domain-list">
                    {connectedDomains.dependents.map((dep) => (
                      <li
                        key={dep.id}
                        onClick={() => setSelectedNode(dep.id)}
                        className="clickable-domain"
                      >
                        <span className={`domain-type ${dep.type}`}></span>
                        {dep.name}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          ) : (
            <div className="instructions">
              <h3>🎯 Instructions</h3>
              <ul>
                <li>Click on a domain to see details</li>
                <li>Drag to pan around the graph</li>
                <li>Use mouse wheel to zoom</li>
                <li>Red connections show circular dependencies</li>
              </ul>

              {graphData.circularDependencies.length > 0 && (
                <div className="circular-deps">
                  <h4>⚠️ Circular Dependencies</h4>
                  {graphData.circularDependencies.map((cycle, index) => (
                    <div key={index} className="cycle">
                      {cycle.join(' → ')} → {cycle[0]}
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ServiceProvider>
        <VisualizerApp />
      </ServiceProvider>
    </QueryClientProvider>
  );
}

export default App;