'use client';

import { useState } from 'react';
import { Sparkles, RefreshCw, Save, Edit3 } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Textarea } from '@/components/ui/Input';

interface GenerationPanelProps {
  title: string;
  description: string;
  placeholder: string;
  currentData: any;
  onGenerate: (input: string) => Promise<void>;
  onRefine: (feedback: string) => Promise<void>;
  onSave: (data: any) => Promise<void>;
  isLoading: boolean;
  children: React.ReactNode;
}

export function GenerationPanel({
  title,
  description,
  placeholder,
  currentData,
  onGenerate,
  onRefine,
  onSave,
  isLoading,
  children,
}: GenerationPanelProps) {
  const [input, setInput] = useState('');
  const [mode, setMode] = useState<'generate' | 'refine' | 'edit'>('generate');
  const [feedback, setFeedback] = useState('');

  const hasData = currentData !== null && currentData !== undefined;

  const handleGenerate = async () => {
    if (!input.trim()) return;
    await onGenerate(input);
    setInput('');
    setMode('refine');
  };

  const handleRefine = async () => {
    if (!feedback.trim()) return;
    await onRefine(feedback);
    setFeedback('');
  };

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold text-stone-900">{title}</h2>
        <p className="mt-1 text-stone-500 text-sm">{description}</p>
      </div>

      {!hasData && mode === 'generate' && (
        <div className="border border-stone-200 rounded-lg p-6 bg-white">
          <Textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder={placeholder}
            rows={5}
          />
          <div className="mt-4 flex justify-end">
            <Button onClick={handleGenerate} loading={isLoading}>
              <Sparkles className="w-4 h-4" />
              Generar con IA
            </Button>
          </div>
        </div>
      )}

      {hasData && (
        <>
          <div className="bg-white rounded-lg border border-stone-200 overflow-hidden">
            <div className="px-5 py-3 border-b border-stone-100 flex items-center justify-between">
              <span className="text-xs font-medium text-stone-400 uppercase tracking-wide">Resultado</span>
              <div className="flex gap-1.5">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setMode(mode === 'edit' ? 'refine' : 'edit')}
                >
                  <Edit3 className="w-3.5 h-3.5" />
                  {mode === 'edit' ? 'Cerrar' : 'Editar'}
                </Button>
                <Button variant="outline" size="sm" onClick={() => onSave(currentData)} loading={isLoading}>
                  <Save className="w-3.5 h-3.5" />
                  Guardar
                </Button>
              </div>
            </div>
            <div className="p-5">
              {children}
            </div>
          </div>

          {mode === 'refine' && (
            <div className="border border-stone-200 rounded-lg p-5 bg-white">
              <div className="flex items-center gap-2 mb-3">
                <RefreshCw className="w-4 h-4 text-stone-400" />
                <span className="text-sm font-medium text-stone-700">Refinar con feedback</span>
              </div>
              <Textarea
                value={feedback}
                onChange={(e) => setFeedback(e.target.value)}
                placeholder="Describe los cambios que quieres hacer..."
                rows={3}
              />
              <div className="mt-3 flex justify-end gap-2">
                <Button variant="ghost" size="sm" onClick={() => setFeedback('')}>
                  Limpiar
                </Button>
                <Button size="sm" onClick={handleRefine} loading={isLoading}>
                  <RefreshCw className="w-3.5 h-3.5" />
                  Refinar
                </Button>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}
