"use client"

import { useState } from 'react'
import { Framework } from '@/lib/frameworks'
import { Target } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge'

interface FrameworkScaffoldProps {
    framework: Framework
    sections: Record<string, string>
    onSectionsChange: (sections: Record<string, string>) => void
    className?: string
}

export function FrameworkScaffold({ framework, sections, onSectionsChange, className = '' }: FrameworkScaffoldProps) {
    const updateSection = (sectionId: string, value: string) => {
        onSectionsChange({
            ...sections,
            [sectionId]: value,
        })
    }

    return (
        <div className={`space-y-4 ${className}`}>
            <div className="flex items-center gap-2 mb-4">
                <h3 className="text-lg font-semibold">Fill in {framework.name} Framework</h3>
                <Badge variant="outline" className="gap-1"><Target className="h-3 w-3" /> Structured</Badge>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle className="text-sm text-muted-foreground">
                        {framework.description}
                    </CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                    {framework.sections.map((section) => (
                        <div key={section.id} className="space-y-2">
                            <div className="flex items-center gap-2">
                                <Label htmlFor={section.id} className="font-medium">
                                    {section.label}
                                    {section.required && (
                                        <span className="text-destructive ml-1">*</span>
                                    )}
                                </Label>
                                <span className="text-xs text-muted-foreground">
                                    {section.description}
                                </span>
                            </div>

                            {section.label.toLowerCase().includes('example') ||
                                section.label.toLowerCase().includes('steps') ||
                                section.id === 'context' ||
                                section.id === 'instructions' ? (
                                <Textarea
                                    id={section.id}
                                    placeholder={section.placeholder}
                                    value={sections[section.id] || ''}
                                    onChange={(e) => updateSection(section.id, e.target.value)}
                                    rows={3}
                                    className="resize-none"
                                />
                            ) : (
                                <Input
                                    id={section.id}
                                    placeholder={section.placeholder}
                                    value={sections[section.id] || ''}
                                    onChange={(e) => updateSection(section.id, e.target.value)}
                                />
                            )}
                        </div>
                    ))}
                </CardContent>
            </Card>

            {framework.example && (
                <Card className="bg-muted/50">
                    <CardHeader>
                        <CardTitle className="text-sm">Example Output</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <p className="text-sm text-muted-foreground italic">
                            {framework.example}
                        </p>
                    </CardContent>
                </Card>
            )}
        </div>
    )
}