import React from 'react';
import { DYNASTY_OPTIONS, CUSTOMIZATION_OPTIONS } from '../constants';
import { Dynasty } from '../types';
import { Check } from 'lucide-react';

interface OptionsPanelProps {
  selectedDynasty: Dynasty;
  onSelectDynasty: (d: Dynasty) => void;
  selectedCustomizations: string[];
  onToggleCustomization: (id: string) => void;
  isGenerating: boolean;
  onGenerate: () => void;
  hasImage: boolean;
}

export const OptionsPanel: React.FC<OptionsPanelProps> = ({
  selectedDynasty,
  onSelectDynasty,
  selectedCustomizations,
  onToggleCustomization,
  isGenerating,
  onGenerate,
  hasImage
}) => {
  return (
    <div className="space-y-8">
      {/* Dynasty Selection */}
      <section>
        <h3 className="text-lg font-bold text-stone-800 mb-4 flex items-center gap-2">
          <span className="w-1 h-6 bg-red-800 rounded-full"></span>
          选择朝代 (Select Dynasty)
        </h3>
        <div className="grid grid-cols-1 gap-3">
          {DYNASTY_OPTIONS.map((option) => (
            <button
              key={option.id}
              onClick={() => onSelectDynasty(option.id)}
              disabled={isGenerating}
              className={`
                relative p-4 rounded-xl text-left border-2 transition-all duration-200
                ${selectedDynasty === option.id 
                  ? 'border-red-800 bg-red-50' 
                  : 'border-stone-200 hover:border-red-200 bg-white'}
              `}
            >
              <div className="flex items-start justify-between">
                <div>
                  <div className={`font-bold ${selectedDynasty === option.id ? 'text-red-900' : 'text-stone-700'}`}>
                    {option.name}
                  </div>
                  <div className="text-sm text-stone-500 mt-1">
                    {option.description}
                  </div>
                </div>
                {selectedDynasty === option.id && (
                  <div className="bg-red-800 text-white p-1 rounded-full">
                    <Check size={14} />
                  </div>
                )}
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* Customization Selection */}
      <section>
        <h3 className="text-lg font-bold text-stone-800 mb-4 flex items-center gap-2">
          <span className="w-1 h-6 bg-red-800 rounded-full"></span>
          妆容与配饰 (Customization)
        </h3>
        <div className="grid grid-cols-2 gap-3">
          {CUSTOMIZATION_OPTIONS.map((option) => {
             const isSelected = selectedCustomizations.includes(option.id);
             return (
              <button
                key={option.id}
                onClick={() => onToggleCustomization(option.id)}
                disabled={isGenerating}
                className={`
                  p-3 rounded-lg text-sm font-medium border transition-all duration-200
                  ${isSelected
                    ? 'bg-stone-800 text-white border-stone-800' 
                    : 'bg-white text-stone-600 border-stone-200 hover:border-stone-400'}
                `}
              >
                {option.label}
              </button>
             );
          })}
        </div>
      </section>

      {/* Action Button */}
      <button
        onClick={onGenerate}
        disabled={!hasImage || isGenerating}
        className={`
          w-full py-4 rounded-xl font-bold text-lg shadow-lg transform transition-all
          ${!hasImage || isGenerating 
            ? 'bg-stone-300 text-stone-500 cursor-not-allowed' 
            : 'bg-red-800 text-white hover:bg-red-900 hover:-translate-y-1 hover:shadow-xl'}
        `}
      >
        {isGenerating ? '制作中... (Generating)' : '一键换装 (Try On Hanfu)'}
      </button>
      
      {!hasImage && (
        <p className="text-center text-sm text-red-500 mt-2">
          请先上传照片 (Please upload a photo first)
        </p>
      )}
    </div>
  );
};
