Brancheneinstufung2/competitor-analysis-app/components/InputForm.tsx

import React, { useState, useRef } from 'react';
import { translations } from '../translations';

interface InputFormProps {
    onStart: (startUrl: string, maxCompetitors: number, marketScope: string, language: 'de' | 'en') => void;
    onLoadAnalysis: (state: any) => void;
}

const InputForm: React.FC<InputFormProps> = ({ onStart, onLoadAnalysis }) => {
    const [startUrl, setStartUrl] = useState('https://www.mobilexag.de');
    const [maxCompetitors, setMaxCompetitors] = useState(12);
    const [marketScope, setMarketScope] = useState('DACH');
    const [language, setLanguage] = useState<'de' | 'en'>('de');
    const fileInputRef = useRef<HTMLInputElement>(null);

    const t = translations[language];

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        onStart(startUrl, maxCompetitors, marketScope, language);
    };

    const handleLoadClick = () => {
        fileInputRef.current?.click();
    };

    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                try {
                    const json = JSON.parse(e.target?.result as string);
                    onLoadAnalysis(json);
                } catch (error) {
                    console.error("Error parsing JSON:", error);
                    alert("Fehler beim Lesen der Datei. Ist es eine valide JSON-Datei?");
                }
            };
            reader.readAsText(file);
        }
    };

    const inputClasses = "w-full bg-light-primary dark:bg-brand-primary text-light-text dark:text-brand-text border border-light-accent dark:border-brand-accent rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-highlight placeholder-light-subtle dark:placeholder-brand-light";

    return (
        <div className="bg-light-secondary dark:bg-brand-secondary p-8 rounded-lg shadow-2xl max-w-2xl mx-auto">
            <h2 className="text-3xl font-bold mb-6 text-center">{t.inputForm.title}</h2>
            <p className="text-light-subtle dark:text-brand-light mb-8 text-center">{t.inputForm.subtitle}</p>
            <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                    <label htmlFor="start_url" className="block text-sm font-medium text-light-subtle dark:text-brand-light mb-2">{t.inputForm.startUrlLabel}</label>
                    <input
                        type="url"
                        id="start_url"
                        value={startUrl}
                        onChange={(e) => setStartUrl(e.target.value)}
                        className={inputClasses}
                        placeholder="https://www.example-company.com"
                        required
                    />
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label htmlFor="max_competitors" className="block text-sm font-medium text-light-subtle dark:text-brand-light mb-2">{t.inputForm.maxCompetitorsLabel}</label>
                        <input
                            type="number"
                            id="max_competitors"
                            value={maxCompetitors}
                            onChange={(e) => setMaxCompetitors(parseInt(e.target.value, 10))}
                            className={inputClasses}
                            min="1"
                            max="50"
                        />
                    </div>
                    <div>
                        <label htmlFor="market_scope" className="block text-sm font-medium text-light-subtle dark:text-brand-light mb-2">{t.inputForm.marketScopeLabel}</label>
                        <input
                            type="text"
                            id="market_scope"
                            value={marketScope}
                            onChange={(e) => setMarketScope(e.target.value)}
                            className={inputClasses}
                            placeholder={t.inputForm.marketScopePlaceholder}
                        />
                    </div>
                </div>
                 <div>
                    <label className="block text-sm font-medium text-light-subtle dark:text-brand-light mb-2">{t.inputForm.languageLabel}</label>
                    <div className="flex rounded-lg shadow-sm" role="group">
                         <button
                            type="button"
                            onClick={() => setLanguage('de')}
                            className={`px-4 py-2 text-sm font-medium rounded-l-lg w-full transition-colors ${language === 'de' ? 'bg-brand-highlight text-white' : 'bg-light-primary dark:bg-brand-primary text-light-text dark:text-brand-text hover:bg-light-accent dark:hover:bg-brand-accent'}`}
                        >
                            Deutsch
                        </button>
                        <button
                            type="button"
                            onClick={() => setLanguage('en')}
                            className={`px-4 py-2 text-sm font-medium rounded-r-lg w-full transition-colors ${language === 'en' ? 'bg-brand-highlight text-white' : 'bg-light-primary dark:bg-brand-primary text-light-text dark:text-brand-text hover:bg-light-accent dark:hover:bg-brand-accent'}`}
                        >
                            English
                        </button>
                    </div>
                </div>
                <div className="pt-4 space-y-4">
                    <button
                        type="submit"
                        className="w-full bg-brand-highlight hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition duration-300 transform hover:scale-105"
                    >
                        {t.inputForm.submitButton}
                    </button>
                    
                    <div className="relative flex py-2 items-center">
                        <div className="flex-grow border-t border-light-accent dark:border-brand-accent"></div>
                        <span className="flex-shrink-0 mx-4 text-light-subtle dark:text-brand-light text-sm">{t.inputForm.loadAnalysisLabel}</span>
                        <div className="flex-grow border-t border-light-accent dark:border-brand-accent"></div>
                    </div>

                    <input 
                        type="file" 
                        ref={fileInputRef} 
                        onChange={handleFileChange} 
                        accept=".json" 
                        className="hidden" 
                    />
                    <button
                        type="button"
                        onClick={handleLoadClick}
                        className="w-full bg-light-accent hover:bg-gray-300 dark:bg-brand-accent dark:hover:bg-gray-600 text-light-text dark:text-white font-bold py-2 px-4 rounded-lg shadow transition duration-300"
                    >
                        {t.inputForm.loadButton}
                    </button>
                </div>
            </form>
        </div>
    );
};

export default InputForm;