"use client";


import React, { useState } from 'react';
import { Image as ImageIcon, Sparkles, Youtube, X, Globe, Facebook, Linkedin, Instagram } from 'lucide-react';
import { Business, CATEGORIES } from '../../types';
import { generateBusinessDescription } from '../../lib/geminiService';

// Helper to extract youtube ID
const getYouTubeId = (url: string) => {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url.match(regExp);
    return (match && match[2].length === 11) ? match[2] : null;
};

const DashboardProfile = ({ business, setBusiness }: { business: Business, setBusiness: (b: Business) => void }) => {
    const [formData, setFormData] = useState(business);
    const [videoInput, setVideoInput] = useState(business.videoUrl || '');
    const [videoPreviewId, setVideoPreviewId] = useState<string | null>(getYouTubeId(business.videoUrl || ''));
    const [isGenerating, setIsGenerating] = useState(false);
    const [isMounted, setIsMounted] = useState(false);

    // Sync formData when business prop changes (initial fetch)
    React.useEffect(() => {
        setFormData(business);
        setVideoInput(business.videoUrl || '');
        setVideoPreviewId(getYouTubeId(business.videoUrl || ''));
    }, [business]);

    React.useEffect(() => {
        setIsMounted(true);
    }, []);

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSocialChange = (network: keyof typeof formData.socialLinks, value: string) => {
        setFormData({
            ...formData,
            socialLinks: { ...formData.socialLinks, [network]: value }
        });
    };

    const handleVideoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const url = e.target.value;
        setVideoInput(url);
        setVideoPreviewId(getYouTubeId(url));
        setFormData({ ...formData, videoUrl: url });
    };

    const handleAiGenerate = async () => {
        setIsGenerating(true);
        const text = await generateBusinessDescription(formData.name, formData.category, "Innovation, Qualité, Service client");
        setFormData(prev => ({ ...prev, description: text }));
        setIsGenerating(false);
    };

    const handleSave = async () => {
        try {
            const res = await fetch('/api/businesses', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'x-user-id': business?.ownerId || (typeof window !== 'undefined' ? JSON.parse(localStorage.getItem('afro_user') || '{}').id : '')
                },
                body: JSON.stringify({
                    ...formData,
                    ownerId: business?.ownerId || (typeof window !== 'undefined' ? JSON.parse(localStorage.getItem('afro_user') || '{}').id : null)
                })
            });
            
            const data = await res.json();
            
            if (data.error) {
                alert('Erreur: ' + data.error);
            } else {
                setBusiness(data);
                alert('Profil mis à jour avec succès !');
                // Optional: refresh page to show in directory
            }
        } catch (error) {
            console.error('Save error:', error);
            alert('Erreur lors de la sauvegarde');
        }
    };

    return (
        <div className="space-y-8">
            <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold font-serif text-gray-900">Éditer mon profil</h2>
                <button onClick={handleSave} className="bg-brand-600 text-white px-4 py-2 rounded-md hover:bg-brand-700 font-medium text-sm shadow-sm">
                    Enregistrer
                </button>
            </div>

            {/* A. Bloc Identité Visuelle */}
            <div className="bg-white shadow rounded-lg p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><ImageIcon className="w-5 h-5 mr-2 text-brand-600" /> Identité Visuelle</h3>
                <div className="flex items-center space-x-6">
                    <div className="shrink-0">
                        <img className="h-24 w-24 object-cover rounded-full border-2 border-gray-200" src={formData.logoUrl} alt="Logo actuel" />
                    </div>
                    <div className="flex-1 border-2 border-dashed border-gray-300 rounded-md p-6 flex flex-col items-center justify-center hover:border-brand-400 transition-colors cursor-pointer bg-gray-50">
                        <ImageIcon className="h-8 w-8 text-gray-400" />
                        <p className="mt-1 text-xs text-gray-500">Glissez votre logo ici ou cliquez pour parcourir</p>
                    </div>
                </div>
                <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6 mt-6">
                    <div className="sm:col-span-3">
                        <label className="block text-sm font-medium text-gray-700">Nom de l'entreprise</label>
                        <input type="text" name="name" value={formData.name} onChange={handleInputChange} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm" />
                    </div>
                    <div className="sm:col-span-3">
                        <label className="block text-sm font-medium text-gray-700">Secteur d'activité</label>
                        <select name="category" value={formData.category} onChange={handleInputChange} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm">
                            {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
                        </select>
                    </div>
                    <div className="sm:col-span-6">
                        <div className="flex justify-between mb-1">
                            <label className="block text-sm font-medium text-gray-700">Description</label>
                            <button type="button" onClick={handleAiGenerate} disabled={isGenerating} className="text-xs flex items-center text-brand-600 hover:text-brand-800">
                                {isGenerating ? '...' : <><Sparkles className="w-3 h-3 mr-1" /> Générer avec IA</>}
                            </button>
                        </div>
                        <textarea name="description" rows={3} value={formData.description} onChange={handleInputChange} className="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm" />
                    </div>
                </div>
            </div>

            {/* B. Bloc Présentation Vidéo */}
            <div className="bg-white shadow rounded-lg p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><Youtube className="w-5 h-5 mr-2 text-red-600" /> Présentation Vidéo</h3>
                <div className="space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-gray-700">Lien de votre vidéo (Youtube)</label>
                        <div className="mt-1 flex rounded-md shadow-sm">
                            <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                                https://
                            </span>
                            <input
                                type="text"
                                value={videoInput.replace('https://', '')}
                                onChange={handleVideoChange}
                                className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300"
                                placeholder="www.youtube.com/watch?v=..."
                            />
                        </div>
                        <p className="mt-2 text-sm text-gray-500">Copiez l'URL de votre vidéo de présentation pour l'afficher sur votre profil.</p>
                    </div>

                    {videoPreviewId ? (
                        <div className="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-gray-100 mt-4 border border-gray-200">
                            <iframe
                                src={`https://www.youtube.com/embed/${videoPreviewId}`}
                                title="YouTube video player"
                                frameBorder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowFullScreen
                                className="w-full h-64 sm:h-80 rounded-lg"
                            ></iframe>
                        </div>
                    ) : videoInput && (
                        <div className="rounded-md bg-red-50 p-4 mt-4">
                            <div className="flex">
                                <div className="flex-shrink-0">
                                    <X className="h-5 w-5 text-red-400" aria-hidden="true" />
                                </div>
                                <div className="ml-3">
                                    <h3 className="text-sm font-medium text-red-800">Lien invalide</h3>
                                    <div className="mt-2 text-sm text-red-700">
                                        <p>Impossible de détecter une vidéo YouTube valide. Vérifiez le lien.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* C. Bloc Coordonnées & Réseaux */}
            <div className="bg-white shadow rounded-lg p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center"><Globe className="w-5 h-5 mr-2 text-blue-500" /> Coordonnées & Réseaux</h3>
                <div className="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                    <div className="sm:col-span-3">
                        <label className="block text-sm font-medium text-gray-700">Email Contact</label>
                        <input type="email" name="contactEmail" value={formData.contactEmail} onChange={handleInputChange} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm" />
                    </div>
                    <div className="sm:col-span-3">
                        <label className="block text-sm font-medium text-gray-700">Téléphone</label>
                        <input type="text" name="contactPhone" value={formData.contactPhone || ''} onChange={handleInputChange} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-brand-500 focus:border-brand-500 sm:text-sm" />
                    </div>
                    <div className="sm:col-span-6 border-t border-gray-100 pt-4 mt-2">
                        <h4 className="text-sm font-medium text-gray-500 mb-3 uppercase">Réseaux Sociaux</h4>
                        <div className="space-y-3">
                            <div className="flex rounded-md shadow-sm">
                                <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
                                    <Facebook className="w-4 h-4" />
                                </span>
                                <input type="text" placeholder="Lien Facebook" value={formData.socialLinks?.facebook || ''} onChange={(e) => handleSocialChange('facebook', e.target.value)} className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300" />
                            </div>
                            <div className="flex rounded-md shadow-sm">
                                <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
                                    <Linkedin className="w-4 h-4" />
                                </span>
                                <input type="text" placeholder="Lien LinkedIn" value={formData.socialLinks?.linkedin || ''} onChange={(e) => handleSocialChange('linkedin', e.target.value)} className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300" />
                            </div>
                            <div className="flex rounded-md shadow-sm">
                                <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500">
                                    <Instagram className="w-4 h-4" />
                                </span>
                                <input type="text" placeholder="Lien Instagram" value={formData.socialLinks?.instagram || ''} onChange={(e) => handleSocialChange('instagram', e.target.value)} className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-brand-500 focus:border-brand-500 sm:text-sm border-gray-300" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DashboardProfile;