'use client';

import { updateSetting } from '@/app/admin/settings/settings-actions';
import { clsx } from 'clsx';
import {
    Check,
    Facebook,
    Github,
    Globe,
    Instagram,
    Linkedin,
    Save,
    Share2,
    Twitter,
    Youtube
} from 'lucide-react';
import { useState } from 'react';

type SocialMediaClientProps = {
    initialSettings: Record<string, string>;
};

export default function SocialMediaClient({ initialSettings }: SocialMediaClientProps) {
    const [isSaving, setIsSaving] = useState(false);
    const [success, setSuccess] = useState(false);
    
    const [links, setLinks] = useState({
        social_facebook: initialSettings['social_facebook'] || '',
        social_twitter: initialSettings['social_twitter'] || '',
        social_instagram: initialSettings['social_instagram'] || '',
        social_linkedin: initialSettings['social_linkedin'] || '',
        social_github: initialSettings['social_github'] || '',
        social_youtube: initialSettings['social_youtube'] || '',
        social_discord: initialSettings['social_discord'] || '',
    });

    const handleSave = async () => {
        setIsSaving(true);
        try {
            await Promise.all(
                Object.entries(links).map(([key, value]) => updateSetting(key, value))
            );
            setSuccess(true);
            setTimeout(() => setSuccess(false), 3000);
        } catch (error) {
            console.error('Failed to save social media links', error);
        } finally {
            setIsSaving(false);
        }
    };

    const platforms = [
        { key: 'social_facebook', label: 'Facebook', icon: Facebook, placeholder: 'https://facebook.com/your-page' },
        { key: 'social_twitter', label: 'Twitter / X', icon: Twitter, placeholder: 'https://twitter.com/your-handle' },
        { key: 'social_instagram', label: 'Instagram', icon: Instagram, placeholder: 'https://instagram.com/your-handle' },
        { key: 'social_linkedin', label: 'LinkedIn', icon: Linkedin, placeholder: 'https://linkedin.com/company/your-company' },
        { key: 'social_github', label: 'GitHub', icon: Github, placeholder: 'https://github.com/your-org' },
        { key: 'social_youtube', label: 'YouTube', icon: Youtube, placeholder: 'https://youtube.com/@your-channel' },
        { key: 'social_discord', label: 'Discord', icon: Globe, placeholder: 'https://discord.gg/your-invite' }, // Globe as fallback for Discord
    ];

    return (
        <div className="w-full space-y-8 pb-20">
            <div className="glass p-8 rounded-2xl border border-white/5 bg-stone-900/50">
                <div className="flex items-center gap-4 mb-8 pb-8 border-b border-white/5">
                    <div className="w-12 h-12 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center">
                         <Share2 size={24} />
                    </div>
                    <div>
                        <h2 className="text-xl font-bold text-white">Social Media Links</h2>
                        <p className="text-gray-400 text-sm">Manage your social media presence links displayed on the website.</p>
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {platforms.map((platform) => {
                        const Icon = platform.icon;
                        return (
                            <div key={platform.key} className="relative group">
                                <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 flex items-center gap-2">
                                    <Icon size={14} />
                                    {platform.label}
                                </label>
                                <div className="relative">
                                    <div className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 group-focus-within:text-amber-500 transition-colors">
                                        <Icon size={18} />
                                    </div>
                                    <input 
                                        type="url"
                                        value={links[platform.key as keyof typeof links]}
                                        onChange={(e) => setLinks({ ...links, [platform.key]: e.target.value })}
                                        placeholder={platform.placeholder}
                                        className="w-full bg-black/40 border border-white/10 rounded-lg pl-12 pr-4 py-3 text-sm focus:outline-none focus:border-amber-500/50 transition-colors"
                                    />
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>

            {/* Save Button Bar */}
            <div className="fixed bottom-6 right-6 z-50">
                 <button 
                    onClick={handleSave}
                    disabled={isSaving}
                    className={clsx(
                        "flex items-center gap-2 px-6 py-3 rounded-full font-bold transition-all shadow-xl",
                        success 
                            ? "bg-green-600 text-white" 
                            : "bg-amber-600 hover:bg-amber-700 text-black hover:scale-105 active:scale-95 disabled:opacity-50 disabled:scale-100"
                    )}
                >
                    {success ? (
                        <>
                            <Check size={18} />
                            Saved Successfully
                        </>
                    ) : (
                        <>
                            {isSaving ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save size={20} />}
                            {isSaving ? 'Saving...' : 'Save Changes'}
                        </>
                    )}
                </button>
            </div>
        </div>
    );
}