/**
 * Popup Component - Hiện khi click icon extension
 */

import { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { NoteForm } from '../components/NoteForm';

interface PendingNote {
  text: string;
  url: string;
  title: string;
}

function Popup() {
  const [pendingNote, setPendingNote] = useState<PendingNote | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Lấy pending note từ storage (nếu có)
    chrome.storage.local.get(['pendingNote'], async (result) => {
      if (result.pendingNote) {
        const note = result.pendingNote;
        setPendingNote(note);
        
        // Auto save ngay khi popup mở (nếu là từ Space key)
        try {
          const { createMemo } = await import('../shared/api-client');
          
          // Parse tags từ URL hoặc domain
          const domain = new URL(note.url).hostname.replace('www.', '');
          const tagList = [domain, 'web-highlight'];
          
          // Add source info vào content
          const contentWithSource = `${note.text}\n\n---\nSource: [${note.title}](${note.url})`;
          
          await createMemo({
            content: contentWithSource,
            tags: tagList,
          });
          
          // Success - close popup
          chrome.storage.local.remove(['pendingNote']);
          window.close();
        } catch (error) {
          console.error('Error auto-saving:', error);
          // Nếu lỗi, hiện form để user save thủ công
          setLoading(false);
        }
      } else {
        setLoading(false);
      }
    });
  }, []);

  if (loading) {
    return (
      <div style={{ padding: '20px', textAlign: 'center' }}>
        <div>Loading...</div>
      </div>
    );
  }

  if (pendingNote) {
    // Hiện form với data từ content script
    return (
      <NoteForm
        initialText={pendingNote.text}
        initialUrl={pendingNote.url}
        initialTitle={pendingNote.title}
        onSave={() => {
          // Success - có thể show message hoặc close
          window.close();
        }}
        onCancel={() => {
          window.close();
        }}
      />
    );
  }

  // Default: Quick note form (không có text từ selection)
  return (
    <div className="card">
      <h2 style={{ marginTop: 0, marginBottom: '12px', fontSize: '20px', fontWeight: '600' }}>
        📝 CuCu Note
      </h2>
      <p style={{ color: 'var(--muted-foreground)', fontSize: '14px', marginBottom: '20px' }}>
        Bôi đen text trên web → nhấn Space → tự động lưu note!
      </p>
      <NoteForm
        initialText=""
        initialUrl={typeof window !== 'undefined' ? window.location.href : ''}
        initialTitle={typeof document !== 'undefined' ? document.title : 'CuCu Note'}
        onSave={() => window.close()}
        onCancel={() => window.close()}
      />
    </div>
  );
}

// Render
const container = document.getElementById('popup-root');
if (container) {
  const root = createRoot(container);
  root.render(<Popup />);
}

