"use client";

import { useEffect, useState } from "react";
import {
  Save,
  Phone,
  PhoneCall,
  MessageCircle,
  Mail,
  MapPin,
  Compass,
  Clock,
  Map,
  Building,
  Shield,
  Sparkles,
  FileText,
  Share2,
} from "lucide-react";
import {
  FacebookIcon,
  InstagramIcon,
  TikTokIcon,
  LinkedInIcon,
  XTwitterIcon,
  YouTubeIcon,
} from "@/components/icons/SocialIcons";
import { toast } from "sonner";
import { isAxiosError } from "axios";
import PageHeader from "@/components/admin/ui/PageHeader";
import Card from "@/components/admin/ui/Card";
import Input from "@/components/admin/ui/Input";
import Tabs from "@/components/admin/ui/Tabs";
import Button from "@/components/admin/ui/Button";
import { PageLoader } from "@/components/admin/ui/Loader";
import { getInfosUtiles } from "@/lib/api/info-utile";
import { updateInfosUtiles, type UpdateInfoUtilePayload } from "@/lib/api/admin/info-utile";
import type { InfoUtile } from "@/types/info-utile";
import styles from "../contenu/form.module.css";

const ONGLETS = [
  { value: "contacts", label: "Contacts & Support", icon: <Phone size={16} /> },
  { value: "localisation", label: "Localisation & Siège", icon: <MapPin size={16} /> },
  { value: "reseaux", label: "Réseaux sociaux", icon: <Share2 size={16} /> },
  { value: "legal", label: "Mentions légales", icon: <Building size={16} /> },
];

type FormState = Omit<InfoUtile, "id" | "updatedAt">;

function versFormulaire(infos: InfoUtile): FormState {
  const { id: _id, updatedAt: _updatedAt, ...reste } = infos;
  return reste;
}

function versPayload(form: FormState): UpdateInfoUtilePayload {
  return {
    telephone_principal: form.telephonePrincipal,
    telephone_secondaire: form.telephoneSecondaire,
    numero_whatsapp: form.numeroWhatsapp,
    email_contact: form.emailContact,
    email_commandes: form.emailCommandes,
    adresse_siege: form.adresseSiege,
    zone_couverture: form.zoneCouverture,
    horaires_ouverture: form.horairesOuverture,
    lien_google_maps: form.lienGoogleMaps,
    lien_facebook: form.lienFacebook,
    lien_tiktok: form.lienTiktok,
    lien_instagram: form.lienInstagram,
    lien_linkedin: form.lienLinkedin,
    lien_x: form.lienX,
    lien_youtube: form.lienYoutube,
    nom_plateforme: form.nomPlateforme,
    slogan: form.slogan,
    baseline: form.baseline,
    numero_ifu: form.numeroIfu,
    numero_rccm: form.numeroRccm,
  };
}

export default function InfosUtilesPage() {
  const [onglet, setOnglet] = useState("contacts");
  const [form, setForm] = useState<FormState | null>(null);
  const [initialForm, setInitialForm] = useState<FormState | null>(null);
  const [chargement, setChargement] = useState(true);
  const [enregistrement, setEnregistrement] = useState(false);

  useEffect(() => {
    getInfosUtiles()
      .then((data) => {
        const etat = versFormulaire(data);
        setForm(etat);
        setInitialForm(etat);
      })
      .catch(() => toast.error("Impossible de charger les informations."))
      .finally(() => setChargement(false));
  }, []);

  const handleChange = (cle: keyof FormState, valeur: string) => {
    setForm((prev) => (prev ? { ...prev, [cle]: valeur } : prev));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form) return;

    setEnregistrement(true);

    try {
      const data = await updateInfosUtiles(versPayload(form));
      const etat = versFormulaire(data);
      setForm(etat);
      setInitialForm(etat);
      toast.success("Paramètres enregistrés avec succès !");
    } catch (err) {
      if (isAxiosError(err) && err.response?.data?.message) {
        toast.error(err.response.data.message);
      } else {
        toast.error("Une erreur est survenue lors de l'enregistrement.");
      }
    } finally {
      setEnregistrement(false);
    }
  };

  if (chargement) return <PageLoader />;
  if (!form) return <p>Aucune donnée trouvée.</p>;

  const champ = (cle: keyof FormState) => ({
    value: form[cle] ?? "",
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => handleChange(cle, e.target.value),
  });

  return (
    <div className={styles.page}>
      <form onSubmit={handleSubmit}>
        <PageHeader
          title="Paramètres & Informations Utiles"
          subtitle="Modifiez les contacts de support, horaires, mentions légales et liens vers les réseaux sociaux."
        />

        <div style={{ marginBottom: 24 }}>
          <Tabs tabs={ONGLETS} value={onglet} onChange={setOnglet} />
        </div>

        <div className={styles.grille}>
          <Card title={ONGLETS.find((o) => o.value === onglet)?.label ?? "Paramètres"}>
            <div className={styles.formulaire}>
              {onglet === "contacts" && (
                <>
                  <Input
                    label="Téléphone principal"
                    iconLeft={Phone}
                    placeholder="+229 97 00 00 01"
                    required
                    {...champ("telephonePrincipal")}
                  />
                  <Input
                    label="Téléphone secondaire (commercial / urgence)"
                    iconLeft={PhoneCall}
                    placeholder="+229 95 00 00 02"
                    {...champ("telephoneSecondaire")}
                  />
                  <Input
                    label="Numéro WhatsApp officiel"
                    iconLeft={MessageCircle}
                    required
                    hint="Format international : +229 XX XX XX XX"
                    placeholder="+229 97 00 00 01"
                    {...champ("numeroWhatsapp")}
                  />
                  <Input
                    label="Email de contact général"
                    type="email"
                    iconLeft={Mail}
                    placeholder="contact@pubago.com"
                    required
                    {...champ("emailContact")}
                  />
                  <Input
                    label="Email pour les commandes et devis"
                    type="email"
                    iconLeft={Mail}
                    placeholder="commandes@pubago.com"
                    {...champ("emailCommandes")}
                  />
                </>
              )}

              {onglet === "localisation" && (
                <>
                  <Input
                    label="Adresse physique du siège"
                    iconLeft={MapPin}
                    placeholder="Cadjehoun, Cotonou, Bénin"
                    required
                    {...champ("adresseSiege")}
                  />
                  <Input
                    label="Zone géographique de couverture"
                    iconLeft={Compass}
                    placeholder="Grand Nokoué : Cotonou, Abomey-Calavi, Porto-Novo, Sèmè-Podji"
                    required
                    {...champ("zoneCouverture")}
                  />
                  <Input
                    label="Horaires d'ouverture"
                    iconLeft={Clock}
                    placeholder="Lun - Ven : 08h00 - 18h30 | Sam : 09h00 - 14h00"
                    required
                    {...champ("horairesOuverture")}
                  />
                  <Input
                    label="Lien Google Maps (Itinéraire GPS)"
                    iconLeft={Map}
                    placeholder="https://maps.google.com/..."
                    {...champ("lienGoogleMaps")}
                  />
                </>
              )}

              {onglet === "reseaux" && (
                <>
                  <Input
                    label="Page Facebook officielle"
                    iconLeft={FacebookIcon}
                    placeholder="https://facebook.com/pubago"
                    {...champ("lienFacebook")}
                  />
                  <Input
                    label="Compte Instagram"
                    iconLeft={InstagramIcon}
                    placeholder="https://instagram.com/pubago"
                    {...champ("lienInstagram")}
                  />
                  <Input
                    label="Compte TikTok"
                    iconLeft={TikTokIcon}
                    placeholder="https://tiktok.com/@pubago"
                    {...champ("lienTiktok")}
                  />
                  <Input
                    label="Page LinkedIn d'entreprise"
                    iconLeft={LinkedInIcon}
                    placeholder="https://linkedin.com/company/pubago"
                    {...champ("lienLinkedin")}
                  />
                  <Input
                    label="Compte X (ex-Twitter)"
                    iconLeft={XTwitterIcon}
                    placeholder="https://x.com/pubago"
                    {...champ("lienX")}
                  />
                  <Input
                    label="Chaîne YouTube"
                    iconLeft={YouTubeIcon}
                    placeholder="https://youtube.com/@pubago"
                    {...champ("lienYoutube")}
                  />
                </>
              )}

              {onglet === "legal" && (
                <>
                  <Input
                    label="Nom officiel de la plateforme"
                    iconLeft={Building}
                    placeholder="PUBAGO"
                    required
                    {...champ("nomPlateforme")}
                  />
                  <Input
                    label="Baseline / Accroche"
                    iconLeft={Sparkles}
                    placeholder="Chaque sac est un média. Chaque client est un ambassadeur."
                    required
                    {...champ("baseline")}
                  />
                  <Input
                    label="Slogan officiel"
                    iconLeft={Sparkles}
                    placeholder="L'emballage éco-responsable qui communique pour vous."
                    required
                    {...champ("slogan")}
                  />
                  <Input
                    label="Numéro IFU (Identifiant Fiscal Unique)"
                    iconLeft={FileText}
                    placeholder="0123456789012"
                    {...champ("numeroIfu")}
                  />
                  <Input
                    label="Numéro RCCM (Registre du Commerce)"
                    iconLeft={Shield}
                    placeholder="RB/COT/2026/B/0000"
                    {...champ("numeroRccm")}
                  />
                </>
              )}
            </div>
          </Card>
        </div>

        <div className={styles.actionFlottante}>
          <Button type="submit" loading={enregistrement} size="lg">
            <Save size={16} />
            Enregistrer les modifications
          </Button>
        </div>
      </form>
    </div>
  );
}