import { useState, useEffect } from 'react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchContent, Content as ContentType } from '../../services/api';
import { Card } from '../../components/ui/card';

export default function Content() {
  const toast = useToast();
  const [content, setContent] = useState<ContentType[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedContent, setSelectedContent] = useState<ContentType | null>(null);

  useEffect(() => {
    loadContent();
  }, []);

  const loadContent = async () => {
    try {
      setLoading(true);
      const response = await fetchContent();
      setContent(response.results || []);
    } catch (error: any) {
      toast.error(`Failed to load content: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6">
      <PageMeta title="Content" />
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Content</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">View all generated content</p>
      </div>

      {loading ? (
        <div className="flex items-center justify-center h-64">
          <div className="text-gray-500">Loading...</div>
        </div>
      ) : (
        <div className="space-y-4">
          {content.map((item: ContentType) => (
            <Card key={item.id} className="p-6">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                    Task #{item.task}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    Generated: {new Date(item.generated_at).toLocaleString()}
                  </p>
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-400">
                  {item.word_count} words
                </div>
              </div>
              <div 
                className="prose dark:prose-invert max-w-none"
                dangerouslySetInnerHTML={{ __html: item.html_content }}
              />
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}