import React from 'react';
import { Sparkles, ArrowRight } from 'lucide-react';
import { ExpressTemplate, CompanyProfile } from '../../types';
import { DropSlot } from './DropSlot';

interface GenerateZoneProps {
  selectedTemplate: ExpressTemplate | null;
  selectedBrand: CompanyProfile | null;
  onClearTemplate: () => void;
  onClearBrand: () => void;
  onClickTemplateSlot: () => void;
  onClickBrandSlot: () => void;
  onGenerate: () => void;
}

/**
 * GenerateZone — Bottom full-width area with two drop slots (Template × Brand) and a Generate button.
 */
export const GenerateZone: React.FC<GenerateZoneProps> = ({
  selectedTemplate,
  selectedBrand,
  onClearTemplate,
  onClearBrand,
  onClickTemplateSlot,
  onClickBrandSlot,
  onGenerate,
}) => {
  const canGenerate = !!selectedTemplate && !!selectedBrand;

  return (
    <div className="bg-neutral-900/50 border border-neutral-800/50 rounded-2xl p-6 flex items-center justify-between gap-8">
      {/* Left: Info */}
      <div className="flex flex-col gap-1.5 shrink-0 min-w-[220px]">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-600/20 to-fuchsia-600/20 flex items-center justify-center border border-violet-500/20 shadow-inner">
            <Sparkles size={18} className="text-violet-400" />
          </div>
          <div>
            <h2 className="text-base font-bold text-white">Generar contenido</h2>
            <p className="text-xs text-neutral-500 mt-0.5">
              Arrastra una plantilla y una marca
            </p>
          </div>
        </div>
      </div>

      {/* Middle: Slots row */}
      <div className="flex items-center justify-center gap-6 flex-1 max-w-[800px]">
        {/* Template slot */}
        <div className="flex-1 max-w-[320px]">
          <DropSlot
            type="template"
            item={selectedTemplate}
            onClear={onClearTemplate}
            onClick={onClickTemplateSlot}
          />
        </div>

        {/* × separator */}
        <div className="shrink-0 flex items-center justify-center">
          <span className="text-2xl font-bold text-neutral-700 select-none">×</span>
        </div>

        {/* Brand slot */}
        <div className="flex-1 max-w-[320px]">
          <DropSlot
            type="brand"
            item={selectedBrand}
            onClear={onClearBrand}
            onClick={onClickBrandSlot}
          />
        </div>
      </div>

      {/* Right: Generate button */}
      <div className="shrink-0">
        <button
          onClick={onGenerate}
          disabled={!canGenerate}
          title={canGenerate ? 'Generar contenido con esta plantilla y marca' : 'Selecciona una plantilla y una marca primero'}
          className={`
            flex items-center justify-center gap-3 px-8 py-5 rounded-xl font-bold text-base transition-all duration-300 min-w-[200px]
            ${canGenerate
              ? 'bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white shadow-xl shadow-violet-900/40 hover:shadow-violet-900/60 hover:scale-[1.03] active:scale-[0.98]'
              : 'bg-neutral-800/50 text-neutral-600 cursor-not-allowed border border-neutral-800/80'
            }
          `}
        >
          Generar
          <ArrowRight size={18} />
        </button>
      </div>
    </div>
  );
};