import React, { useEffect, useState } from 'react';
import { usePage } from '@inertiajs/react';
import axios from 'axios';
import TextInput from '@/components/inputComponents/TextInput';
import NumberInput from '@/components/inputComponents/NumberInput';
import BooleanInput from '@/components/inputComponents/BooleanInput';
import SelectInput from '@/components/inputComponents/SelectInput';
import toast from "react-hot-toast";

interface Setting {
    name: string;
    label: string;
    value: string;
    type: string;
    description?: string;
    options?: string;
}

export default function Configurations() {
    const { auth } = usePage<{ auth: { user: { api_token: string } } }>().props;
    const authHeaders = {
        headers: {
            Authorization: `Bearer ${auth?.user?.api_token}`,
        },
    };

    const [categories, setCategories] = useState<string[]>([]);
    const [activeCategory, setActiveCategory] = useState<string>('');
    const [settings, setSettings] = useState<Setting[]>([]);

    useEffect(() => {
        getCategories();
    }, []);

    const getCategories = async () => {
        const { data } = await axios.get('/api/settings/categories', authHeaders);
        setCategories(data.result.filter((cat) => cat !== 'Branding'));
        if (data.result.length > 0) {
            setActiveCategory(data.result[0]);
        }
    };

    useEffect(() => {
        if (activeCategory) {
            getSettings();
        }
    }, [activeCategory]);

    const getSettings = async () => {
        const { data } = await axios.get(`/api/settings?category=${activeCategory}`, authHeaders);
        setSettings(data.result);
    };

    const getCategoryLabel = (category: string) => {
        return category.replace('App\\Models\\', '');
    };

    const parseOptions = (options?: string) => {
        try {
            return options ? JSON.parse(options) : [];
        } catch {
            return [];
        }
    };

    const updateSettingValue = (index: number, value: any) => {
        setSettings((prev) =>
            prev.map((s, i) => (i === index ? { ...s, value } : s))
        );
    };

    const renderInput = (setting: Setting, index: number) => {
        const commonProps = {
            value: setting.value,
            onChange: (val: any) => updateSettingValue(index, val),
        };

        switch (setting.type) {
            case 'boolean':
                return <BooleanInput {...commonProps} />;
            case 'number':
                return <NumberInput {...commonProps} />;
            case 'select':
                return <SelectInput {...commonProps} options={parseOptions(setting.options)} />;
            default:
                return <TextInput {...commonProps} />;
        }
    };

    const saveSettings = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const { data } = await axios.post('/api/settings', { settings }, authHeaders);
            toast.success(data.result.message);
        } catch {
            toast.error('Something happened, please try again');
        }
    };

    return (
        <div className="bg-white rounded-lg shadow">
            <div className="p-6">
                {/* Category Tabs */}
                <div className="border-b border-gray-200 overflow-x-auto">
                    <nav className="flex space-x-4">
                        {categories.map((category, index) => (
                            <button
                                key={index}
                                onClick={() => setActiveCategory(category)}
                                className={`px-3 py-2 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
                                    activeCategory === category
                                        ? 'border-indigo-500 text-indigo-600'
                                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                                }`}
                            >
                                {getCategoryLabel(category)}
                            </button>
                        ))}
                    </nav>
                </div>

                {/* Settings Form */}
                <div className="mt-6 max-w-lg">
                    <form onSubmit={saveSettings}>
                        {settings.map((setting, index) => (
                            <div key={setting.name} className="mb-4">
                                <label className="block text-sm font-medium text-gray-700 mb-1">
                                    {setting.label}
                                </label>
                                {renderInput(setting, index)}
                                {setting.description && (
                                    <small className="text-gray-500 text-xs mt-1 block">
                                        {setting.description}
                                    </small>
                                )}
                            </div>
                        ))}
                        <button
                            type="submit"
                            className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm"
                        >
                            Save Changes
                        </button>
                    </form>
                </div>
            </div>
        </div>
    );
}