/**
 * Quick Capture Widget - idea/brain dump input
 */

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

export function QuickCaptureWidget({ id: _id, config: _config }: WidgetProps) {
  const [input, setInput] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [recentCaptures, setRecentCaptures] = useState<string[]>([]);

  const handleSubmit = async (e: React.FormEvent) => {
    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"
        >
          {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>
  );
}