import { useState } from 'react';
import { Wand2, CheckCircle, Loader2 } from 'lucide-react';
import { Book, useBookStore } from '../../stores/bookStore';
import { booksApi } from '../../services/api';

interface BookOutlineGeneratorProps {
  book: Book;
  onComplete: (outline: any) => void;
}

export default function BookOutlineGenerator({ book, onComplete }: BookOutlineGeneratorProps) {
  const { activeBook } = useBookStore();
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string>('');

  const outline = activeBook?.outline;

  const handleGenerate = async () => {
    setIsGenerating(true);
    setError('');

    try {
      const response = await booksApi.generateOutline(book.genre, book.idea, book.title);
      const generatedOutline = response.data.outline;
      onComplete(generatedOutline);
    } catch (err: any) {
      setError(err.response?.data?.error || 'Failed to generate outline');
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <div className="space-y-6">
      {/* Book Info Summary */}
      <div className="card bg-gradient-to-r from-primary-50 to-accent-50">
        <div className="flex items-start justify-between">
          <div>
            <h3 className="font-semibold text-gray-900">{book.title || 'Untitled Book'}</h3>
            <p className="text-sm text-gray-600 mt-1 capitalize">Genre: {book.genre}</p>
            <p className="text-sm text-gray-500 mt-2 line-clamp-2">{book.idea}</p>
          </div>
          {!outline && (
            <button
              onClick={handleGenerate}
              disabled={isGenerating}
              className="btn-primary flex items-center gap-2"
            >
              {isGenerating ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Generating...
                </>
              ) : (
                <>
                  <Wand2 className="w-4 h-4" />
                  Generate Outline
                </>
              )}
            </button>
          )}
        </div>
      </div>

      {/* Error Message */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
          <p className="text-red-700">{error}</p>
        </div>
      )}

      {/* Outline Display */}
      {outline && (
        <div className="card">
          <div className="flex items-center gap-2 mb-6">
            <CheckCircle className="w-5 h-5 text-green-500" />
            <h3 className="text-lg font-semibold text-gray-900">
              Generated Outline: {outline.title || book.title}
            </h3>
          </div>

          {outline.logline && (
            <div className="mb-6 pb-6 border-b border-gray-200">
              <h4 className="text-sm font-medium text-gray-500 mb-2">Logline</h4>
              <p className="text-gray-900 italic">{outline.logline}</p>
            </div>
          )}

          <div>
            <h4 className="text-sm font-medium text-gray-500 mb-4">Chapter Outline</h4>
            <div className="space-y-3">
              {outline.chapters?.map((chapter: any, index: number) => (
                <div
                  key={index}
                  className="border border-gray-200 rounded-lg p-4 hover:border-primary-300 transition-colors"
                >
                  <div className="flex items-start gap-3">
                    <span className="flex-shrink-0 w-8 h-8 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-sm font-medium">
                      {chapter.number || index + 1}
                    </span>
                    <div className="flex-1">
                      <h5 className="font-medium text-gray-900">
                        {chapter.title || `Chapter ${chapter.number || index + 1}`}
                      </h5>
                      <p className="text-sm text-gray-600 mt-1">
                        {chapter.summary || 'No summary available'}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="mt-6 flex items-center justify-end gap-3">
            <p className="text-sm text-gray-500">
              Ready to start writing! Navigate to the Write tab to begin.
            </p>
          </div>
        </div>
      )}

      {/* Initial State */}
      {!outline && !isGenerating && (
        <div className="card text-center py-12">
          <Wand2 className="w-12 h-12 text-gray-300 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900">Ready to Generate</h3>
          <p className="text-gray-500 mt-2 max-w-md mx-auto">
            Click "Generate Outline" to create a detailed chapter outline based on your genre and book idea.
            The AI will create a structure following genre-specific patterns.
          </p>
        </div>
      )}
    </div>
  );
}