'use client';

import { useEffect, useState } from 'react';
import { configApi } from '@/lib/api/admin';
import type { Config, SocialMedia } from '@/types';
import { FormField, Input, Textarea, SubmitButton, ErrorAlert, LoadingSpinner, ImageUpload } from '@/components/Ui';

export default function ConfigPage() {
    const [config, setConfig] = useState<Config | null>(null);
    const [loading, setLoading] = useState(true);
    const [savingGeneral, setSavingGeneral] = useState(false);
    const [savingSocial, setSavingSocial] = useState(false);
    const [errorGeneral, setErrorGeneral] = useState('');
    const [errorSocial, setErrorSocial] = useState('');
    const [successGeneral, setSuccessGeneral] = useState('');
    const [successSocial, setSuccessSocial] = useState('');
    const [logoFile, setLogoFile] = useState<File | null>(null);
    const [generalForm, setGeneralForm] = useState({ site_name: '', site_description: '', location: '' });
    const [socialForm, setSocialForm] = useState<SocialMedia>({ facebook: '', instagram: '', twitter: '', youtube: '', linkedin: '' });

    const fetchData = async () => {
        try {
            const r = await configApi.get();
            setConfig(r.data);
            setGeneralForm({ site_name: r.data.site_name || '', site_description: r.data.site_description || '', location: r.data.location || '' });
            setSocialForm({ facebook: r.data.social_media?.facebook || '', instagram: r.data.social_media?.instagram || '', twitter: r.data.social_media?.twitter || '', youtube: r.data.social_media?.youtube || '', linkedin: r.data.social_media?.linkedin || '' });
        } catch { } finally { setLoading(false); }
    };
    useEffect(() => { fetchData(); }, []);

    const handleSaveGeneral = async (e: React.FormEvent) => {
        e.preventDefault(); setSavingGeneral(true); setErrorGeneral(''); setSuccessGeneral('');
        try {
            const fd = new FormData();
            fd.append('site_name', generalForm.site_name);
            fd.append('site_description', generalForm.site_description);
            fd.append('location', generalForm.location);
            if (logoFile) fd.append('logo', logoFile);
            await configApi.update(fd);
            setSuccessGeneral('Settings saved successfully!'); fetchData();
        } catch (err: any) { setErrorGeneral(err.message || 'Failed to save'); } finally { setSavingGeneral(false); }
    };

    const handleSaveSocial = async (e: React.FormEvent) => {
        e.preventDefault(); setSavingSocial(true); setErrorSocial(''); setSuccessSocial('');
        try {
            await configApi.updateSocialMedia(socialForm);
            setSuccessSocial('Social media saved!');
        } catch (err: any) { setErrorSocial(err.message || 'Failed to save'); } finally { setSavingSocial(false); }
    };

    if (loading) return <LoadingSpinner />;

    const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';

    return (
        <div className="space-y-6">
            <div className="bg-white rounded-xl shadow-sm p-6 border-l-4 border-brand">
                <h1 className="text-2xl font-bold text-main">Settings</h1>
                <p className="text-sec mt-1 text-sm">Manage website configuration</p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* General Settings */}
                <div className="bg-white rounded-xl shadow-sm p-6">
                    <h2 className="text-lg font-semibold text-main mb-5 pb-3 border-b border-gray-100">General Settings</h2>
                    <form onSubmit={handleSaveGeneral} className="space-y-4">
                        <ErrorAlert message={errorGeneral} />
                        {successGeneral && <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">{successGeneral}</div>}
                        <FormField label="Site Name"><Input value={generalForm.site_name} onChange={e => setGeneralForm(p => ({ ...p, site_name: e.target.value }))} placeholder="Organization Name" /></FormField>
                        <FormField label="Description">
                            <textarea value={generalForm.site_description} onChange={e => setGeneralForm(p => ({ ...p, site_description: e.target.value }))} placeholder="Brief description..." rows={3} className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-main focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent resize-none" />
                        </FormField>
                        <FormField label="Address/Location">
                            <textarea value={generalForm.location} onChange={e => setGeneralForm(p => ({ ...p, location: e.target.value }))} placeholder="Office address..." rows={2} className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-main focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent resize-none" />
                        </FormField>
                        <div>
                            <label className="block text-sm font-medium text-main mb-1.5">Logo</label>
                            {config?.logo && !logoFile && (
                                <div className="mb-2 p-3 bg-gray-50 rounded-lg">
                                    <img src={`${apiUrl}/storage/${config.logo}`} alt="Current Logo" className="h-12 object-contain" />
                                    <p className="text-xs text-sec mt-1">Current logo</p>
                                </div>
                            )}
                            <input type="file" accept="image/*" onChange={e => setLogoFile(e.target.files?.[0] || null)} className="block w-full text-sm text-sec file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-orange-50 file:text-brand hover:file:bg-orange-100" />
                        </div>
                        <SubmitButton loading={savingGeneral} label="Save General Settings" />
                    </form>
                </div>

                {/* Social Media */}
                <div className="bg-white rounded-xl shadow-sm p-6">
                    <h2 className="text-lg font-semibold text-main mb-5 pb-3 border-b border-gray-100">Social Media</h2>
                    <form onSubmit={handleSaveSocial} className="space-y-4">
                        <ErrorAlert message={errorSocial} />
                        {successSocial && <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">{successSocial}</div>}
                        {[
                            { key: 'facebook', label: 'Facebook', placeholder: 'https://facebook.com/...' },
                            { key: 'instagram', label: 'Instagram', placeholder: 'https://instagram.com/...' },
                            { key: 'twitter', label: 'Twitter / X', placeholder: 'https://twitter.com/...' },
                            { key: 'youtube', label: 'YouTube', placeholder: 'https://youtube.com/...' },
                            { key: 'linkedin', label: 'LinkedIn', placeholder: 'https://linkedin.com/...' },
                        ].map(({ key, label, placeholder }) => (
                            <FormField key={key} label={label}>
                                <Input
                                    type="url"
                                    value={socialForm[key as keyof SocialMedia] || ''}
                                    onChange={e => setSocialForm(p => ({ ...p, [key]: e.target.value }))}
                                    placeholder={placeholder}
                                />
                            </FormField>
                        ))}
                        <SubmitButton loading={savingSocial} label="Save Social Media" />
                    </form>
                </div>
            </div>
        </div>
    );
}