stack/apps/web/src/components/widgets/QuickCaptureWidget.tsx

/**
 * Quick Capture Widget - idea/brain dump input
 *
 * In production, shows a Coming Soon placeholder since the feature
 * is not yet complete. Full functionality available in development mode.
 */

import { useState } from "react";
import { Send, Lightbulb } from "lucide-react";
import type { WidgetProps } from "@mosaic/shared";

/**
 * Check if we're in development mode (runtime check for testability)
 */
function isDevelopment(): boolean {
  return process.env.NODE_ENV === "development";
}

/**
 * Compact Coming Soon placeholder for widget contexts
 */
function WidgetComingSoon(): React.JSX.Element {
  return (
    <div className="flex flex-col h-full items-center justify-center p-4 text-center">
      {/* Lightbulb Icon */}
      <Lightbulb className="w-8 h-8 text-gray-300 mb-3" aria-hidden="true" />

      {/* Coming Soon Badge */}
      <span className="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full mb-2">
        Coming Soon
      </span>

      {/* Feature Name */}
      <h3 className="text-sm font-medium text-gray-700 mb-1">Quick Capture</h3>

      {/* Description */}
      <p className="text-xs text-gray-500">Quickly jot down ideas for later organization.</p>
    </div>
  );
}

/**
 * Internal Quick Capture Widget implementation
 */
function QuickCaptureWidgetInternal({ id: _id, config: _config }: WidgetProps): React.JSX.Element {
  const [input, setInput] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [recentCaptures, setRecentCaptures] = useState<string[]>([]);

  const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>): void => {
    e.preventDefault();
    if (!input.trim() || isSubmitting) return;

    setIsSubmitting(true);
    const idea = input.trim();

    try {
      // TODO: Replace with actual API call
      // await api.ideas.create({ content: idea });

      // Add to recent captures for visual feedback
      setRecentCaptures((prev) => [idea, ...prev].slice(0, 3));
      setInput("");
    } catch (_error) {
      console.error("Failed to capture idea:", _error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="flex flex-col h-full space-y-3">
      {/* Header */}
      <div className="flex items-center gap-2 text-gray-700">
        <Lightbulb className="w-4 h-4 text-yellow-500" />
        <span className="text-sm font-medium">Quick Capture</span>
      </div>

      {/* Input form */}
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
          }}
          placeholder="Capture an idea..."
          className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          disabled={isSubmitting}
        />
        <button
          type="submit"
          disabled={!input.trim() || isSubmitting}
          className="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
          aria-label={isSubmitting ? "Submitting..." : "Submit capture"}
        >
          {isSubmitting ? (
            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
          ) : (
            <Send className="w-4 h-4" />
          )}
        </button>
      </form>

      {/* Recent captures */}
      {recentCaptures.length > 0 && (
        <div className="flex-1 overflow-auto">
          <div className="text-xs text-gray-500 mb-2">Recently captured:</div>
          <div className="space-y-2">
            {recentCaptures.map((capture, index) => (
              <div key={index} className="p-2 bg-gray-50 rounded text-sm text-gray-700">
                {capture}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Tips */}
      {recentCaptures.length === 0 && (
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center text-gray-400 text-xs space-y-1">
            <div>Capture ideas quickly</div>
            <div>They'll be organized later</div>
          </div>
        </div>
      )}
    </div>
  );
}

/**
 * Quick Capture Widget
 *
 * In production: Shows Coming Soon placeholder
 * In development: Full widget functionality
 */
export function QuickCaptureWidget(props: WidgetProps): React.JSX.Element {
  // In production, show Coming Soon placeholder
  if (!isDevelopment()) {
    return <WidgetComingSoon />;
  }

  // In development, show full widget functionality
  return <QuickCaptureWidgetInternal {...props} />;
}