import { useState, useEffect } from 'react';
import { settingsAPI } from '../api';
import { FiSave } from 'react-icons/fi';

export default function Settings() {
    const [settings, setSettings] = useState({ phone: '', address: '', mapIframe: '' });
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);

    const loadSettings = async () => {
        try {
            const data = await settingsAPI.get();
            setSettings({
                phone: data.phone || '',
                address: data.address || '',
                mapIframe: data.mapIframe || ''
            });
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

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

    const handleChange = (e) => {
        setSettings({ ...settings, [e.target.name]: e.target.value });
    };

    const handleSave = async (e) => {
        e.preventDefault();
        setSaving(true);
        try {
            await settingsAPI.update(settings);
            alert("Sozlamalar saqlandi!");
        } catch (error) {
            alert("Xatolik yuz berdi");
        } finally {
            setSaving(false);
        }
    };

    if (loading) return <div className="text-gray-400">Yuklanmoqda...</div>;

    return (
        <div className="max-w-2xl">
            <h1 className="text-2xl font-bold text-white mb-6">Do'kon Sozlamalari</h1>

            <form onSubmit={handleSave} className="bg-gray-900 border border-gray-800 rounded-2xl p-6 shadow-sm space-y-6">

                <div>
                    <label className="block text-sm font-medium text-gray-400 mb-2">Aloqa telefoni</label>
                    <input
                        type="text"
                        name="phone"
                        value={settings.phone}
                        onChange={handleChange}
                        className="w-full bg-gray-950 border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white outline-none transition-all"
                        placeholder="+998 90 123 45 67"
                    />
                </div>

                <div>
                    <label className="block text-sm font-medium text-gray-400 mb-2">Do'kon Manzili (Olib ketish uchun)</label>
                    <textarea
                        name="address"
                        value={settings.address}
                        onChange={handleChange}
                        rows="2"
                        className="w-full bg-gray-950 border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white outline-none transition-all resize-none"
                        placeholder="Toshkent sh., Yunusobod tuman..."
                    ></textarea>
                </div>

                <div>
                    <label className="block text-sm font-medium text-gray-400 mb-2">Google/Yandex Xarita Kodu (Iframe)</label>
                    <textarea
                        name="mapIframe"
                        value={settings.mapIframe}
                        onChange={handleChange}
                        rows="4"
                        className="w-full bg-gray-950 border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white outline-none transition-all resize-none font-mono text-sm"
                        placeholder='<iframe src="..."></iframe>'
                    ></textarea>
                    <p className="text-xs text-gray-500 mt-2">Xarita kodi HTML Iframe taglaridan iborat bo'lishi shart.</p>
                </div>

                <div className="pt-4 border-t border-gray-800">
                    <button
                        type="submit"
                        disabled={saving}
                        className="bg-blue-600 hover:bg-blue-500 text-white font-medium py-3 px-6 rounded-lg flex items-center gap-2 transition-colors disabled:opacity-50"
                    >
                        <FiSave /> {saving ? "Saqlanmoqda..." : "Saqlash"}
                    </button>
                </div>

            </form>
        </div>
    );
}