import React, { useState } from "react";
import { CompanyInfoElement } from "../../types/elements";
import { NumericPropertyInput } from "../ui/NumericPropertyInput";
import { ColorPropertyInput } from "../ui/ColorPropertyInput";
import { getEditorFeatureFlags, getPdfBuilderData } from "../../utils/editorFeatures";

interface CompanyInfoPropertiesProps {
  element: CompanyInfoElement;
  onChange: (elementId: string, property: string, value: unknown) => void;
  activeTab: {
    [key: string]: "fonctionnalites" | "personnalisation" | "positionnement";
  };
  setActiveTab: (tabs: {
    [key: string]: "fonctionnalites" | "personnalisation" | "positionnement";
  }) => void;
}

// Composant Toggle personnalisé
const Toggle = ({
  checked,
  onChange,
  label,
  description,
}: {
  checked: boolean;
  onChange: (checked: boolean) => void;
  label: string;
  description: string;
}) => (
  <div style={{ marginBottom: "12px" }}>
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: "6px",
      }}
    >
      <label
        style={{
          fontSize: "12px",
          fontWeight: "bold",
          color: "#333",
          flex: 1,
        }}
      >
        {label}
      </label>
      <div
        onClick={() => onChange(!checked)}
        style={{
          position: "relative",
          width: "44px",
          height: "24px",
          backgroundColor: checked ? "#007bff" : "#ccc",
          borderRadius: "12px",
          cursor: "pointer",
          transition: "background-color 0.2s ease",
          border: "none",
        }}
      >
        <div
          style={{
            position: "absolute",
            top: "2px",
            left: checked ? "22px" : "2px",
            width: "20px",
            height: "20px",
            backgroundColor: "white",
            borderRadius: "50%",
            transition: "left 0.2s ease",
            boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
          }}
        />
      </div>
    </div>
    <div
      style={{
        fontSize: "11px",
        color: "#666",
        lineHeight: "1.1",
      }}
    >
      {description}
    </div>
  </div>
);

export function CompanyInfoProperties({
  element,
  onChange,
  activeTab,
  setActiveTab,
}: CompanyInfoPropertiesProps) {
  const companyCurrentTab = activeTab[element.id] || "fonctionnalites";
  const setCompanyCurrentTab = (
    tab: "fonctionnalites" | "personnalisation" | "positionnement",
  ) => {
    setActiveTab({ ...activeTab, [element.id]: tab });
  };
  const pdfBuilderData = getPdfBuilderData();
  const { canUseEditorThemes } = getEditorFeatureFlags();

  // Helper pour normaliser le padding en nombre (gère les objets padding complexes)
  const _normalizePadding = (
    value:
      | number
      | { top?: number; right?: number; bottom?: number; left?: number }
      | undefined,
    defaultValue: number = 12,
  ): number => {
    if (typeof value === "number") return value;
    if (typeof value === "object" && value !== null) {
      // Si c'est un objet, on prend la moyenne ou la première valeur disponible
      return (
        value.top ?? value.left ?? value.right ?? value.bottom ?? defaultValue
      );
    }
    return defaultValue;
  };

  // Fonction pour générer le contenu des infos entreprise depuis les propriétés
  const generateCompanyContent = (props?: any) => {
    const config = props || element;
    const companyParts: string[] = [];

    // Récupérer les données d'entreprise depuis window
    const pluginCompany = pdfBuilderData.company || {};

    // Helper pour valider une valeur
    const isValidValue = (value: any): boolean => {
      return value && value.toString().trim() !== "" && value !== "Non indiqué";
    };

    // Nom de l'entreprise (header)
    if (config.showCompanyName !== false) {
      const companyName = config.companyName || pluginCompany.name || "";
      if (isValidValue(companyName)) {
        const _headerFontSize = config.headerFontSize || config.fontSize || 14;
        const _headerFontWeight = config.headerFontWeight || "bold";
        const _headerColor =
          config.headerTextColor || config.textColor || "#000000";
        companyParts.push(`Entreprise: ${companyName}`);
      }
    }

    // Adresse
    if (config.showAddress !== false) {
      const address = config.companyAddress || pluginCompany.address || "";
      const city = config.companyCity || pluginCompany.city || "";
      if (isValidValue(address)) {
        let fullAddress = address;
        if (isValidValue(city)) fullAddress += `, ${city}`;
        companyParts.push(fullAddress);
      }
    }

    // Téléphone
    if (config.showPhone !== false) {
      const phone = config.companyPhone || pluginCompany.phone || "";
      if (isValidValue(phone)) {
        companyParts.push(`Tél: ${phone}`);
      }
    }

    // Email
    if (config.showEmail !== false) {
      const email = config.companyEmail || pluginCompany.email || "";
      if (isValidValue(email)) {
        companyParts.push(`Email: ${email}`);
      }
    }

    // SIRET
    if (config.showSiret !== false) {
      const siret = config.companySiret || pluginCompany.siret || "";
      if (isValidValue(siret)) {
        companyParts.push(`SIRET: ${siret}`);
      }
    }

    // TVA
    if (config.showVat !== false) {
      const tva = config.companyTva || pluginCompany.vat || "";
      if (isValidValue(tva)) {
        companyParts.push(`TVA: ${tva}`);
      }
    }

    // RCS
    if (config.showRcs !== false) {
      const rcs = config.companyRcs || pluginCompany.rcs || "";
      if (isValidValue(rcs)) {
        companyParts.push(`RCS: ${rcs}`);
      }
    }

    // Capital
    if (config.showCapital !== false) {
      const capital = config.companyCapital || pluginCompany.capital || "";
      if (isValidValue(capital)) {
        companyParts.push(`Capital: ${capital} €`);
      }
    }

    // Assembler avec séparateur (newline pour vertical)
    return companyParts.join("\n");
  };

  // Helper pour toggler et régénérer le contenu
  const handlePropertyChangeWithContentUpdate = (
    property: string,
    value: any,
  ) => {
    onChange(element.id, property, value);

    // Si c'est une propriété qui affecte le contenu, régénérer et sauvegarder
    if (
      [
        "showCompanyName",
        "showAddress",
        "showPhone",
        "showEmail",
        "showSiret",
        "showVat",
        "showRcs",
        "showCapital",
      ].includes(property)
    ) {
      const newConfig = { ...element, [property]: value };
      const generatedContent = generateCompanyContent(newConfig);
      if (generatedContent && generatedContent.trim()) {
        onChange(element.id, "content", generatedContent);
      }
    }
  };

  // État pour les accordéons de police
  const [fontAccordions, setFontAccordions] = useState({
    headerFont: false, // Accordéon du nom de l'entreprise fermé par défaut
    bodyFont: false, // Accordéon des informations fermé par défaut
    layout: true, // Accordéon disposition ouvert par défaut
    themes: false, // Accordéon thèmes fermé par défaut
    colors: false, // Accordéon couleurs fermé par défaut
  });

  const toggleAccordion = (accordion: "headerFont" | "bodyFont") => {
    setFontAccordions((prev) => ({
      ...prev,
      [accordion]: !prev[accordion],
    }));
  };

  const companyThemes = [
    {
      id: "corporate",
      name: "Corporate",
      preview: (
        <div
          style={{
            width: "100%",
            height: "35px",
            border: "1px solid #1f2937",
            borderRadius: "4px",
            backgroundColor: "#ffffff",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            gap: "1px",
          }}
        >
          <div
            style={{
              width: "90%",
              height: "3px",
              backgroundColor: "#1f2937",
            }}
          ></div>
          <div
            style={{
              width: "75%",
              height: "2px",
              backgroundColor: "#6b7280",
            }}
          ></div>
          <div
            style={{
              width: "60%",
              height: "2px",
              backgroundColor: "#9ca3af",
            }}
          ></div>
        </div>
      ),
      styles: {
        backgroundColor: "#ffffff",
        borderColor: "#1f2937",
        textColor: "#374151",
        headerTextColor: "#111827",
      },
    },
    {
      id: "modern",
      name: "Moderne",
      preview: (
        <div
          style={{
            width: "100%",
            height: "35px",
            border: "1px solid #3b82f6",
            borderRadius: "4px",
            backgroundColor: "#ffffff",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            gap: "1px",
          }}
        >
          <div
            style={{
              width: "90%",
              height: "3px",
              backgroundColor: "#3b82f6",
            }}
          ></div>
          <div
            style={{
              width: "75%",
              height: "2px",
              backgroundColor: "#60a5fa",
            }}
          ></div>
          <div
            style={{
              width: "60%",
              height: "2px",
              backgroundColor: "#93c5fd",
            }}
          ></div>
        </div>
      ),
      styles: {
        backgroundColor: "#ffffff",
        borderColor: "#3b82f6",
        textColor: "#1e40af",
        headerTextColor: "#1e3a8a",
      },
    },
    {
      id: "elegant",
      name: "Élégant",
      preview: (
        <div
          style={{
            width: "100%",
            height: "35px",
            border: "1px solid #8b5cf6",
            borderRadius: "4px",
            backgroundColor: "#ffffff",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            gap: "1px",
          }}
        >
          <div
            style={{
              width: "90%",
              height: "3px",
              backgroundColor: "#8b5cf6",
            }}
          ></div>
          <div
            style={{
              width: "75%",
              height: "2px",
              backgroundColor: "#a78bfa",
            }}
          ></div>
          <div
            style={{
              width: "60%",
              height: "2px",
              backgroundColor: "#c4b5fd",
            }}
          ></div>
        </div>
      ),
      styles: {
        backgroundColor: "#ffffff",
        borderColor: "#8b5cf6",
        textColor: "#6d28d9",
        headerTextColor: "#581c87",
      },
    },
    {
      id: "minimal",
      name: "Minimal",
      preview: (
        <div
          style={{
            width: "100%",
            height: "35px",
            border: "1px solid #e5e7eb",
            borderRadius: "4px",
            backgroundColor: "#ffffff",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            gap: "1px",
          }}
        >
          <div
            style={{
              width: "90%",
              height: "2px",
              backgroundColor: "#374151",
            }}
          ></div>
          <div
            style={{
              width: "75%",
              height: "2px",
              backgroundColor: "#6b7280",
            }}
          ></div>
          <div
            style={{
              width: "60%",
              height: "2px",
              backgroundColor: "#9ca3af",
            }}
          ></div>
        </div>
      ),
      styles: {
        backgroundColor: "#ffffff",
        borderColor: "#e5e7eb",
        textColor: "#374151",
        headerTextColor: "#111827",
      },
    },
    {
      id: "professional",
      name: "Professionnel",
      preview: (
        <div
          style={{
            width: "100%",
            height: "35px",
            border: "1px solid #059669",
            borderRadius: "4px",
            backgroundColor: "#ffffff",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            gap: "1px",
          }}
        >
          <div
            style={{
              width: "90%",
              height: "3px",
              backgroundColor: "#059669",
            }}
          ></div>
          <div
            style={{
              width: "75%",
              height: "2px",
              backgroundColor: "#10b981",
            }}
          ></div>
          <div
            style={{
              width: "60%",
              height: "2px",
              backgroundColor: "#34d399",
            }}
          ></div>
        </div>
      ),
      styles: {
        backgroundColor: "#ffffff",
        borderColor: "#059669",
        textColor: "#065f46",
        headerTextColor: "#064e3b",
      },
    },
    {
      id: "classic",
      name: "Classique",
      preview: (
        <div
          style={{
            width: "100%",
            height: "35px",
            border: "1px solid #92400e",
            borderRadius: "4px",
            backgroundColor: "#ffffff",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            gap: "1px",
          }}
        >
          <div
            style={{
              width: "90%",
              height: "3px",
              backgroundColor: "#92400e",
            }}
          ></div>
          <div
            style={{
              width: "75%",
              height: "2px",
              backgroundColor: "#d97706",
            }}
          ></div>
          <div
            style={{
              width: "60%",
              height: "2px",
              backgroundColor: "#f59e0b",
            }}
          ></div>
        </div>
      ),
      styles: {
        backgroundColor: "#ffffff",
        borderColor: "#92400e",
        textColor: "#78350f",
        headerTextColor: "#451a03",
      },
    },
  ];

  return (
    <>
      {/* Système d'onglets pour Company Info */}
      <div
        style={{
          display: "flex",
          marginBottom: "12px",
          borderBottom: "2px solid #ddd",
          gap: "2px",
          flexWrap: "wrap",
        }}
      >
        <button
          onClick={() => setCompanyCurrentTab("fonctionnalites")}
          style={{
            flex: "1 1 30%",
            padding: "8px 6px",
            backgroundColor:
              companyCurrentTab === "fonctionnalites" ? "#007bff" : "#f0f0f0",
            color: companyCurrentTab === "fonctionnalites" ? "#fff" : "#333",
            border: "none",
            cursor: "pointer",
            fontSize: "11px",
            fontWeight: "bold",
            borderRadius: "3px 3px 0 0",
            minWidth: "0",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
          title="Fonctionnalités"
        >
          Fonctionnalités
        </button>
        <button
          onClick={() => setCompanyCurrentTab("personnalisation")}
          style={{
            flex: "1 1 30%",
            padding: "8px 6px",
            backgroundColor:
              companyCurrentTab === "personnalisation" ? "#007bff" : "#f0f0f0",
            color: companyCurrentTab === "personnalisation" ? "#fff" : "#333",
            border: "none",
            cursor: "pointer",
            fontSize: "11px",
            fontWeight: "bold",
            borderRadius: "3px 3px 0 0",
            minWidth: "0",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
          title="Personnalisation"
        >
          Personnalisation
        </button>
        <button
          onClick={() => setCompanyCurrentTab("positionnement")}
          style={{
            flex: "1 1 30%",
            padding: "8px 6px",
            backgroundColor:
              companyCurrentTab === "positionnement" ? "#007bff" : "#f0f0f0",
            color: companyCurrentTab === "positionnement" ? "#fff" : "#333",
            border: "none",
            cursor: "pointer",
            fontSize: "11px",
            fontWeight: "bold",
            borderRadius: "3px 3px 0 0",
            minWidth: "0",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
          title="Positionnement"
        >
          Positionnement
        </button>
      </div>

      {/* Onglet Fonctionnalités */}
      {companyCurrentTab === "fonctionnalites" && (
        <>
          {/* Section Structure des informations */}
          <div style={{ marginBottom: "16px" }}>
            <div
              style={{
                fontSize: "12px",
                fontWeight: "bold",
                color: "#333",
                marginBottom: "8px",
                padding: "4px 8px",
                backgroundColor: "#f8f9fa",
                borderRadius: "3px",
                border: "1px solid #e9ecef",
              }}
            >
              Structure des informations
            </div>
            <div style={{ paddingLeft: "8px" }}>
              <Toggle
                checked={element.showBackground !== false}
                onChange={(checked) =>
                  onChange(element.id, "showBackground", checked)
                }
                label="Afficher le fond"
                description="Affiche un fond coloré derrière les informations"
              />

              <Toggle
                checked={element.showBorders !== false}
                onChange={(checked) =>
                  onChange(element.id, "showBorders", checked)
                }
                label="Afficher les bordures"
                description="Affiche les bordures autour des sections"
              />
            </div>
          </div>

          {/* Section Informations générales */}
          <div style={{ marginBottom: "16px" }}>
            <div
              style={{
                fontSize: "12px",
                fontWeight: "bold",
                color: "#333",
                marginBottom: "8px",
                padding: "4px 8px",
                backgroundColor: "#f8f9fa",
                borderRadius: "3px",
                border: "1px solid #e9ecef",
              }}
            >
              Informations générales
            </div>
            <div style={{ paddingLeft: "8px" }}>
              <Toggle
                checked={element.showCompanyName !== false}
                onChange={(checked) =>
                  handlePropertyChangeWithContentUpdate(
                    "showCompanyName",
                    checked,
                  )
                }
                label="Afficher le nom de l'entreprise"
                description="Nom de l'entreprise"
              />
            </div>
          </div>

          {/* Section Coordonnées */}
          <div style={{ marginBottom: "16px" }}>
            <div
              style={{
                fontSize: "12px",
                fontWeight: "bold",
                color: "#333",
                marginBottom: "8px",
                padding: "4px 8px",
                backgroundColor: "#f8f9fa",
                borderRadius: "3px",
                border: "1px solid #e9ecef",
              }}
            >
              Coordonnées
            </div>
            <div style={{ paddingLeft: "8px" }}>
              <Toggle
                checked={element.showAddress !== false}
                onChange={(checked) =>
                  handlePropertyChangeWithContentUpdate("showAddress", checked)
                }
                label="Afficher l'adresse"
                description="Adresse complète de l'entreprise"
              />

              <Toggle
                checked={element.showPhone !== false}
                onChange={(checked) =>
                  handlePropertyChangeWithContentUpdate("showPhone", checked)
                }
                label="Afficher le téléphone"
                description="Numéro de téléphone"
              />

              <Toggle
                checked={element.showEmail !== false}
                onChange={(checked) =>
                  handlePropertyChangeWithContentUpdate("showEmail", checked)
                }
                label="Afficher l'email"
                description="Adresse email de l'entreprise"
              />
            </div>
          </div>

          {/* Section Informations légales */}
          <div style={{ marginBottom: "16px" }}>
            <div
              style={{
                fontSize: "12px",
                fontWeight: "bold",
                color: "#333",
                marginBottom: "8px",
                padding: "4px 8px",
                backgroundColor: "#f8f9fa",
                borderRadius: "3px",
                border: "1px solid #e9ecef",
              }}
            >
              Informations légales
            </div>
            <div style={{ paddingLeft: "8px" }}>
              <Toggle
                checked={element.showSiret !== false}
                onChange={(checked) =>
                  onChange(element.id, "showSiret", checked)
                }
                label="Afficher le numéro SIRET"
                description="Numéro SIRET de l'entreprise"
              />

              <Toggle
                checked={element.showVat !== false}
                onChange={(checked) => onChange(element.id, "showVat", checked)}
                label="Afficher le numéro TVA"
                description="Numéro TVA de l'entreprise"
              />

              <Toggle
                checked={element.showRcs !== false}
                onChange={(checked) => onChange(element.id, "showRcs", checked)}
                label="Afficher le RCS"
                description="Registre du Commerce et des Sociétés"
              />

              <Toggle
                checked={element.showCapital !== false}
                onChange={(checked) =>
                  onChange(element.id, "showCapital", checked)
                }
                label="Afficher le capital social"
                description="Montant du capital social de l'entreprise"
              />
            </div>
          </div>
        </>
      )}

      {/* Onglet Personnalisation */}
      {companyCurrentTab === "personnalisation" && (
        <>
          {/* Accordéon Disposition */}
          <div
            style={{
              marginBottom: "16px",
              border: "1px solid #e9ecef",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              onClick={() =>
                setFontAccordions((prev) => ({ ...prev, layout: !prev.layout }))
              }
              style={{
                padding: "12px",
                backgroundColor: "#f8f9fa",
                cursor: "pointer",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                borderBottom: fontAccordions.layout
                  ? "1px solid #e9ecef"
                  : "none",
              }}
            >
              <h4
                style={{
                  margin: "0",
                  fontSize: "13px",
                  fontWeight: "bold",
                  color: "#495057",
                }}
              >
                Disposition
              </h4>
              <span
                style={{
                  fontSize: "12px",
                  color: "#6c757d",
                  transform: fontAccordions.layout
                    ? "rotate(180deg)"
                    : "rotate(0deg)",
                  transition: "transform 0.2s ease",
                }}
              >
                ▼
              </span>
            </div>

            {fontAccordions.layout && (
              <div style={{ padding: "12px", backgroundColor: "#ffffff" }}>
                <div style={{ marginBottom: "8px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Type de disposition
                  </label>
                  <select
                    value={(element.layout as string) || "vertical"}
                    onChange={(e) =>
                      onChange(element.id, "layout", e.target.value)
                    }
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  >
                    <option value="vertical">Verticale</option>
                    <option value="horizontal">Horizontale</option>
                    <option value="compact">Compacte</option>
                  </select>
                </div>

                <div style={{ marginBottom: "0" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Alignement du texte
                  </label>
                  <select
                    value={element.textAlign || "left"}
                    onChange={(e) =>
                      onChange(element.id, "textAlign", e.target.value)
                    }
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  >
                    <option value="left">Gauche</option>
                    <option value="center">Centre</option>
                    <option value="right">Droite</option>
                  </select>
                </div>

                {/* Alignement vertical */}
                <div style={{ marginBottom: "12px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Alignement vertical
                  </label>
                  <select
                    value={element.verticalAlign || "top"}
                    onChange={(e) =>
                      onChange(element.id, "verticalAlign", e.target.value)
                    }
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  >
                    <option value="top">Haut</option>
                    <option value="middle">Milieu</option>
                    <option value="bottom">Bas</option>
                  </select>
                </div>

                {/* Padding top */}
                <div style={{ marginBottom: "12px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Marge supérieure (px)
                  </label>
                  <input
                    type="number"
                    value={element.paddingTop || 8}
                    onChange={(e) =>
                      onChange(
                        element.id,
                        "paddingTop",
                        parseInt(e.target.value) || 0,
                      )
                    }
                    min="0"
                    max="50"
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  />
                </div>

                {/* Padding horizontal */}
                <div style={{ marginBottom: "12px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Marge latérale (px)
                  </label>
                  <input
                    type="number"
                    value={element.paddingHorizontal || 12}
                    onChange={(e) =>
                      onChange(
                        element.id,
                        "paddingHorizontal",
                        parseInt(e.target.value) || 0,
                      )
                    }
                    min="0"
                    max="50"
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  />
                </div>

                {/* Padding bottom */}
                <div style={{ marginBottom: "12px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Marge inférieure (px)
                  </label>
                  <input
                    type="number"
                    value={element.paddingBottom || 12}
                    onChange={(e) =>
                      onChange(
                        element.id,
                        "paddingBottom",
                        parseInt(e.target.value) || 0,
                      )
                    }
                    min="0"
                    max="50"
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  />
                </div>

                {/* Line spacing */}
                <div style={{ marginBottom: "12px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Espacement entre lignes (px)
                  </label>
                  <input
                    type="number"
                    value={element.lineSpacing || 0}
                    onChange={(e) =>
                      onChange(
                        element.id,
                        "lineSpacing",
                        parseInt(e.target.value) || 0,
                      )
                    }
                    min="0"
                    max="20"
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  />
                </div>

                {/* Line-height (CSS) */}
                <div style={{ marginBottom: "12px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Hauteur de ligne (line-height)
                  </label>
                  <input
                    type="number"
                    value={element.lineHeight || 1.4}
                    onChange={(e) =>
                      onChange(
                        element.id,
                        "lineHeight",
                        parseFloat(e.target.value) || 1,
                      )
                    }
                    min="0.5"
                    max="3"
                    step="0.1"
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  />
                  <div
                    style={{
                      fontSize: "10px",
                      color: "#666",
                      marginTop: "4px",
                    }}
                  >
                    Actuel:{" "}
                    {parseFloat(String(element.lineHeight || 1.4)).toFixed(1)}{" "}
                    (Puppeteer uniquement)
                  </div>
                </div>
              </div>
            )}
          </div>

          {canUseEditorThemes && (
            <>
              {/* Accordéon Thèmes prédéfinis */}
              <div
                style={{
                  marginBottom: "16px",
                  border: "1px solid #e9ecef",
                  borderRadius: "4px",
                  overflow: "hidden",
                }}
              >
                <div
                  onClick={() =>
                    setFontAccordions((prev) => ({ ...prev, themes: !prev.themes }))
                  }
                  style={{
                    padding: "12px",
                    backgroundColor: "#f8f9fa",
                    cursor: "pointer",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    borderBottom: fontAccordions.themes
                      ? "1px solid #e9ecef"
                      : "none",
                  }}
                >
                  <h4
                    style={{
                      margin: "0",
                      fontSize: "13px",
                      fontWeight: "bold",
                      color: "#495057",
                    }}
                  >
                    Thèmes prédéfinis
                  </h4>
                  <span
                    style={{
                      fontSize: "12px",
                      color: "#6c757d",
                      transform: fontAccordions.themes
                        ? "rotate(180deg)"
                        : "rotate(0deg)",
                      transition: "transform 0.2s ease",
                    }}
                  >
                    ▼
                  </span>
                </div>

                {fontAccordions.themes && (
                  <div style={{ padding: "12px", backgroundColor: "#ffffff" }}>
                    <div
                      style={{
                        display: "grid",
                        gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
                        gap: "8px",
                        maxHeight: "200px",
                        overflowY: "auto",
                        padding: "4px",
                        border: "1px solid #e0e0e0",
                        borderRadius: "4px",
                        backgroundColor: "#fafafa",
                      }}
                    >
                      {companyThemes.map((theme) => (
                        <div
                          key={theme.id}
                          onClick={() => {
                            // Appliquer le thème et toutes ses couleurs
                            onChange(element.id, "theme", theme.id);
                            onChange(
                              element.id,
                              "backgroundColor",
                              theme.styles.backgroundColor,
                            );
                            onChange(
                              element.id,
                              "borderColor",
                              theme.styles.borderColor,
                            );
                            onChange(
                              element.id,
                              "textColor",
                              theme.styles.textColor,
                            );
                            onChange(
                              element.id,
                              "headerTextColor",
                              theme.styles.headerTextColor,
                            );
                          }}
                          style={{
                            cursor: "pointer",
                            border:
                              element.theme === theme.id
                                ? "2px solid #007bff"
                                : "2px solid transparent",
                            borderRadius: "6px",
                            padding: "6px",
                            backgroundColor: "#ffffff",
                            transition: "all 0.2s ease",
                          }}
                          title={theme.name}
                        >
                          <div
                            style={{
                              fontSize: "10px",
                              fontWeight: "bold",
                              marginBottom: "4px",
                              textAlign: "center",
                            }}
                          >
                            {theme.name}
                          </div>
                          {theme.preview}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </>
          )}

          <hr
            style={{
              margin: "16px 0",
              border: "none",
              borderTop: "1px solid #ddd",
            }}
          />

          {/* Police du nom de l'entreprise - Accordéon */}
          {element.showCompanyName !== false && (
            <div
              style={{
                marginBottom: "16px",
                border: "1px solid #e9ecef",
                borderRadius: "4px",
                overflow: "hidden",
              }}
            >
              <div
                onClick={() => toggleAccordion("headerFont")}
                style={{
                  padding: "12px",
                  backgroundColor: "#f8f9fa",
                  cursor: "pointer",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  borderBottom: fontAccordions.headerFont
                    ? "1px solid #e9ecef"
                    : "none",
                }}
              >
                <h4
                  style={{
                    margin: "0",
                    fontSize: "13px",
                    fontWeight: "bold",
                    color: "#495057",
                  }}
                >
                  Police du nom de l&apos;entreprise
                </h4>
                <span
                  style={{
                    fontSize: "12px",
                    color: "#6c757d",
                    transform: fontAccordions.headerFont
                      ? "rotate(180deg)"
                      : "rotate(0deg)",
                    transition: "transform 0.2s ease",
                  }}
                >
                  ▼
                </span>
              </div>

              {fontAccordions.headerFont && (
                <div style={{ padding: "12px", backgroundColor: "#ffffff" }}>
                  <div style={{ marginBottom: "8px" }}>
                    <NumericPropertyInput
                      label="Taille de police"
                      value={element.headerFontSize}
                      defaultValue={Math.round((element.fontSize || 12) * 1.2)}
                      min={10}
                      max={32}
                      unit="px"
                      onChange={(value) =>
                        onChange(element.id, "headerFontSize", value)
                      }
                    />
                  </div>

                  <div style={{ marginBottom: "8px" }}>
                    <label
                      style={{
                        display: "block",
                        fontSize: "11px",
                        fontWeight: "bold",
                        marginBottom: "4px",
                      }}
                    >
                      Famille de police
                    </label>
                    <select
                      value={
                        element.headerFontFamily ||
                        element.fontFamily ||
                        "Arial"
                      }
                      onChange={(e) =>
                        onChange(element.id, "headerFontFamily", e.target.value)
                      }
                      style={{
                        width: "100%",
                        padding: "4px 8px",
                        border: "1px solid #ccc",
                        borderRadius: "3px",
                        fontSize: "12px",
                      }}
                    >
                      <option value="Arial">Arial</option>
                      <option value="Helvetica">Helvetica</option>
                      <option value="Times New Roman">Times New Roman</option>
                      <option value="Georgia">Georgia</option>
                      <option value="Verdana">Verdana</option>
                      <option value="Tahoma">Tahoma</option>
                      <option value="Trebuchet MS">Trebuchet MS</option>
                      <option value="Calibri">Calibri</option>
                      <option value="Cambria">Cambria</option>
                      <option value="Segoe UI">Segoe UI</option>
                    </select>
                  </div>

                  <div style={{ marginBottom: "8px" }}>
                    <label
                      style={{
                        display: "block",
                        fontSize: "11px",
                        fontWeight: "bold",
                        marginBottom: "4px",
                      }}
                    >
                      Épaisseur de police
                    </label>
                    <select
                      value={element.headerFontWeight || "bold"}
                      onChange={(e) =>
                        onChange(element.id, "headerFontWeight", e.target.value)
                      }
                      style={{
                        width: "100%",
                        padding: "4px 8px",
                        border: "1px solid #ccc",
                        borderRadius: "3px",
                        fontSize: "12px",
                      }}
                    >
                      <option value="normal">Normal (400)</option>
                      <option value="bold">Gras (700)</option>
                      <option value="lighter">Fin (300)</option>
                      <option value="bolder">Très gras (900)</option>
                    </select>
                  </div>

                  <div style={{ marginBottom: "0" }}>
                    <label
                      style={{
                        display: "block",
                        fontSize: "11px",
                        fontWeight: "bold",
                        marginBottom: "4px",
                      }}
                    >
                      Style de police
                    </label>
                    <select
                      value={
                        element.headerFontStyle || element.fontStyle || "normal"
                      }
                      onChange={(e) =>
                        onChange(element.id, "headerFontStyle", e.target.value)
                      }
                      style={{
                        width: "100%",
                        padding: "4px 8px",
                        border: "1px solid #ccc",
                        borderRadius: "3px",
                        fontSize: "12px",
                      }}
                    >
                      <option value="normal">Normal</option>
                      <option value="italic">Italique</option>
                      <option value="oblique">Oblique</option>
                    </select>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Police du corps du texte - Accordéon */}
          <div
            style={{
              marginBottom: "16px",
              border: "1px solid #e9ecef",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              onClick={() => toggleAccordion("bodyFont")}
              style={{
                padding: "12px",
                backgroundColor: "#f8f9fa",
                cursor: "pointer",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                borderBottom: fontAccordions.bodyFont
                  ? "1px solid #e9ecef"
                  : "none",
              }}
            >
              <h4
                style={{
                  margin: "0",
                  fontSize: "13px",
                  fontWeight: "bold",
                  color: "#495057",
                }}
              >
                Police des informations
              </h4>
              <span
                style={{
                  fontSize: "12px",
                  color: "#6c757d",
                  transform: fontAccordions.bodyFont
                    ? "rotate(180deg)"
                    : "rotate(0deg)",
                  transition: "transform 0.2s ease",
                }}
              >
                ▼
              </span>
            </div>

            {fontAccordions.bodyFont && (
              <div style={{ padding: "12px", backgroundColor: "#ffffff" }}>
                <div style={{ marginBottom: "8px" }}>
                  <NumericPropertyInput
                    label="Taille de police"
                    value={element.bodyFontSize}
                    defaultValue={element.fontSize || 12}
                    min={8}
                    max={24}
                    unit="px"
                    onChange={(value) =>
                      onChange(element.id, "bodyFontSize", value)
                    }
                  />
                </div>

                <div style={{ marginBottom: "8px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Famille de police
                  </label>
                  <select
                    value={
                      element.bodyFontFamily || element.fontFamily || "Arial"
                    }
                    onChange={(e) =>
                      onChange(element.id, "bodyFontFamily", e.target.value)
                    }
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  >
                    <option value="Arial">Arial</option>
                    <option value="Helvetica">Helvetica</option>
                    <option value="Times New Roman">Times New Roman</option>
                    <option value="Georgia">Georgia</option>
                    <option value="Verdana">Verdana</option>
                    <option value="Tahoma">Tahoma</option>
                    <option value="Trebuchet MS">Trebuchet MS</option>
                    <option value="Calibri">Calibri</option>
                    <option value="Cambria">Cambria</option>
                    <option value="Segoe UI">Segoe UI</option>
                  </select>
                </div>

                <div style={{ marginBottom: "8px" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Épaisseur de police
                  </label>
                  <select
                    value={
                      element.bodyFontWeight || element.fontWeight || "normal"
                    }
                    onChange={(e) =>
                      onChange(element.id, "bodyFontWeight", e.target.value)
                    }
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  >
                    <option value="normal">Normal (400)</option>
                    <option value="bold">Gras (700)</option>
                    <option value="lighter">Fin (300)</option>
                    <option value="bolder">Très gras (900)</option>
                  </select>
                </div>

                <div style={{ marginBottom: "0" }}>
                  <label
                    style={{
                      display: "block",
                      fontSize: "11px",
                      fontWeight: "bold",
                      marginBottom: "4px",
                    }}
                  >
                    Style de police
                  </label>
                  <select
                    value={
                      element.bodyFontStyle || element.fontStyle || "normal"
                    }
                    onChange={(e) =>
                      onChange(element.id, "bodyFontStyle", e.target.value)
                    }
                    style={{
                      width: "100%",
                      padding: "4px 8px",
                      border: "1px solid #ccc",
                      borderRadius: "3px",
                      fontSize: "12px",
                    }}
                  >
                    <option value="normal">Normal</option>
                    <option value="italic">Italique</option>
                    <option value="oblique">Oblique</option>
                  </select>
                </div>
              </div>
            )}
          </div>

          {/* Accordéon Couleurs */}
          <div
            style={{
              marginBottom: "16px",
              border: "1px solid #e9ecef",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              onClick={() =>
                setFontAccordions((prev) => ({ ...prev, colors: !prev.colors }))
              }
              style={{
                padding: "12px",
                backgroundColor: "#f8f9fa",
                cursor: "pointer",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                borderBottom: fontAccordions.colors
                  ? "1px solid #e9ecef"
                  : "none",
              }}
            >
              <h4
                style={{
                  margin: "0",
                  fontSize: "13px",
                  fontWeight: "bold",
                  color: "#495057",
                }}
              >
                Couleurs
              </h4>
              <span
                style={{
                  fontSize: "12px",
                  color: "#6c757d",
                  transform: fontAccordions.colors
                    ? "rotate(180deg)"
                    : "rotate(0deg)",
                  transition: "transform 0.2s ease",
                }}
              >
                ▼
              </span>
            </div>

            {fontAccordions.colors && (
              <div style={{ padding: "12px", backgroundColor: "#ffffff" }}>
                {element.showBackground !== false && (
                  <div style={{ marginBottom: "8px" }}>
                    <ColorPropertyInput
                      label="Couleur de fond"
                      value={
                        element.backgroundColor === "transparent"
                          ? "#ffffff"
                          : element.backgroundColor || "#ffffff"
                      }
                      defaultValue="#ffffff"
                      onChange={(value) =>
                        onChange(element.id, "backgroundColor", value)
                      }
                    />
                  </div>
                )}

                {element.showBorders !== false && (
                  <div style={{ marginBottom: "8px" }}>
                    <ColorPropertyInput
                      label="Couleur des bordures"
                      value={
                        element.borderColor === "transparent"
                          ? "#e5e7eb"
                          : element.borderColor || "#e5e7eb"
                      }
                      defaultValue="#e5e7eb"
                      onChange={(value) =>
                        onChange(element.id, "borderColor", value)
                      }
                    />
                  </div>
                )}

                {element.showBorders !== false && (
                  <NumericPropertyInput
                    label="Épaisseur de la bordure"
                    value={element.borderWidth}
                    defaultValue={1}
                    min={0.5}
                    max={10}
                    step={0.5}
                    unit="px"
                    onChange={(value) =>
                      onChange(element.id, "borderWidth", value)
                    }
                    description="Épaisseur de la bordure en pixels"
                  />
                )}

                <div style={{ marginBottom: "8px" }}>
                  <ColorPropertyInput
                    label="Couleur du texte d'en-tête"
                    value={
                      (element.headerTextColor as string) ||
                      element.textColor ||
                      "#111827"
                    }
                    defaultValue="#111827"
                    onChange={(value) =>
                      onChange(element.id, "headerTextColor", value)
                    }
                  />
                </div>

                <div style={{ marginBottom: "8px" }}>
                  <ColorPropertyInput
                    label="Couleur du texte du corps"
                    value={element.textColor || "#374151"}
                    defaultValue="#374151"
                    onChange={(value) =>
                      onChange(element.id, "textColor", value)
                    }
                  />
                </div>

                <div style={{ marginBottom: "0" }}>
                  <ColorPropertyInput
                    label="Couleur du texte"
                    value={element.textColor || "#000000"}
                    defaultValue="#000000"
                    onChange={(value) =>
                      onChange(element.id, "textColor", value)
                    }
                  />
                </div>
              </div>
            )}
          </div>
        </>
      )}

      {/* Onglet Positionnement */}
      {companyCurrentTab === "positionnement" && (
        <>
          <div style={{ marginBottom: "12px" }}>
            <label
              style={{
                display: "block",
                fontSize: "12px",
                fontWeight: "bold",
                marginBottom: "4px",
              }}
            >
              Position X: {element.x}px
            </label>
            <input
              type="range"
              min={0}
              max={1000}
              value={element.x}
              onChange={(e) =>
                onChange(element.id, "x", parseInt(e.target.value))
              }
              style={{
                width: "100%",
                height: "6px",
                borderRadius: "3px",
                background: "#ddd",
                outline: "none",
                cursor: "pointer",
              }}
            />
          </div>

          <div style={{ marginBottom: "12px" }}>
            <label
              style={{
                display: "block",
                fontSize: "12px",
                fontWeight: "bold",
                marginBottom: "4px",
              }}
            >
              Position Y: {element.y}px
            </label>
            <input
              type="range"
              min={0}
              max={1000}
              value={element.y}
              onChange={(e) =>
                onChange(element.id, "y", parseInt(e.target.value))
              }
              style={{
                width: "100%",
                height: "6px",
                borderRadius: "3px",
                background: "#ddd",
                outline: "none",
                cursor: "pointer",
              }}
            />
          </div>

          <div style={{ marginBottom: "12px" }}>
            <label
              style={{
                display: "block",
                fontSize: "12px",
                fontWeight: "bold",
                marginBottom: "4px",
              }}
            >
              Largeur: {element.width}px
            </label>
            <input
              type="range"
              min={10}
              max={1000}
              value={element.width}
              onChange={(e) =>
                onChange(element.id, "width", parseInt(e.target.value))
              }
              style={{
                width: "100%",
                height: "6px",
                borderRadius: "3px",
                background: "#ddd",
                outline: "none",
                cursor: "pointer",
              }}
            />
          </div>

          <div style={{ marginBottom: "12px" }}>
            <label
              style={{
                display: "block",
                fontSize: "12px",
                fontWeight: "bold",
                marginBottom: "4px",
              }}
            >
              Hauteur: {element.height}px
            </label>
            <input
              type="range"
              min={10}
              max={1000}
              value={element.height}
              onChange={(e) =>
                onChange(element.id, "height", parseInt(e.target.value))
              }
              style={{
                width: "100%",
                height: "6px",
                borderRadius: "3px",
                background: "#ddd",
                outline: "none",
                cursor: "pointer",
              }}
            />
          </div>
        </>
      )}
    </>
  );
}