import { useState, useRef } from 'react';
import { ChevronDown, Plus, Sparkles, Wand2 } from 'lucide-react';
import type { ModelNodeDefinition } from '../../types';
import { enhancePrompt } from '../../lib/enhancePrompt';
import { ModelPicker } from './ModelPicker';
import { ParamPills } from './ParamPills';

interface CreateComposerProps {
  modelDef: ModelNodeDefinition | null;
  prompt: string;
  params: Record<string, unknown>;
  activeCount: number;
  maxConcurrent: number;
  quantity: number;
  onPromptChange: (value: string) => void;
  onSelectModel: (definitionId: string) => void;
  onParamsChange: (next: Record<string, unknown>) => void;
  onGenerate: () => void;
  onAttach: (files: FileList) => void;
  onQuantityChange: (n: number) => void;
  onOpenStyles: () => void;
}

export function CreateComposer({
  modelDef, prompt, params, activeCount, maxConcurrent, quantity,
  onPromptChange, onSelectModel, onParamsChange, onGenerate, onAttach, onQuantityChange, onOpenStyles,
}: CreateComposerProps) {
  const [pickerOpen, setPickerOpen] = useState(false);
  const [enhancing, setEnhancing] = useState(false);
  const [prevPrompt, setPrevPrompt] = useState<string | null>(null);
  const [enhanceError, setEnhanceError] = useState<string | null>(null);
  const canGenerate = Boolean(modelDef) && activeCount < maxConcurrent;
  const canEnhance = prompt.trim().length > 0 && !enhancing;
  const promptRef = useRef<HTMLTextAreaElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleEnhance = async () => {
    if (!canEnhance) return;
    setEnhancing(true);
    setEnhanceError(null);
    const original = prompt;
    try {
      const enhanced = await enhancePrompt(original);
      setPrevPrompt(original);
      onPromptChange(enhanced);
    } catch (err) {
      setEnhanceError(err instanceof Error ? err.message : 'Enhance failed.');
    } finally {
      setEnhancing(false);
    }
  };

  const handleUndoEnhance = () => {
    if (prevPrompt === null) return;
    onPromptChange(prevPrompt);
    setPrevPrompt(null);
  };
  const autoGrow = (el: HTMLTextAreaElement) => {
    el.style.height = 'auto';
    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
  };

  return (
    <div className="create-composer">
      {pickerOpen && (
        <>
          <div className="create-composer__picker-backdrop" onClick={() => setPickerOpen(false)} />
          <ModelPicker value={modelDef?.id ?? null} onSelect={onSelectModel} onClose={() => setPickerOpen(false)} />
        </>
      )}
      <textarea
        ref={promptRef}
        className="create-composer__prompt"
        placeholder="Describe what you want to create…"
        value={prompt}
        rows={1}
        onChange={(e) => {
          onPromptChange(e.target.value);
          autoGrow(e.target);
          if (prevPrompt !== null) setPrevPrompt(null);
          if (enhanceError) setEnhanceError(null);
        }}
        onKeyDown={(e) => {
          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && canGenerate) {
            e.preventDefault();
            onGenerate();
          }
        }}
      />
      <div className="create-composer__controls">
        <button type="button" className="create-composer__attach" onClick={() => fileInputRef.current?.click()} title="Attach reference image" aria-label="Attach reference image">
          <Plus size={16} strokeWidth={1.9} aria-hidden="true" />
        </button>
        <input ref={fileInputRef} type="file" accept="image/*" multiple hidden
          onChange={(e) => { if (e.target.files?.length) onAttach(e.target.files); e.target.value = ''; }} />
        <button
          type="button"
          className="create-composer__model"
          onClick={() => setPickerOpen((v) => !v)}
        >
          {modelDef?.displayName ?? 'Select model'}
          <ChevronDown size={15} strokeWidth={1.75} aria-hidden="true" />
        </button>
        <button type="button" className="create-composer__styles" onClick={onOpenStyles} title="Browse styles">
          Styles
        </button>
        <button
          type="button"
          className="create-composer__enhance"
          onClick={handleEnhance}
          disabled={!canEnhance}
          title="Enhance prompt with AI"
        >
          <Wand2 size={15} strokeWidth={1.8} aria-hidden="true" />
          {enhancing ? 'Enhancing…' : 'Enhance'}
        </button>
        {prevPrompt !== null && !enhanceError && (
          <button type="button" className="create-composer__enhance-undo" onClick={handleUndoEnhance} title="Restore the original prompt">
            Undo
          </button>
        )}
        {enhanceError && (
          <span className="create-composer__enhance-error" role="alert">{enhanceError}</span>
        )}
        {modelDef && <ParamPills def={modelDef} params={params} onChange={onParamsChange} />}
        <div className="create-composer__qty" role="group" aria-label="Number of variations">
          <button type="button" onClick={() => onQuantityChange(Math.max(1, quantity - 1))} aria-label="Fewer" disabled={quantity <= 1}>−</button>
          <span>{quantity}</span>
          <button type="button" onClick={() => onQuantityChange(Math.min(4, quantity + 1))} aria-label="More" disabled={quantity >= 4}>+</button>
        </div>
        <button
          type="button"
          className="create-composer__generate"
          disabled={!canGenerate}
          onClick={onGenerate}
        >
          <Sparkles size={16} strokeWidth={1.9} aria-hidden="true" />
          {activeCount > 0 ? `Generating… (${activeCount})` : 'Generate'}
        </button>
      </div>
    </div>
  );
}
