import React from 'react';
import { Card } from '../components/UiKit';

const FormsDashboard: React.FC = () => {
    const forms = [
        {
            title: 'Question Types Demo',
            description: 'Interactive showcase of all question types and input styles',
            url: '#/question-types-demo',
            color: 'bg-purple-500',
            features: ['All Question Types', 'Side-by-side Comparison', 'Live Preview']
        },
        {
            title: 'Traditional Questionnaire',
            description: 'Complete questionnaire on a single page with all questions visible',
            url: '#/employee-questionnaire',
            color: 'bg-blue-500',
            features: ['All Questions Visible', 'Scroll Navigation', 'Conditional Logic']
        },
        {
            title: 'Stepped Questionnaire',
            description: 'One question at a time with progress tracking and navigation',
            url: '#/employee-questionnaire-steps',
            color: 'bg-green-500',
            features: ['One Question Per Step', 'Progress Tracking', 'Back/Next Navigation']
        }
    ];

    return (
        <div className="min-h-screen bg-[--background-primary] py-8 px-4">
            <div className="max-w-6xl mx-auto">
                <div className="text-center mb-8">
                    <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center font-bold text-white text-2xl mx-auto mb-4">
                        📝
                    </div>
                    <h1 className="text-3xl font-bold text-[--text-primary] mb-2">
                        Employee Forms Dashboard
                    </h1>
                    <p className="text-[--text-secondary] max-w-2xl mx-auto">
                        Explore the different employee questionnaire implementations.
                        Each form demonstrates different UX approaches and question types based on the Figma designs.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                    {forms.map((form, index) => (
                        <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
                            <div className={`w-12 h-12 ${form.color} rounded-lg flex items-center justify-center text-white font-bold text-xl mb-4`}>
                                {index + 1}
                            </div>
                            <h3 className="text-xl font-semibold text-[--text-primary] mb-2">
                                {form.title}
                            </h3>
                            <p className="text-[--text-secondary] mb-4 text-sm">
                                {form.description}
                            </p>
                            <div className="space-y-2 mb-4">
                                {form.features.map((feature, featureIndex) => (
                                    <div key={featureIndex} className="flex items-center gap-2">
                                        <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                        <span className="text-sm text-[--text-secondary]">{feature}</span>
                                    </div>
                                ))}
                            </div>
                            <a
                                href={form.url}
                                className={`w-full inline-block text-center px-4 py-2 ${form.color} text-white rounded-lg hover:opacity-90 transition-opacity`}
                            >
                                Try This Form
                            </a>
                        </Card>
                    ))}
                </div>

                {/* Technical Overview */}
                <Card className="p-6">
                    <h2 className="text-2xl font-semibold text-[--text-primary] mb-4">
                        Implementation Overview
                    </h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h3 className="text-lg font-semibold text-[--text-primary] mb-3">
                                Question Types Implemented
                            </h3>
                            <ul className="space-y-2 text-[--text-secondary]">
                                <li>• <strong>Text Input:</strong> Single-line text for names, titles</li>
                                <li>• <strong>Textarea:</strong> Multi-line for detailed responses</li>
                                <li>• <strong>Scale Rating:</strong> 1-10 sliders with custom labels</li>
                                <li>• <strong>Yes/No Radio:</strong> Binary choice questions</li>
                                <li>• <strong>Select Dropdown:</strong> Predefined option selection</li>
                            </ul>
                        </div>
                        <div>
                            <h3 className="text-lg font-semibold text-[--text-primary] mb-3">
                                Key Features
                            </h3>
                            <ul className="space-y-2 text-[--text-secondary]">
                                <li>• <strong>Conditional Logic:</strong> Follow-up questions based on answers</li>
                                <li>• <strong>Progress Tracking:</strong> Visual completion indicators</li>
                                <li>• <strong>Responsive Design:</strong> Mobile-friendly layouts</li>
                                <li>• <strong>Figma Integration:</strong> Design system compliance</li>
                                <li>• <strong>Theme Support:</strong> Light/dark mode compatibility</li>
                            </ul>
                        </div>
                    </div>
                </Card>

                {/* Quick Stats */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                    <Card className="p-4 text-center">
                        <div className="text-2xl font-bold text-blue-500">32</div>
                        <div className="text-sm text-[--text-secondary]">Total Questions</div>
                    </Card>
                    <Card className="p-4 text-center">
                        <div className="text-2xl font-bold text-green-500">5</div>
                        <div className="text-sm text-[--text-secondary]">Question Types</div>
                    </Card>
                    <Card className="p-4 text-center">
                        <div className="text-2xl font-bold text-purple-500">8</div>
                        <div className="text-sm text-[--text-secondary]">Categories</div>
                    </Card>
                    <Card className="p-4 text-center">
                        <div className="text-2xl font-bold text-orange-500">3</div>
                        <div className="text-sm text-[--text-secondary]">Conditional Flows</div>
                    </Card>
                </div>
            </div>
        </div>
    );
};

export default FormsDashboard;