import { Sparkles } from 'lucide-react';
import { shire } from '@/api/shireClient';
import AIField from './AIField';

const SHIRE_CONTEXT = `You are the marketing brain for "Shire 3D" — a small Australian 3D printing business run by a passionate maker in the Shire region. 
Shire 3D sells handcrafted, paintable 3D printed items: fantasy masks, cosplay props, home decor, jewelry, and collectibles.
Tone: creative, warm, slightly whimsical, never corporate. Australian spelling. Prices in AUD.`;

async function regenerateField(field, productName, category) {
  const prompts = {
    tagline: `Write a single short punchy tagline (max 12 words) for a 3D printed product called "${productName}" in the category "${category || '3D prints'}". No quotes. Just the tagline.`,
    etsy_title: `Write an SEO-optimised Etsy listing title (max 140 characters) for a 3D printed "${productName}". Use relevant keywords buyers would search. Include materials/style where relevant. No quotes.`,
    etsy_description: `Write a full Etsy product description for a 3D printed "${productName}" (category: ${category || '3D prints'}). Include: a hook opener, bullet-point features list, dimensions/materials placeholder note, Australian shipping info, care instructions. Approx 300 words. Warm, creative tone.`,
    etsy_tags: `Write exactly 13 Etsy SEO tags for a 3D printed "${productName}" (category: ${category || '3D prints'}). Return as comma-separated values only, no numbering. Each tag max 20 chars. Focus on what buyers search for.`,
    square_description: `Write a punchy Square/POS product description (max 80 words) for a 3D printed "${productName}". Direct, engaging, highlights key appeal. Australian tone.`,
    ebay_title: `Write an eBay listing title (max 80 characters) for a 3D printed "${productName}". Keyword-rich for eBay search. Include condition hint. No quotes.`,
    ebay_description: `Write an eBay product listing description for a 3D printed "${productName}". Include: condition (New), features, what's included, postage note (Australian seller), and a friendly closer. eBay buyer tone.`,
  };

  const result = await shire.integrations.Core.InvokeLLM({
    prompt: `${SHIRE_CONTEXT}\n\n${prompts[field]}`,
  });
  return typeof result === 'string' ? result.trim() : result;
}

export default function Step2Marketing({ data, onChange, productName, category }) {
  const set = (key, val) => onChange({ ...data, [key]: val });

  const regenField = async (field) => {
    const val = await regenerateField(field, productName, category);
    set(field, val);
  };

  const hasContent = data.tagline || data.etsy_title;

  return (
    <div className="space-y-6">
      {/* Header card */}
      <div className="rounded-xl p-4 text-white" style={{ background: 'linear-gradient(135deg, #1a0a2e 0%, #7c3aed 50%, #f97316 100%)' }}>
        <div className="flex items-center gap-2 mb-1">
          <span className="text-xl">🧠</span>
          <h3 className="font-bold text-base">AI Marketing Genius</h3>
        </div>
        <p className="text-xs text-white/80">
          All fields below were generated by AI for <strong>{productName}</strong>. Edit anything — or hit Regenerate to get a fresh version.
        </p>
      </div>

      {!hasContent && (
        <div className="text-center py-8 text-gray-400">
          <Sparkles size={32} className="mx-auto mb-2 text-purple-300" />
          <p className="text-sm">Go back to Step 1 and click "✨ Generate with AI" to fill these fields automatically.</p>
        </div>
      )}

      <AIField
        label="Tagline"
        value={data.tagline}
        onChange={val => set('tagline', val)}
        onRegenerate={() => regenField('tagline')}
        multiline={false}
        hint="A short punchy one-liner shown on your store front"
      />

      <div className="border-t border-gray-100 pt-5">
        <h4 className="text-xs font-bold text-orange-600 uppercase tracking-wider mb-4">🛍 Etsy</h4>
        <div className="space-y-4">
          <AIField
            label="Etsy Title"
            value={data.etsy_title}
            onChange={val => set('etsy_title', val)}
            onRegenerate={() => regenField('etsy_title')}
            multiline={false}
            maxLength={140}
          />
          <AIField
            label="Etsy Description"
            value={data.etsy_description}
            onChange={val => set('etsy_description', val)}
            onRegenerate={() => regenField('etsy_description')}
          />
          <AIField
            label="Etsy Tags (comma-separated, 13 tags)"
            value={data.etsy_tags}
            onChange={val => set('etsy_tags', val)}
            onRegenerate={() => regenField('etsy_tags')}
            multiline={false}
            hint="Etsy allows up to 13 tags, max 20 chars each"
          />
        </div>
      </div>

      <div className="border-t border-gray-100 pt-5">
        <h4 className="text-xs font-bold text-green-700 uppercase tracking-wider mb-4">🟩 Square</h4>
        <AIField
          label="Square Description"
          value={data.square_description}
          onChange={val => set('square_description', val)}
          onRegenerate={() => regenField('square_description')}
          hint="~80 words, punchy and direct"
        />
      </div>

      <div className="border-t border-gray-100 pt-5">
        <h4 className="text-xs font-bold text-blue-700 uppercase tracking-wider mb-4">🔵 eBay</h4>
        <div className="space-y-4">
          <AIField
            label="eBay Title"
            value={data.ebay_title}
            onChange={val => set('ebay_title', val)}
            onRegenerate={() => regenField('ebay_title')}
            multiline={false}
            maxLength={80}
          />
          <AIField
            label="eBay Description"
            value={data.ebay_description}
            onChange={val => set('ebay_description', val)}
            onRegenerate={() => regenField('ebay_description')}
          />
        </div>
      </div>
    </div>
  );
}