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;
  initialLine?: string;
  availableLines?: string[];
}

const ExperimentForm: React.FC<ExperimentFormProps> = ({
  onClose,
  onSuccess,
  initialAsins = [],
  initialMarketplace = 'DE',
  initialLine = '',
  availableLines = []
}) => {
  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 [targetType, setTargetType] = useState<'asin' | 'line'>(initialAsins.length > 0 ? 'asin' : initialLine ? 'line' : 'asin');
  const [selectedLine, setSelectedLine] = useState(initialLine);

  const handleAddAsin = () => {
    // Support both comma and space separated ASINs
    const newAsins = asinInput
      .split(/[\s,]+/)  // Split by space or comma
      .map(a => a.trim().toUpperCase())
      .filter(a => a.length > 0 && /^[A-Z0-9]{9,10}$/.test(a));  // Validate ASIN format

    const uniqueAsins = Array.from(new Set([...formData.asins, ...newAsins]));
    setFormData({ ...formData, asins: uniqueAsins });
    setAsinInput('');
  };

  const handleSelectLine = (line: string) => {
    setSelectedLine(line);
    // For line targeting, we don't pre-populate ASINs
    // The backend will handle filtering by line
    setFormData({ ...formData, asins: [`LINE:${line}`] });
  };

  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 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-[100] 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>

          {/* Target Type Selector */}
          <div>
            <label className="block text-xs font-medium text-slate-300 mb-2">
              Target Type <span className="text-red-400">*</span>
            </label>
            <div className="flex gap-2">
              <button
                type="button"
                onClick={() => {
                  setTargetType('asin');
                  setFormData({ ...formData, asins: [] });
                  setSelectedLine('');
                }}
                className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${targetType === 'asin'
                    ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400'
                    : 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500'
                  }`}
              >
                🎯 Specific ASINs
              </button>
              <button
                type="button"
                onClick={() => {
                  setTargetType('line');
                  setFormData({ ...formData, asins: [] });
                  setAsinInput('');
                }}
                className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${targetType === 'line'
                    ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400'
                    : 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500'
                  }`}
              >
                📦 Entire Product Line
              </button>
            </div>
          </div>

          {targetType === 'asin' ? (
            /* ASIN Input */
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1">
                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="Paste ASINs (space or 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 && !formData.asins.some(a => a.startsWith('LINE:')) && (
                <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={() => {
                          setFormData({
                            ...formData,
                            asins: formData.asins.filter(a => a !== 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>
              )}
              <p className="text-[10px] text-slate-500 mt-1">
                💡 Tip: Paste multiple ASINs separated by spaces or commas
              </p>
            </div>
          ) : (
            /* Product Line Input */
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1">
                Product Line <span className="text-red-400">*</span>
              </label>
              <select
                value={selectedLine}
                onChange={(e) => handleSelectLine(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"
              >
                <option value="">Select a product line...</option>
                {availableLines.map((line) => (
                  <option key={line} value={line}>{line}</option>
                ))}
              </select>
              {selectedLine && (
                <p className="text-[10px] text-emerald-400 mt-1">
                  ✓ Will target all ASINs in <strong>{selectedLine}</strong>
                </p>
              )}
            </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;