import React, { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { 
  Bold, 
  Italic, 
  List, 
  ListOrdered,
  Heading1,
  Heading2,
  Quote,
  MoreVertical,
  X
} from 'lucide-react';

const NoteEditor = () => {
  const [content, setContent] = useState('');
  const [isToolbarOpen, setIsToolbarOpen] = useState(false);
  const [viewportHeight, setViewportHeight] = useState('100vh');
  
  // Handle viewport resize when keyboard appears
  useEffect(() => {
    const handleResize = () => {
      const visualViewport = window.visualViewport;
      if (visualViewport) {
        setViewportHeight(`${visualViewport.height}px`);
      }
    };
    
    window.visualViewport?.addEventListener('resize', handleResize);
    window.visualViewport?.addEventListener('scroll', handleResize);
    
    return () => {
      window.visualViewport?.removeEventListener('resize', handleResize);
      window.visualViewport?.removeEventListener('scroll', handleResize);
    };
  }, []);

  const execCommand = (command, value = false) => {
    document.execCommand(command, false, value);
  };

  const ToolbarButton = ({ icon: Icon, command, value, label }) => (
    <Button 
      variant="ghost"
      size="lg"
      className="p-4 h-auto flex flex-col items-center gap-1"
      onClick={() => {
        execCommand(command, value);
        // Don't close toolbar for formatting commands
        if (command === 'save') setIsToolbarOpen(false);
      }}
    >
      <Icon className="w-6 h-6" />
      <span className="text-xs">{label}</span>
    </Button>
  );

  return (
    <div 
      className="fixed inset-0 flex flex-col"
      style={{ height: viewportHeight }}
    >
      {/* Main toolbar button */}
      <Button
        variant="outline"
        size="icon"
        className="fixed top-2 right-2 z-20"
        onClick={() => setIsToolbarOpen(!isToolbarOpen)}
      >
        {isToolbarOpen ? <X className="w-4 h-4" /> : <MoreVertical className="w-4 h-4" />}
      </Button>

      {/* Expandable toolbar */}
      {isToolbarOpen && (
        <Card className="absolute top-12 right-2 z-10 p-2 shadow-lg">
          <div className="grid grid-cols-3 gap-2">
            <ToolbarButton 
              icon={Bold} 
              command="bold" 
              label="Bold"
            />
            <ToolbarButton 
              icon={Italic} 
              command="italic" 
              label="Italic"
            />
            <ToolbarButton 
              icon={List} 
              command="insertUnorderedList" 
              label="Bullet List"
            />
            <ToolbarButton 
              icon={ListOrdered} 
              command="insertOrderedList" 
              label="Numbered List"
            />
            <ToolbarButton 
              icon={Heading1} 
              command="formatBlock" 
              value="<h1>" 
              label="Heading 1"
            />
            <ToolbarButton 
              icon={Heading2} 
              command="formatBlock" 
              value="<h2>" 
              label="Heading 2"
            />
            <ToolbarButton 
              icon={Quote} 
              command="formatBlock" 
              value="<blockquote>" 
              label="Quote"
            />
          </div>
        </Card>
      )}

      {/* Editor area */}
      <div className="flex-1 overflow-auto">
        <div
          className="min-h-full p-4 focus:outline-none"
          contentEditable={true}
          onInput={(e) => setContent(e.currentTarget.innerHTML)}
          suppressContentEditableWarning={true}
          style={{
            WebkitUserSelect: 'text',
            WebkitTouchCallout: 'none',
            overflowY: 'auto',
          }}
        />
      </div>
    </div>
  );
};

export default NoteEditor;