import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ClipboardList, Download, Trash2, Layers, Home, ChevronRight } from 'lucide-react';
import { AtomizerCanvas } from '../components/canvas/AtomizerCanvas';
import { TemplateSelector } from '../components/canvas/panels/TemplateSelector';
import { ConfigImporter } from '../components/canvas/panels/ConfigImporter';
import { useCanvasStore } from '../hooks/useCanvasStore';
import { useStudy } from '../context/StudyContext';
import { CanvasTemplate } from '../lib/canvas/templates';

export function CanvasView() {
  const [showTemplates, setShowTemplates] = useState(false);
  const [showImporter, setShowImporter] = useState(false);
  const [notification, setNotification] = useState<string | null>(null);
  const navigate = useNavigate();

  const { nodes, edges, clear } = useCanvasStore();
  const { selectedStudy } = useStudy();

  const handleTemplateSelect = (template: CanvasTemplate) => {
    showNotification(`Loaded template: ${template.name}`);
  };

  const handleImport = (source: string) => {
    showNotification(`Imported from ${source}`);
  };

  const handleClear = () => {
    if (nodes.length === 0 || window.confirm('Clear all nodes from the canvas?')) {
      clear();
      showNotification('Canvas cleared');
    }
  };

  const showNotification = (message: string) => {
    setNotification(message);
    setTimeout(() => setNotification(null), 3000);
  };

  return (
    <div className="h-screen flex flex-col bg-dark-900">
      {/* Minimal Header */}
      <header className="flex-shrink-0 h-12 bg-dark-850 border-b border-dark-700 px-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          {/* Home button */}
          <button
            onClick={() => navigate('/')}
            className="p-1.5 rounded-lg text-dark-400 hover:text-white hover:bg-dark-700 transition-colors"
            title="Back to Home"
          >
            <Home size={18} />
          </button>

          {/* Breadcrumb */}
          <div className="flex items-center gap-2">
            <Layers size={18} className="text-primary-400" />
            <span className="text-sm font-medium text-white">Canvas Builder</span>
            {selectedStudy && (
              <>
                <ChevronRight size={14} className="text-dark-500" />
                <span className="text-sm text-primary-400 font-medium">
                  {selectedStudy.name || selectedStudy.id}
                </span>
              </>
            )}
          </div>

          {/* Stats */}
          <span className="text-xs text-dark-500 tabular-nums ml-2">
            {nodes.length} node{nodes.length !== 1 ? 's' : ''} • {edges.length} edge{edges.length !== 1 ? 's' : ''}
          </span>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-2">
          <button
            onClick={() => setShowTemplates(true)}
            className="px-3 py-1.5 bg-primary-600 hover:bg-primary-500 text-white text-sm rounded-lg transition-colors flex items-center gap-1.5"
          >
            <ClipboardList size={14} />
            Templates
          </button>
          <button
            onClick={() => setShowImporter(true)}
            className="px-3 py-1.5 bg-dark-700 text-dark-200 hover:bg-dark-600 hover:text-white text-sm rounded-lg transition-colors flex items-center gap-1.5 border border-dark-600"
          >
            <Download size={14} />
            Import
          </button>
          <button
            onClick={handleClear}
            className="px-3 py-1.5 bg-dark-700 text-dark-200 hover:bg-red-900/50 hover:text-red-400 text-sm rounded-lg transition-colors flex items-center gap-1.5 border border-dark-600"
          >
            <Trash2 size={14} />
            Clear
          </button>
        </div>
      </header>

      {/* Main Canvas */}
      <main className="flex-1 overflow-hidden">
        <AtomizerCanvas />
      </main>

      {/* Template Selector Modal */}
      <TemplateSelector
        isOpen={showTemplates}
        onClose={() => setShowTemplates(false)}
        onSelect={handleTemplateSelect}
      />

      {/* Config Importer Modal */}
      <ConfigImporter
        isOpen={showImporter}
        onClose={() => setShowImporter(false)}
        onImport={handleImport}
      />

      {/* Notification Toast */}
      {notification && (
        <div
          className="fixed bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-dark-800 text-white rounded-lg shadow-lg z-50 border border-dark-600"
          style={{ animation: 'slideUp 0.3s ease-out' }}
        >
          {notification}
        </div>
      )}

      <style>{`
        @keyframes slideUp {
          from { opacity: 0; transform: translate(-50%, 20px); }
          to { opacity: 1; transform: translate(-50%, 0); }
        }
      `}</style>
    </div>
  );
}

export default CanvasView;