import { getEntity, updateEntity } from '@/app/actions/entity';
import { Building, Image as ImageIcon, Link as LinkIcon, Share2, Tv, RadioTower, Facebook, Instagram, Twitter, Youtube, Send, Mail, Globe, MapPin, Phone, MessageSquare } from 'lucide-react';
import { createSessionClient } from '@/lib/appwrite.server';
import { APPWRITE_ALMEIRA_CONFIG } from '@/lib/appwrite';
import EntityLogoField from '@/components/dashboard/EntityLogoField';

export default async function EntityPage() {
    let entity: any = null;
    let cities: any[] = [];

    try {
        entity = await getEntity();
        
        const sessionClient = await createSessionClient();
        if (sessionClient) {
            const citiesRes = await sessionClient.databases.listDocuments(
                APPWRITE_ALMEIRA_CONFIG.databaseId,
                'cities',
                []
            );
            cities = citiesRes.documents;
        }
    } catch (e) {
        console.error("No se pudo cargar la información de la entidad o ciudades:", e);
    }

    async function updateEntityClient(formData: FormData) {
        'use server';
        await updateEntity(formData);
    }

    return (
        <div className="max-w-5xl mx-auto space-y-6 animate-fade-in pb-12">
            <div className="flex items-center gap-4 bg-slate-900 border border-slate-800 p-6 rounded-2xl shadow-xl shadow-cyan-500/5">
                <div className="p-3 bg-blue-500/10 rounded-xl text-blue-400">
                    <Building size={32} />
                </div>
                <div>
                  <h1 className="text-3xl font-black font-outfit uppercase tracking-tighter text-white">
                      Perfil de Entidad
                  </h1>
                  <p className="text-sm font-medium text-slate-400 font-bold uppercase tracking-wider">Identidad Corporativa, Contacto y Canales</p>
                </div>
            </div>

            <form action={updateEntityClient} className="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-2xl space-y-8">
                <div className="grid md:grid-cols-2 gap-8">
                    {/* Identidad de Marca */}
                    <div className="space-y-6">
                        <h3 className="text-lg font-bold text-white flex items-center gap-2 border-b border-slate-800 pb-2"><ImageIcon size={18} className="text-cyan-400" /> Identidad Visual</h3>
                        
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Razón Social / Nombre Entidad *</label>
                            <input 
                                type="text" 
                                name="razon_social" 
                                defaultValue={entity?.razon_social || ''} 
                                required
                                className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-white focus:border-cyan-500 transition-all font-medium" 
                            />
                        </div>

                        <EntityLogoField initialUrl={entity?.logotipo || ''} />

                        <div className="flex items-center gap-3 bg-slate-950 p-4 border border-slate-800 rounded-xl">
                            <input type="checkbox" name="mostrar_texto_logo" value="true" defaultChecked={entity?.mostrar_texto_logo === true} id="mostrar_texto_logo" className="w-5 h-5 accent-cyan-500 cursor-pointer" />
                            <label htmlFor="mostrar_texto_logo" className="text-sm font-bold text-slate-300 cursor-pointer select-none">
                                Mostrar Nombre junto al Logo en la barra de navegación web
                            </label>
                        </div>
                    </div>

                    {/* Contacto Físico */}
                    <div className="space-y-6">
                        <h3 className="text-lg font-bold text-white flex items-center gap-2 border-b border-slate-800 pb-2"><MapPin size={18} className="text-green-400" /> Contacto Oficial</h3>
                        
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Ciudad</label>
                                <select 
                                    name="ciudad" 
                                    defaultValue={entity?.ciudad || ''} 
                                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:border-cyan-500 transition-all"
                                >
                                    <option value="">Seleccionar Ciudad...</option>
                                    {cities.map(city => (
                                        <option key={city.$id} value={city.descripcion}>{city.descripcion}</option>
                                    ))}
                                </select>
                            </div>
                            <div>
                                <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Dirección Física</label>
                                <input type="text" name="direccion" defaultValue={entity?.direccion || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:border-cyan-500 transition-all" />
                            </div>
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Teléfono</label>
                                <input type="text" name="numero_contacto" defaultValue={entity?.numero_contacto || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:border-cyan-500 transition-all" />
                            </div>
                            <div>
                                <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">WhatsApp</label>
                                <input type="text" name="numero_whatsapp" defaultValue={entity?.numero_whatsapp || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:border-cyan-500 transition-all" />
                            </div>
                        </div>
                        
                        {/* Email y Sitio Web en líneas separadas como solicitó el usuario */}
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Email Corporativo</label>
                            <div className="relative group">
                                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-600 group-focus-within:text-cyan-500 transition-colors">
                                    <Mail size={18} />
                                </div>
                                <input type="email" name="email" defaultValue={entity?.email || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-3 text-white focus:border-cyan-500 transition-all font-medium" />
                            </div>
                        </div>
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Sitio Web URL</label>
                            <div className="relative group">
                                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-600 group-focus-within:text-cyan-500 transition-colors">
                                    <Globe size={18} />
                                </div>
                                <input type="url" name="sitio_web" defaultValue={entity?.sitio_web || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-3 text-white focus:border-cyan-500 transition-all font-medium" />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Configuración de Streaming */}
                <div className="space-y-6 pt-4 border-t border-slate-800">
                    <h3 className="text-lg font-bold text-white flex items-center gap-2 border-b border-slate-800 pb-2"><Tv size={18} className="text-rose-400" /> Canales en Vivo (Streaming)</h3>
                    <div className="grid md:grid-cols-2 gap-8">
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2 text-cyan-400">URL Streaming TV</label>
                            <input 
                                type="text" 
                                name="tv_url" 
                                defaultValue={entity?.tv_url || ''} 
                                placeholder="https://www.youtube.com/embed/..."
                                className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-white focus:border-cyan-500 transition-all font-mono text-sm" 
                            />
                        </div>
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2 text-rose-400">URL Streaming Radio (Audio Stream)</label>
                            <input 
                                type="text" 
                                name="radio_url" 
                                defaultValue={entity?.radio_url || ''} 
                                placeholder="https://stream.server.com:8000/live"
                                className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-white focus:border-rose-500 transition-all font-mono text-sm" 
                            />
                        </div>
                    </div>
                </div>

                {/* Redes Sociales con Iconos */}
                <div className="space-y-6 pt-4 border-t border-slate-800">
                    <h3 className="text-lg font-bold text-white flex items-center gap-2 border-b border-slate-800 pb-2"><Share2 size={18} className="text-purple-400" /> Vínculos Sociales</h3>
                    <div className="grid md:grid-cols-5 gap-4">
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-blue-500">
                                <Facebook size={12} /> Facebook
                            </label>
                            <input type="url" name="facebook_url" defaultValue={entity?.facebook_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-blue-500 text-sm transition-all" placeholder="https://..." />
                        </div>
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-pink-500">
                                <Instagram size={12} /> Instagram
                            </label>
                            <input type="url" name="instagram_url" defaultValue={entity?.instagram_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-pink-500 text-sm transition-all" placeholder="https://..." />
                        </div>
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-slate-200">
                                <Twitter size={12} /> X (Twitter)
                            </label>
                            <input type="url" name="x_url" defaultValue={entity?.x_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-slate-500 text-sm transition-all" placeholder="https://..." />
                        </div>
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-red-500">
                                <Youtube size={12} /> YouTube
                            </label>
                            <input type="url" name="youtube_url" defaultValue={entity?.youtube_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-red-500 text-sm transition-all" placeholder="https://..." />
                        </div>
                        <div>
                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-cyan-500">
                                <Send size={12} /> Telegram
                            </label>
                            <input type="url" name="telegram_url" defaultValue={entity?.telegram_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-cyan-500 text-sm transition-all" placeholder="https://..." />
                        </div>
                    </div>
                </div>

                <div className="pt-6 border-t border-slate-800">
                    <button type="submit" className="w-full md:w-auto relative flex items-center gap-2 justify-center group overflow-hidden bg-slate-800 text-white font-black uppercase tracking-widest py-3 px-12 rounded-xl transition-all border border-blue-500/50 hover:border-blue-400 ml-auto shadow-[0_0_20px_rgba(59,130,246,0.3)]">
                        <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-indigo-500 opacity-90 group-hover:opacity-100 transition-opacity"></div>
                        <Building size={18} className="relative z-10" />
                        <span className="relative z-10 text-sm">Guardar</span>
                    </button>
                </div>
            </form>
        </div>
    );
}