frontend/src/components/ReportSelectionModal.jsx

import React, { useState } from 'react';
import { X, FileText, BookOpen, PenTool, Layout, FileBarChart, Lightbulb, GraduationCap } from 'lucide-react';

const ReportSelectionModal = ({ isOpen, onClose, onSelect }) => {
    if (!isOpen) return null;

    const reportTypes = [
        {
            id: 'briefing_doc',
            title: 'Briefing Doc',
            description: 'Overview of your sources featuring key insights and quotes.',
            icon: <FileText className="w-6 h-6 text-purple-400" />,
            color: 'bg-purple-500/10 border-purple-500/20 hover:border-purple-500/40'
        },
        {
            id: 'study_guide',
            title: 'Study Guide',
            description: 'Short-answer quiz, suggested essay questions and glossary.',
            icon: <GraduationCap className="w-6 h-6 text-blue-400" />,
            color: 'bg-blue-500/10 border-blue-500/20 hover:border-blue-500/40'
        },
        {
            id: 'blog_post',
            title: 'Blog Post',
            description: 'Insightful takeaways distilled into a highly readable article.',
            icon: <PenTool className="w-6 h-6 text-pink-400" />,
            color: 'bg-pink-500/10 border-pink-500/20 hover:border-pink-500/40'
        },
        {
            id: 'research_proposal',
            title: 'Research Proposal',
            description: 'A proposal for developing a solution based on the provided research.',
            icon: <Layout className="w-6 h-6 text-green-400" />,
            color: 'bg-green-500/10 border-green-500/20 hover:border-green-500/40'
        },
        {
            id: 'technical_whitepaper',
            title: 'Technical Whitepaper',
            description: 'An in-depth technical analysis of methods, models, and results.',
            icon: <FileBarChart className="w-6 h-6 text-amber-400" />,
            color: 'bg-amber-500/10 border-amber-500/20 hover:border-amber-500/40'
        },
        {
            id: 'explanatory_article',
            title: 'Explanatory Article',
            description: 'Explains complex concepts in a clear, educational way.',
            icon: <Lightbulb className="w-6 h-6 text-cyan-400" />,
            color: 'bg-cyan-500/10 border-cyan-500/20 hover:border-cyan-500/40'
        },
        {
            id: 'custom',
            title: 'Custom Report',
            description: 'Craft reports your way by specifying structure and tone.',
            icon: <BookOpen className="w-6 h-6 text-gray-400" />,
            color: 'bg-gray-500/10 border-gray-500/20 hover:border-gray-500/40'
        }
    ];

    return (
        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
            <div className="bg-[#1f1f1f] rounded-2xl w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl border border-white/10 overflow-hidden">

                <div className="p-6 border-b border-white/10 flex justify-between items-center">
                    <div>
                        <h2 className="text-2xl font-semibold text-white">Create Report</h2>
                        <p className="text-gray-400 text-sm">Select a format to generate a source-grounded document.</p>
                    </div>
                    <button onClick={onClose} className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
                        <X className="w-6 h-6" />
                    </button>
                </div>

                <div className="p-6 overflow-y-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {reportTypes.map((type) => (
                        <button
                            key={type.id}
                            onClick={() => onSelect(type.id)}
                            className={`flex flex-col text-left p-5 rounded-xl border transition-all duration-200 group ${type.color} hover:bg-opacity-20`}
                        >
                            <div className="mb-4 p-2 bg-black/20 rounded-lg w-fit group-hover:scale-110 transition-transform">
                                {type.icon}
                            </div>
                            <h3 className="text-lg font-medium text-white mb-2">{type.title}</h3>
                            <p className="text-sm text-gray-400 leading-relaxed">{type.description}</p>
                        </button>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default ReportSelectionModal;