import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { X, Plus } from 'lucide-react';

export default function ProductInfoForm({ material, onSave, onCancel }) {
  const [formData, setFormData] = useState({
    sku: material.sku || '',
    product_name: material.product_name || material.name || '',
    product_category: material.product_category || '',
    tmall_product_id: material.tmall_product_id || '',
    matched_tmall_keywords: material.matched_tmall_keywords || [],
    matched_xiaohongshu_topics: material.matched_xiaohongshu_topics || []
  });

  const [newKeyword, setNewKeyword] = useState('');
  const [newTopic, setNewTopic] = useState('');

  const handleInputChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const addKeyword = () => {
    if (newKeyword.trim()) {
      setFormData(prev => ({
        ...prev,
        matched_tmall_keywords: [...prev.matched_tmall_keywords, newKeyword.trim()]
      }));
      setNewKeyword('');
    }
  };

  const removeKeyword = (index) => {
    setFormData(prev => ({
      ...prev,
      matched_tmall_keywords: prev.matched_tmall_keywords.filter((_, i) => i !== index)
    }));
  };

  const addTopic = () => {
    if (newTopic.trim()) {
      setFormData(prev => ({
        ...prev,
        matched_xiaohongshu_topics: [...prev.matched_xiaohongshu_topics, newTopic.trim()]
      }));
      setNewTopic('');
    }
  };

  const removeTopic = (index) => {
    setFormData(prev => ({
      ...prev,
      matched_xiaohongshu_topics: prev.matched_xiaohongshu_topics.filter((_, i) => i !== index)
    }));
  };

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

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <Label htmlFor="sku">商品SKU</Label>
          <Input
            id="sku"
            value={formData.sku}
            onChange={(e) => handleInputChange('sku', e.target.value)}
            placeholder="输入商品SKU..."
          />
        </div>
        
        <div>
          <Label htmlFor="product_name">商品名称</Label>
          <Input
            id="product_name"
            value={formData.product_name}
            onChange={(e) => handleInputChange('product_name', e.target.value)}
            placeholder="输入商品名称..."
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <Label htmlFor="product_category">商品分类</Label>
          <Input
            id="product_category"
            value={formData.product_category}
            onChange={(e) => handleInputChange('product_category', e.target.value)}
            placeholder="如：服装、鞋包、美妆..."
          />
        </div>
        
        <div>
          <Label htmlFor="tmall_product_id">天猫商品ID</Label>
          <Input
            id="tmall_product_id"
            value={formData.tmall_product_id}
            onChange={(e) => handleInputChange('tmall_product_id', e.target.value)}
            placeholder="输入天猫商品ID..."
          />
        </div>
      </div>

      {/* 天猫热词 */}
      <div>
        <Label>匹配天猫热词</Label>
        <div className="flex flex-wrap gap-2 mb-2">
          {formData.matched_tmall_keywords.map((keyword, index) => (
            <Badge key={index} variant="outline" className="text-orange-600 border-orange-200">
              {keyword}
              <button
                type="button"
                onClick={() => removeKeyword(index)}
                className="ml-1 hover:text-red-500"
              >
                <X className="w-3 h-3" />
              </button>
            </Badge>
          ))}
        </div>
        <div className="flex gap-2">
          <Input
            value={newKeyword}
            onChange={(e) => setNewKeyword(e.target.value)}
            placeholder="添加天猫热词..."
            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addKeyword(); } }}
          />
          <Button type="button" onClick={addKeyword} size="sm">
            <Plus className="w-4 h-4" />
          </Button>
        </div>
      </div>

      {/* 小红书热点 */}
      <div>
        <Label>匹配小红书热点</Label>
        <div className="flex flex-wrap gap-2 mb-2">
          {formData.matched_xiaohongshu_topics.map((topic, index) => (
            <Badge key={index} variant="outline" className="text-red-600 border-red-200">
              {topic}
              <button
                type="button"
                onClick={() => removeTopic(index)}
                className="ml-1 hover:text-red-500"
              >
                <X className="w-3 h-3" />
              </button>
            </Badge>
          ))}
        </div>
        <div className="flex gap-2">
          <Input
            value={newTopic}
            onChange={(e) => setNewTopic(e.target.value)}
            placeholder="添加小红书热点..."
            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTopic(); } }}
          />
          <Button type="button" onClick={addTopic} size="sm">
            <Plus className="w-4 h-4" />
          </Button>
        </div>
      </div>

      <div className="flex justify-end gap-3">
        <Button type="button" variant="outline" onClick={onCancel}>
          取消
        </Button>
        <Button type="submit">
          保存
        </Button>
      </div>
    </form>
  );
}