import React, { useState } from 'react';
import { Search, Sparkles, Loader2, Target, Type, AlignLeft, Zap } from 'lucide-react';
import { motion } from 'framer-motion';

const ResearchForm = ({ onSearch, isLoading }) => {
    const [formData, setFormData] = useState({
        niche: '',
        target_audience: '',
        prompt: '',
        product_description: ''
    });

    const handleChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        onSearch(formData);
    };

    return (
        <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            className="glass"
            style={{ padding: '2rem' }}
        >
            <div className="flex items-center gap-4 mb-10">
                <div className="icon-badge">
                    <Sparkles size={20} />
                </div>
                <div>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: '700' }}>Research Form</h2>
                    <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>Configure generation parameters</p>
                </div>
            </div>

            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label className="flex items-center gap-2">
                        <Target size={14} /> Niche / Category
                    </label>
                    <input
                        name="niche"
                        placeholder="e.g. Minimalist Rings"
                        value={formData.niche}
                        onChange={handleChange}
                        required
                    />
                </div>

                <div className="form-group">
                    <label className="flex items-center gap-2">
                        <Search size={14} /> Target Audience
                    </label>
                    <input
                        name="target_audience"
                        placeholder="e.g. Corporate Professionals"
                        value={formData.target_audience}
                        onChange={handleChange}
                        required
                    />
                </div>

                <div className="form-group">
                    <label className="flex items-center gap-2">
                        <Type size={14} /> User Prompt
                    </label>
                    <textarea
                        name="prompt"
                        placeholder="What emotion should we trigger?"
                        rows={3}
                        value={formData.prompt}
                        onChange={handleChange}
                        required
                    />
                </div>

                <div className="form-group">
                    <label className="flex items-center gap-2">
                        <AlignLeft size={14} /> Product Context
                    </label>
                    <textarea
                        name="product_description"
                        placeholder="Materials, design philosophy, price point..."
                        rows={4}
                        value={formData.product_description}
                        onChange={handleChange}
                        required
                    />
                </div>

                <button
                    type="submit"
                    className="premium-button"
                    disabled={isLoading}
                    style={{ marginTop: '1rem' }}
                >
                    {isLoading ? (
                        <>
                            <Loader2 className="animate-spin" size={20} />
                            Analyzing...
                        </>
                    ) : (
                        <>
                            <Zap size={20} />
                            Generate Strategy
                        </>
                    )}
                </button>
            </form>
        </motion.div>
    );
};

export default ResearchForm;