CrazeAnalytix/components/ExperimentForm.tsx

import React, { useState, useMemo } from 'react';
import { ExperimentCreateInput, ExperimentType, ExperimentMetric } from '../types';
import { createExperiment } from '../services/experiments';

interface ExperimentFormProps {
  onClose: () => void;
  onSuccess: () => void;
  initialAsins?: string[];
  initialMarketplace?: string;
}

const ExperimentForm: React.FC<ExperimentFormProps> = ({ 
  onClose, 
  onSuccess,
  initialAsins = [],
  initialMarketplace = 'DE'
}) => {
  const [formData, setFormData] = useState<ExperimentCreateInput>({
    name: '',
    description: '',
    type: 'pricing',
    asins: initialAsins,
    marketplace: initialMarketplace,
    start_date: new Date().toISOString().split('T')[0],
    end_date: '',
    hypothesis: '',
    primary_metric: 'units',
    target_lift_percent: 10,
    owner: '',
  });

  const [loading, setLoading] = useState(false);
  const [asinInput, setAsinInput] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.name || !formData.asins.length) {
      alert('Please fill in required fields');
      return;
    }

    setLoading(true);
    try {
      await createExperiment(formData);
      onSuccess();
      onClose();
    } catch (error: any) {
      alert(`Error creating experiment: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  const handleAddAsin = () => {
    const newAsins = asinInput
      .split(',')
      .map(a => a.trim().toUpperCase())
      .filter(a => a.length > 0);
    
    const uniqueAsins = Array.from(new Set([...formData.asins, ...newAsins]));
    setFormData({ ...formData, asins: uniqueAsins });
    setAsinInput('');
  };

  const handleRemoveAsin = (asinToRemove: string) => {
    setFormData({
      ...formData,
      asins: formData.asins.filter(a => a !== asinToRemove),
    });
  };

  const typeOptions: { value: ExperimentType; label: string; icon: string }[] = [
    { value: 'pricing', label: 'Pricing', icon: '💰' },
    { value: 'advertising', label: 'Advertising', icon: '📢' },
    { value: 'content', label: 'Content', icon: '📝' },
    { value: 'promotion', label: 'Promotion', icon: '🏷️' },
  ];

  const metricOptions: { value: ExperimentMetric; label: string }[] = [
    { value: 'units', label: 'Units Sold' },
    { value: 'revenue', label: 'Revenue' },
    { value: 'acos', label: 'ACOS' },
    { value: 'ctr', label: 'CTR' },
    { value: 'cvr', label: 'Conversion Rate' },
    { value: 'bsr', label: 'BSR' },
  ];

  const marketplaceOptions = ['DE', 'UK', 'FR', 'IT', 'ES'];

  return (
    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-3xl max-h-[85vh] overflow-hidden flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-slate-700">
          <h2 className="text-lg font-bold text-white">🧪 New Experiment</h2>
          <button
            onClick={onClose}
            className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-4 space-y-4">
          {/* Name */}
          <div>
            <label className="block text-xs font-medium text-slate-300 mb-1">
              Name <span className="text-red-400">*</span>
            </label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="e.g., Q1 Price Reduction Test"
              required
            />
          </div>

          {/* Type & Marketplace */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1">
                Type <span className="text-red-400">*</span>
              </label>
              <select
                value={formData.type}
                onChange={(e) => setFormData({ ...formData, type: e.target.value as ExperimentType })}
                className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value="pricing">💰 Pricing</option>
                <option value="advertising">📢 Advertising</option>
                <option value="content">📝 Content</option>
                <option value="promotion">🏷️ Promotion</option>
              </select>
            </div>
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1">
                Marketplace <span className="text-red-400">*</span>
              </label>
              <select
                value={formData.marketplace}
                onChange={(e) => setFormData({ ...formData, marketplace: e.target.value })}
                className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                {marketplaceOptions.map((mp) => (
                  <option key={mp} value={mp}>{mp}</option>
                ))}
              </select>
            </div>
          </div>

          {/* ASINs */}
          <div>
            <label className="block text-xs font-medium text-slate-300 mb-1">
              Target ASINs <span className="text-red-400">*</span>
            </label>
            <div className="flex gap-2 mb-2">
              <input
                type="text"
                value={asinInput}
                onChange={(e) => setAsinInput(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddAsin())}
                className="flex-1 bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                placeholder="ASINs (comma-separated)"
              />
              <button
                type="button"
                onClick={handleAddAsin}
                className="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-sm transition-colors"
              >
                Add
              </button>
            </div>
            {formData.asins.length > 0 && (
              <div className="flex flex-wrap gap-1.5 p-2 bg-slate-800/50 border border-slate-700 rounded-lg max-h-20 overflow-y-auto">
                {formData.asins.map((asin) => (
                  <span
                    key={asin}
                    className="inline-flex items-center gap-1 px-2 py-1 bg-slate-700 border border-slate-600 rounded text-xs text-slate-300 font-mono"
                  >
                    {asin}
                    <button
                      type="button"
                      onClick={() => handleRemoveAsin(asin)}
                      className="text-slate-400 hover:text-red-400 transition-colors"
                    >
                      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </button>
                  </span>
                ))}
              </div>
            )}
          </div>

          {/* Timeline */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1">
                Start Date <span className="text-red-400">*</span>
              </label>
              <input
                type="date"
                value={formData.start_date}
                onChange={(e) => setFormData({ ...formData, start_date: e.target.value })}
                className="w-full bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                required
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1">
                End Date
              </label>
              <input
                type="date"
                value={formData.end_date}
                onChange={(e) => setFormData({ ...formData, end_date: e.target.value })}
                className="w-full bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>
          </div>

          {/* Hypothesis */}
          <div>
            <label className="block text-xs font-medium text-slate-300 mb-1">
              Hypothesis
            </label>
            <textarea
              value={formData.hypothesis}
              onChange={(e) => setFormData({ ...formData, hypothesis: e.target.value })}
              className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
              rows={2}
              placeholder="What do you expect to happen?"
            />
          </div>

          {/* Metric & Target */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1">
                Primary Metric
              </label>
              <select
                value={formData.primary_metric}
                onChange={(e) => setFormData({ ...formData, primary_metric: e.target.value as ExperimentMetric })}
                className="w-full bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                {metricOptions.map((opt) => (
                  <option key={opt.value} value={opt.value}>{opt.label}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1">
                Target Lift (%)
              </label>
              <input
                type="number"
                value={formData.target_lift_percent}
                onChange={(e) => setFormData({ ...formData, target_lift_percent: parseFloat(e.target.value) || 0 })}
                className="w-full bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                min="0"
                max="1000"
              />
            </div>
          </div>

          {/* Owner */}
          <div>
            <label className="block text-xs font-medium text-slate-300 mb-1">
              Owner
            </label>
            <input
              type="text"
              value={formData.owner}
              onChange={(e) => setFormData({ ...formData, owner: e.target.value })}
              className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="Your name"
            />
          </div>

          {/* Description */}
          <div>
            <label className="block text-xs font-medium text-slate-300 mb-1">
              Description
            </label>
            <textarea
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              className="w-full bg-slate-800 border border-slate-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
              rows={2}
              placeholder="Additional details..."
            />
          </div>

          {/* Actions */}
          <div className="flex gap-3 pt-4 border-t border-slate-700">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg text-sm font-medium transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-600/50 text-white rounded-lg text-sm font-medium transition-colors"
            >
              {loading ? 'Creating...' : 'Create'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ExperimentForm;