"use client";

import React, { useState, useEffect, useTransition } from 'react';
import { Save, Globe, Mail, Phone, MapPin, Share2, Link as LinkIcon, Loader2, Newspaper, Briefcase } from 'lucide-react';
import { getSiteSettings, updateSiteSettings } from '@/app/actions/settings';
import { toast } from 'react-hot-toast';
import { getBlogPosts } from '@/app/actions/blog';
import RichTextEditor from '@/components/RichTextEditor';

const BUSINESS_CATEGORIES = [
  "Technologie & IT",
  "Agriculture & Agrobusiness",
  "Mode & Textile",
  "Cosmétique & Beauté",
  "Services aux entreprises",
  "Restauration & Alimentation",
  "Construction & BTP",
  "Éducation & Formation",
  "Santé & Bien-être",
  "Artisanat & Déco",
  "Tourisme & Loisirs",
  "Finance & Assurance",
  "Immobilier",
  "Transport & Logistique",
  "Média & Communication",
  "Autre"
];

const BLOG_CATEGORIES = [
  "Actualité",
  "Conseils",
  "Success Story",
  "Événement",
  "Formation"
];

export default function SettingsPage({ 
    searchParams 
}: { 
    searchParams: Promise<{ tab?: string }> 
}) {
  const [isPending, startTransition] = useTransition();
  const [settings, setSettings] = useState<any>(null);
  const [allPosts, setAllPosts] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedPostIds, setSelectedPostIds] = useState<string[]>([]);
  const [selectedHomeCategories, setSelectedHomeCategories] = useState<string[]>([]);
  const [selectedBlogCategories, setSelectedBlogCategories] = useState<string[]>([]);
  const [resetPasswordTemplate, setResetPasswordTemplate] = useState('');
  const [verifyEmailTemplate, setVerifyEmailTemplate] = useState('');
  
  // Use a state for the tab if we want it to be fully client-side reactive without full reload
  // But since the user wants it "like moderation center", I'll use URL search params
  const [currentTab, setCurrentTab] = useState('general');

  useEffect(() => {
    async function loadData() {
      const [settingsData, postsData] = await Promise.all([
        getSiteSettings(),
        getBlogPosts()
      ]);
      setSettings(settingsData);
      setAllPosts(postsData);
      setSelectedPostIds(settingsData?.homeBlogIds || []);
      setSelectedHomeCategories(settingsData?.homeCategories || []);
      setSelectedBlogCategories(settingsData?.homeBlogCategories || []);
      setResetPasswordTemplate(settingsData?.resetPasswordTemplate || '');
      setVerifyEmailTemplate(settingsData?.verifyEmailTemplate || '');
      setLoading(false);
    }
    loadData();
  }, []);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const data = {
      siteName: formData.get('siteName'),
      siteSlogan: formData.get('siteSlogan'),
      contactEmail: formData.get('contactEmail'),
      contactPhone: formData.get('contactPhone'),
      address: formData.get('address'),
      facebookUrl: formData.get('facebookUrl'),
      twitterUrl: formData.get('twitterUrl'),
      instagramUrl: formData.get('instagramUrl'),
      linkedinUrl: formData.get('linkedinUrl'),
      footerText: formData.get('footerText'),
      homeBlogShow: formData.get('homeBlogShow') === 'on',
      homeBlogTitle: formData.get('homeBlogTitle'),
      homeBlogSubtitle: formData.get('homeBlogSubtitle'),
      homeBlogCount: parseInt(formData.get('homeBlogCount') as string || '3'),
      homeBlogSelection: formData.get('homeBlogSelection'),
      homeBlogIds: selectedPostIds,
      homeBlogCategories: selectedBlogCategories,
      homeCategories: selectedHomeCategories,
      resetPasswordSubject: formData.get('resetPasswordSubject'),
      resetPasswordTemplate: resetPasswordTemplate,
      verifyEmailSubject: formData.get('verifyEmailSubject'),
      verifyEmailTemplate: verifyEmailTemplate,
    };

    startTransition(async () => {
      const result = await updateSiteSettings(data);
      if (result.success) {
        toast.success("Paramètres mis à jour avec succès");
      } else {
        toast.error("Erreur lors de la mise à jour");
      }
    });
  };

  const togglePostId = (id: string) => {
    setSelectedPostIds(prev => 
      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
    );
  };

  const toggleHomeCategory = (cat: string) => {
    setSelectedHomeCategories(prev => 
      prev.includes(cat) ? prev.filter(c => c !== cat) : [...prev, cat]
    );
  };

  const toggleBlogCategory = (cat: string) => {
    setSelectedBlogCategories(prev => 
      prev.includes(cat) ? prev.filter(c => c !== cat) : [...prev, cat]
    );
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center p-20">
        <Loader2 className="w-8 h-8 animate-spin text-indigo-500" />
      </div>
    );
  }

  return (
    <div className="p-8 max-w-5xl mx-auto">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-white">Configuration du Site</h1>
          <p className="text-slate-400">Gérez les informations globales, les sections de l'accueil et les modèles d'emails.</p>
        </div>
      </div>

      {/* Tabs Switcher */}
      <div className="flex gap-2 mb-8 bg-slate-900/50 p-1 rounded-xl border border-slate-800 w-fit">
        <button 
            onClick={() => setCurrentTab('general')}
            className={`px-6 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2 ${currentTab === 'general' ? 'bg-indigo-600 text-white shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-800'}`}
        >
            <Globe className="w-4 h-4" />
            Général
        </button>
        <button 
            onClick={() => setCurrentTab('emails')}
            className={`px-6 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2 ${currentTab === 'emails' ? 'bg-indigo-600 text-white shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-800'}`}
        >
            <Mail className="w-4 h-4" />
            Configuration Mail
        </button>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        {currentTab === 'general' && (
          <div className="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-300">
            {/* Section Générale */}
            <div className="bg-slate-900/50 border border-slate-700 rounded-2xl overflow-hidden">
              <div className="p-4 bg-slate-800/50 border-b border-slate-700 flex items-center gap-2">
                <Globe className="w-5 h-5 text-indigo-400" />
                <h2 className="font-semibold text-white">Informations Générales</h2>
              </div>
              <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-400">Nom du site</label>
                  <input 
                    name="siteName" 
                    defaultValue={settings?.siteName}
                    className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-400">Slogan du site</label>
                  <input 
                    name="siteSlogan" 
                    defaultValue={settings?.siteSlogan}
                    className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
                  />
                </div>
                <div className="md:col-span-2 space-y-2">
                  <label className="text-sm font-medium text-slate-400">Texte du pied de page (Footer)</label>
                  <input 
                    name="footerText" 
                    defaultValue={settings?.footerText}
                    className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
                  />
                </div>
              </div>
            </div>

            {/* Section Page d'Accueil - Secteurs */}
            <div className="bg-slate-900/50 border border-slate-700 rounded-2xl overflow-hidden">
              <div className="p-4 bg-slate-800/50 border-b border-slate-700 flex items-center gap-2">
                <Briefcase className="w-5 h-5 text-yellow-400" />
                <h2 className="font-semibold text-white">Secteurs en Vedette (Home)</h2>
              </div>
              <div className="p-6">
                <p className="text-sm text-slate-400 mb-4">Sélectionnez les secteurs d'activité à afficher sur la page d'accueil.</p>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                  {BUSINESS_CATEGORIES.map(cat => (
                    <button
                      key={cat}
                      type="button"
                      onClick={() => toggleHomeCategory(cat)}
                      className={`text-left p-2 rounded-lg border text-xs transition-all ${
                        selectedHomeCategories.includes(cat)
                        ? 'bg-indigo-600/20 border-indigo-500 text-indigo-300'
                        : 'bg-slate-950 border-slate-700 text-slate-400 hover:border-slate-500'
                      }`}
                    >
                      {cat}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* Section Page d'Accueil - Blog */}
            <div className="bg-slate-900/50 border border-slate-700 rounded-2xl overflow-hidden">
              <div className="p-4 bg-slate-800/50 border-b border-slate-700 flex items-center gap-2">
                <Newspaper className="w-5 h-5 text-purple-400" />
                <h2 className="font-semibold text-white">Section Blog sur l'Accueil</h2>
              </div>
              <div className="p-6 space-y-6">
                <div className="flex items-center gap-3 p-3 bg-indigo-600/10 border border-indigo-500/20 rounded-xl">
                  <input 
                    type="checkbox" 
                    name="homeBlogShow" 
                    id="homeBlogShow"
                    defaultChecked={settings?.homeBlogShow}
                    className="w-5 h-5 rounded border-slate-700 bg-slate-950 text-indigo-600 focus:ring-indigo-500"
                  />
                  <label htmlFor="homeBlogShow" className="text-sm font-medium text-slate-300 font-bold uppercase tracking-wider">Activer cette section</label>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-slate-400">Titre de la section</label>
                    <input 
                      name="homeBlogTitle" 
                      defaultValue={settings?.homeBlogTitle}
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-slate-400">Sous-titre</label>
                    <input 
                      name="homeBlogSubtitle" 
                      defaultValue={settings?.homeBlogSubtitle}
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                </div>

                <div className="border-t border-slate-700 pt-6">
                  <label className="text-sm font-medium text-slate-400 block mb-3">Mode de sélection des articles</label>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <label className={`flex flex-col p-4 rounded-xl border cursor-pointer transition-all ${settings?.homeBlogSelection === 'latest' ? 'bg-indigo-600/10 border-indigo-500' : 'bg-slate-950 border-slate-700 hover:border-slate-500'}`}>
                      <input type="radio" name="homeBlogSelection" value="latest" defaultChecked={settings?.homeBlogSelection === 'latest'} className="sr-only" />
                      <span className="text-white font-bold text-sm">Les plus récents</span>
                      <span className="text-xs text-slate-500 mt-1">Affiche automatiquement les X derniers articles.</span>
                    </label>
                    <label className={`flex flex-col p-4 rounded-xl border cursor-pointer transition-all ${settings?.homeBlogSelection === 'manual' ? 'bg-indigo-600/10 border-indigo-500' : 'bg-slate-950 border-slate-700 hover:border-slate-500'}`}>
                      <input type="radio" name="homeBlogSelection" value="manual" defaultChecked={settings?.homeBlogSelection === 'manual'} className="sr-only" />
                      <span className="text-white font-bold text-sm">Sélection manuelle</span>
                      <span className="text-xs text-slate-500 mt-1">Choisissez précisément les articles à mettre en avant.</span>
                    </label>
                    <label className={`flex flex-col p-4 rounded-xl border cursor-pointer transition-all ${settings?.homeBlogSelection === 'category' ? 'bg-indigo-600/10 border-indigo-500' : 'bg-slate-950 border-slate-700 hover:border-slate-500'}`}>
                      <input type="radio" name="homeBlogSelection" value="category" defaultChecked={settings?.homeBlogSelection === 'category'} className="sr-only" />
                      <span className="text-white font-bold text-sm">Par catégorie</span>
                      <span className="text-xs text-slate-500 mt-1">Affiche les articles appartenant à certaines catégories.</span>
                    </label>
                  </div>
                </div>

                <div className="grid grid-cols-1 gap-6">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-slate-400">Nombre maximum d'articles</label>
                    <input 
                      type="number"
                      name="homeBlogCount" 
                      defaultValue={settings?.homeBlogCount}
                      min="1" max="12"
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>

                  {/* Manual Selection UI */}
                  <div className="space-y-3">
                    <label className="text-sm font-medium text-slate-400">Articles sélectionnés (si mode manuel)</label>
                    <div className="grid grid-cols-1 gap-2 max-h-60 overflow-y-auto p-2 bg-slate-950 rounded-xl border border-slate-700">
                      {allPosts.map(post => (
                        <button
                          key={post.id}
                          type="button"
                          onClick={() => togglePostId(post.id)}
                          className={`flex items-center justify-between p-3 rounded-lg text-sm transition-all ${
                            selectedPostIds.includes(post.id)
                            ? 'bg-indigo-600/20 border-indigo-500/50 text-white'
                            : 'text-slate-400 hover:bg-slate-900'
                          }`}
                        >
                          <span>{post.title}</span>
                          {selectedPostIds.includes(post.id) && <span className="text-indigo-400 font-bold text-xs">SÉLECTIONNÉ</span>}
                        </button>
                      ))}
                    </div>
                  </div>

                  {/* Category Selection UI */}
                  <div className="space-y-3">
                    <label className="text-sm font-medium text-slate-400">Catégories d'articles (si mode catégorie)</label>
                    <div className="flex flex-wrap gap-2">
                      {BLOG_CATEGORIES.map(cat => (
                        <button
                          key={cat}
                          type="button"
                          onClick={() => toggleBlogCategory(cat)}
                          className={`px-4 py-2 rounded-full border text-xs transition-all ${
                            selectedBlogCategories.includes(cat)
                            ? 'bg-purple-600 border-purple-500 text-white'
                            : 'bg-slate-950 border-slate-700 text-slate-400 hover:border-slate-500'
                          }`}
                        >
                          {cat}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Section Contact */}
            <div className="bg-slate-900/50 border border-slate-700 rounded-2xl overflow-hidden">
              <div className="p-4 bg-slate-800/50 border-b border-slate-700 flex items-center gap-2">
                <Mail className="w-5 h-5 text-emerald-400" />
                <h2 className="font-semibold text-white">Coordonnées de Contact</h2>
              </div>
              <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-400">Email de support</label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-3.5 w-4 h-4 text-slate-500" />
                    <input 
                      name="contactEmail" 
                      defaultValue={settings?.contactEmail}
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 pl-10 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-400">Téléphone de contact</label>
                  <div className="relative">
                    <Phone className="absolute left-3 top-3.5 w-4 h-4 text-slate-500" />
                    <input 
                      name="contactPhone" 
                      defaultValue={settings?.contactPhone}
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 pl-10 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                </div>
                <div className="md:col-span-2 space-y-2">
                  <label className="text-sm font-medium text-slate-400">Adresse physique</label>
                  <div className="relative">
                    <MapPin className="absolute left-3 top-3.5 w-4 h-4 text-slate-500" />
                    <input 
                      name="address" 
                      defaultValue={settings?.address}
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 pl-10 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                </div>
              </div>
            </div>

            {/* Section Réseaux Sociaux */}
            <div className="bg-slate-900/50 border border-slate-700 rounded-2xl overflow-hidden">
              <div className="p-4 bg-slate-800/50 border-b border-slate-700 flex items-center gap-2">
                <Share2 className="w-5 h-5 text-blue-400" />
                <h2 className="font-semibold text-white">Réseaux Sociaux</h2>
              </div>
              <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-400">Facebook URL</label>
                  <div className="relative">
                    <Share2 className="absolute left-3 top-3.5 w-4 h-4 text-slate-500" />
                    <input 
                      name="facebookUrl" 
                      defaultValue={settings?.facebookUrl}
                      placeholder="https://facebook.com/..."
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 pl-10 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-400">Twitter (X) URL</label>
                  <div className="relative">
                    <Share2 className="absolute left-3 top-3.5 w-4 h-4 text-slate-500" />
                    <input 
                      name="twitterUrl" 
                      defaultValue={settings?.twitterUrl}
                      placeholder="https://twitter.com/..."
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 pl-10 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-400">Instagram URL</label>
                  <div className="relative">
                    <Share2 className="absolute left-3 top-3.5 w-4 h-4 text-slate-500" />
                    <input 
                      name="instagramUrl" 
                      defaultValue={settings?.instagramUrl}
                      placeholder="https://instagram.com/..."
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 pl-10 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-slate-400">LinkedIn URL</label>
                  <div className="relative">
                    <Share2 className="absolute left-3 top-3.5 w-4 h-4 text-slate-500" />
                    <input 
                      name="linkedinUrl" 
                      defaultValue={settings?.linkedinUrl}
                      placeholder="https://linkedin.com/in/..."
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 pl-10 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {currentTab === 'emails' && (
          <div className="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-300">
            {/* Section Mail */}
            <div className="bg-slate-900/50 border border-slate-700 rounded-2xl overflow-hidden">
              <div className="p-4 bg-slate-800/50 border-b border-slate-700 flex items-center gap-2">
                <Mail className="w-5 h-5 text-orange-400" />
                <h2 className="font-semibold text-white">Gestion des Emails</h2>
              </div>
              <div className="p-6 space-y-8">
                {/* Password Reset */}
                <div className="space-y-4">
                  <h3 className="text-sm font-bold text-indigo-400 uppercase tracking-wider">Réinitialisation de mot de passe</h3>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-slate-400">Objet de l'email</label>
                    <input 
                      name="resetPasswordSubject" 
                      defaultValue={settings?.resetPasswordSubject}
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-slate-400">Modèle d'email</label>
                    <RichTextEditor 
                      value={resetPasswordTemplate} 
                      onChange={setResetPasswordTemplate} 
                      placeholder="Contenu de l'email..."
                    />
                    <p className="text-[10px] text-slate-500">
                      Variables : <code className="text-indigo-400">{"{name}"}</code>, <code className="text-indigo-400">{"{resetUrl}"}</code>, <code className="text-indigo-400">{"{siteName}"}</code>
                    </p>
                  </div>
                </div>

                <div className="border-t border-slate-800"></div>

                {/* Account Verification */}
                <div className="space-y-4">
                  <h3 className="text-sm font-bold text-emerald-400 uppercase tracking-wider">Vérification de compte</h3>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-slate-400">Objet de l'email</label>
                    <input 
                      name="verifyEmailSubject" 
                      defaultValue={settings?.verifyEmailSubject}
                      className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-slate-400">Modèle d'email</label>
                    <RichTextEditor 
                      value={verifyEmailTemplate} 
                      onChange={setVerifyEmailTemplate} 
                      placeholder="Contenu de l'email..."
                    />
                    <p className="text-[10px] text-slate-500">
                      Variables : <code className="text-indigo-400">{"{name}"}</code>, <code className="text-indigo-400">{"{verifyUrl}"}</code>, <code className="text-indigo-400">{"{siteName}"}</code>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        <div className="flex justify-end">
          <button
            type="submit"
            disabled={isPending}
            className="bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-700 text-white px-8 py-3 rounded-xl font-bold transition-all shadow-lg flex items-center gap-2"
          >
            {isPending ? (
              <Loader2 className="w-5 h-5 animate-spin" />
            ) : (
              <Save className="w-5 h-5" />
            )}
            Enregistrer les modifications
          </button>
        </div>
      </form>
    </div>
  );
}