import React, { useState } from 'react';
import { useModuleList } from '../../core/useModuleList';
import { createNotesAdapter } from '../../adapter';
import { NoteListItem } from '../../components/NoteListItem';
import { NoteDetailView } from '../../components/NoteDetailView';
import { CreateNoteModal } from '../../components/CreateNoteModal';
import { supabase } from '../../supabaseClient';
import { useKeycloakAuth } from '@micahgoodman/auth';

const NoteAdapter = createNotesAdapter(supabase);

/**
 * Main notes page for standalone mode
 */
export function NotesPage() {
  const { user, signOut } = useKeycloakAuth();
  const { items: notes, loading, error, refresh } = useModuleList(NoteAdapter);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [showCreate, setShowCreate] = useState(false);

  const selectedNote = notes.find(n => n.id === selectedId) || null;

  if (loading) {
    return (
      <div style={{ 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center', 
        height: '100vh',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
      }}>
        Loading notes...
      </div>
    );
  }

  if (error) {
    return (
      <div style={{ 
        display: 'flex', 
        flexDirection: 'column',
        alignItems: 'center', 
        justifyContent: 'center', 
        height: '100vh',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
      }}>
        <p style={{ color: '#dc3545', marginBottom: '1rem' }}>Error: {error}</p>
        <button onClick={refresh} style={{
          padding: '0.5rem 1rem',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}>
          Retry
        </button>
      </div>
    );
  }

  return (
    <div style={{ 
      display: 'flex', 
      height: '100vh',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    }}>
      {/* Sidebar */}
      <div style={{ 
        width: '320px', 
        borderRight: '1px solid #e0e0e0', 
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: '#fafafa'
      }}>
        {/* Header */}
        <div style={{ 
          padding: '1rem',
          borderBottom: '1px solid #e0e0e0',
          backgroundColor: 'white'
        }}>
          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '0.75rem'
          }}>
            <h2 style={{ margin: 0, fontSize: '1.25rem' }}>Notes</h2>
            <button
              onClick={signOut}
              style={{
                padding: '0.25rem 0.75rem',
                fontSize: '0.85rem',
                backgroundColor: 'transparent',
                color: '#666',
                border: '1px solid #ddd',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              Sign out
            </button>
          </div>
          <p style={{ 
            margin: 0, 
            fontSize: '0.85rem', 
            color: '#666',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
          }}>
            {user?.email || 'User'}
          </p>
        </div>

        {/* New Note Button */}
        <div style={{ padding: '1rem' }}>
          <button
            onClick={() => setShowCreate(true)}
            style={{
              width: '100%',
              padding: '0.75rem',
              fontSize: '0.95rem',
              fontWeight: '500',
              color: 'white',
              backgroundColor: '#007bff',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            + New Note
          </button>
        </div>

        {/* Notes List */}
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {notes.length === 0 ? (
            <div style={{
              padding: '2rem 1rem',
              textAlign: 'center',
              color: '#999'
            }}>
              No notes yet. Create your first note!
            </div>
          ) : (
            notes.map((note, index) => (
              <NoteListItem
                key={note.id}
                item={note}
                isSelected={selectedId === note.id}
                onSelect={() => setSelectedId(note.id)}
                index={index}
              />
            ))
          )}
        </div>
      </div>

      {/* Detail View */}
      <div style={{ flex: 1, overflowY: 'auto', backgroundColor: 'white' }}>
        {selectedNote ? (
          <NoteDetailView
            note={selectedNote}
            onUpdated={refresh}
            onDeleted={() => {
              setSelectedId(null);
              refresh();
            }}
            onShowToast={(msg) => {
              // Simple toast implementation
              const toast = document.createElement('div');
              toast.textContent = msg;
              toast.style.cssText = `
                position: fixed;
                bottom: 20px;
                right: 20px;
                background: #333;
                color: white;
                padding: 12px 20px;
                border-radius: 4px;
                z-index: 1000;
              `;
              document.body.appendChild(toast);
              setTimeout(() => toast.remove(), 3000);
            }}
          />
        ) : (
          <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100%',
            color: '#999'
          }}>
            Select a note to view details
          </div>
        )}
      </div>

      {/* Create Modal */}
      {showCreate && (
        <CreateNoteModal
          onClose={() => setShowCreate(false)}
          onCreate={() => {
            setShowCreate(false);
            refresh();
          }}
        />
      )}
    </div>
  );
}