/**
 * Note Form Component
 * Form để user điền tag và edit note
 */

import { useState } from 'react';
import { createMemo } from '../shared/api-client';

interface NoteFormProps {
  initialText: string;
  initialUrl: string;
  initialTitle: string;
  onSave?: () => void;
  onCancel?: () => void;
}

export function NoteForm({
  initialText,
  initialUrl,
  initialTitle,
  onSave,
  onCancel,
}: NoteFormProps) {
  const [text, setText] = useState(initialText);
  const [tags, setTags] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSave = async () => {
    if (!text.trim()) {
      setError('Note không được để trống');
      return;
    }

    setLoading(true);
    setError(null);

    try {
      // Parse tags (comma-separated)
      const tagList = tags
        .split(',')
        .map((t) => t.trim())
        .filter((t) => t.length > 0);

      // Add source info vào content
      const contentWithSource = `${text}\n\n---\nSource: [${initialTitle}](${initialUrl})`;

      await createMemo({
        content: contentWithSource,
        tags: tagList,
      });

      // Success
      if (onSave) {
        onSave();
      } else {
        // Default: show success message
        alert('✅ Đã lưu vào CuCu Note!');
        window.close();
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Lỗi khi lưu note');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="card">
      <h2 style={{ marginTop: 0, marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}>
        💾 Save to CuCu Note
      </h2>

      <div style={{ marginBottom: '20px' }}>
        <label className="label">Note:</label>
        <textarea
          className="textarea"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Nhập note của bạn..."
        />
      </div>

      <div style={{ marginBottom: '20px' }}>
        <label className="label">Tags (phân cách bằng dấu phẩy):</label>
        <input
          type="text"
          className="input"
          value={tags}
          onChange={(e) => setTags(e.target.value)}
          placeholder="important, article, todo"
        />
        <div className="label-hint">Ví dụ: important, article, todo</div>
      </div>

      <div className="source-info">
        <div style={{ fontWeight: '500', marginBottom: '4px' }}>Source:</div>
        <div style={{ wordBreak: 'break-all', marginBottom: '4px' }}>
          <a href={initialUrl} target="_blank" rel="noopener noreferrer">
            {initialTitle}
          </a>
        </div>
        <div style={{ fontSize: '11px', opacity: 0.7, wordBreak: 'break-all' }}>
          {initialUrl}
        </div>
      </div>

      {error && <div className="error">{error}</div>}

      <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '20px' }}>
        <button
          className="btn btn-secondary"
          onClick={onCancel || (() => window.close())}
          disabled={loading}
        >
          Cancel
        </button>
        <button
          className="btn btn-primary"
          onClick={handleSave}
          disabled={loading}
        >
          {loading ? 'Đang lưu...' : 'Save'}
        </button>
      </div>
    </div>
  );
}

