import { useState } from 'react';
import { Sparkles, Loader2 } from 'lucide-react';
import ImageUploader from './ImageUploader';

const CATEGORIES = [
  'Masks & Cosplay',
  'Home Decor',
  'Jewelry & Accessories',
  'Figurines & Collectibles',
  'Functional Prints',
  'Custom Orders',
  'Other',
];

export default function Step1Basics({ data, onChange, onAIGenerate }) {
  const [generating, setGenerating] = useState(false);

  const set = (key, val) => onChange({ ...data, [key]: val });

  const handleGenerate = async () => {
    if (!data.title) return;
    setGenerating(true);
    await onAIGenerate(data.title, data.category, data.price);
    setGenerating(false);
  };

  return (
    <div className="space-y-5">
      <div>
        <label className="block text-xs font-semibold text-gray-700 mb-1">Product Name <span className="text-red-400">*</span></label>
        <input
          type="text"
          value={data.title || ''}
          onChange={e => set('title', e.target.value)}
          placeholder="e.g. Dragon Egg Twist Lock Screw Jewelry Bead"
          className="w-full px-3 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400"
        />
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label className="block text-xs font-semibold text-gray-700 mb-1">Category</label>
          <select
            value={data.category || ''}
            onChange={e => set('category', e.target.value)}
            className="w-full px-3 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400"
          >
            <option value="">Select category…</option>
            {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
        <div>
          <label className="block text-xs font-semibold text-gray-700 mb-1">Starting Price (AUD)</label>
          <div className="relative">
            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">$</span>
            <input
              type="number"
              min="0"
              step="0.01"
              value={data.price || ''}
              onChange={e => set('price', e.target.value ? Number(e.target.value) : '')}
              placeholder="0.00"
              className="w-full pl-7 pr-3 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-400"
            />
          </div>
        </div>
      </div>

      <ImageUploader
        images={data.images || []}
        onChange={imgs => {
          const primary = imgs[0] || '';
          onChange({ ...data, images: imgs, image_url: primary });
        }}
      />

      <div className="pt-2">
        <button
          onClick={handleGenerate}
          disabled={generating || !data.title}
          className="w-full py-3 rounded-xl text-white font-bold text-sm flex items-center justify-center gap-2 transition-all disabled:opacity-50"
          style={{ background: generating ? '#7c3aed' : 'linear-gradient(135deg, #7c3aed, #f97316)' }}
        >
          {generating ? (
            <><Loader2 size={16} className="animate-spin" /> Generating AI marketing copy…</>
          ) : (
            <><Sparkles size={16} /> ✨ Generate with AI</>
          )}
        </button>
        {!data.title && (
          <p className="text-xs text-center text-gray-400 mt-2">Enter a product name first to unlock AI generation</p>
        )}
      </div>
    </div>
  );
}
