"use client"

import { useState } from 'react'
import { Framework, getAllFrameworks } from '@/lib/frameworks'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Check } from 'lucide-react'

interface FrameworkSelectorProps {
    selectedFramework?: string
    onSelect: (frameworkId: string | null) => void
    className?: string
}

export function FrameworkSelector({ selectedFramework, onSelect, className = '' }: FrameworkSelectorProps) {
    const frameworks = getAllFrameworks()

    return (
        <div className={`space-y-4 ${className}`}>
            <div>
                <h3 className="text-lg font-semibold mb-2">Choose a Framework (Optional)</h3>
                <p className="text-sm text-muted-foreground">
                    Structured frameworks help you write better prompts. Select one to get started with a template.
                </p>
            </div>

            <div className="grid md:grid-cols-2 gap-3">
                {/* No Framework Option */}
                <Card
                    className={`cursor-pointer transition-all hover:border-primary ${!selectedFramework ? 'border-primary bg-primary/5' : ''}`}
                    onClick={() => onSelect(null)}
                >
                    <CardHeader className="pb-3">
                        <div className="flex items-start justify-between">
                            <div>
                                <CardTitle className="text-base">No Framework</CardTitle>
                                <CardDescription className="text-xs mt-1">
                                    Start from scratch
                                </CardDescription>
                            </div>
                            {!selectedFramework && (
                                <Check className="h-5 w-5 text-primary" />
                            )}
                        </div>
                    </CardHeader>
                </Card>

                {/* Framework Options */}
                {frameworks.map((framework) => (
                    <Card
                        key={framework.id}
                        className={`cursor-pointer transition-all hover:border-primary ${selectedFramework === framework.id ? 'border-primary bg-primary/5' : ''
                            }`}
                        onClick={() => onSelect(framework.id)}
                    >
                        <CardHeader className="pb-3">
                            <div className="flex items-start justify-between">
                                <div>
                                    <div className="flex items-center gap-2 mb-1">
                                        <CardTitle className="text-base">{framework.name}</CardTitle>
                                        <Badge variant="outline" className="text-xs">
                                            {framework.sections.length} sections
                                        </Badge>
                                    </div>
                                    <CardDescription className="text-xs">
                                        {framework.description}
                                    </CardDescription>
                                </div>
                                {selectedFramework === framework.id && (
                                    <Check className="h-5 w-5 text-primary flex-shrink-0" />
                                )}
                            </div>
                        </CardHeader>
                    </Card>
                ))}
            </div>
        </div>
    )
}