xtablo-source/ui/src/components/EmbedConfigModal.tsx

import { Button } from "@ui/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@ui/components/ui/dialog";
import { Label } from "@ui/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@ui/components/ui/select";
import { CopyButton } from "@ui/components/ui/clipboard";
import { useState } from "react";
import { TypographyMuted } from "@ui/components/ui/typography";

type ColorVariant = "black" | "white" | "blue" | "purple" | "green" | "orange" | "red";

interface EmbedConfig {
  backgroundVariant: ColorVariant;
  buttonVariant: ColorVariant;
}

interface EmbedConfigModalProps {
  isOpen: boolean;
  onClose: () => void;
  baseEmbedUrl: string;
}

export function EmbedConfigModal({ isOpen, onClose, baseEmbedUrl }: EmbedConfigModalProps) {
  const [embedConfig, setEmbedConfig] = useState<EmbedConfig>({
    backgroundVariant: "purple",
    buttonVariant: "purple",
  });

  const getEmbedUrl = () => {
    const params = new URLSearchParams({
      backgroundVariant: embedConfig.backgroundVariant,
      buttonVariant: embedConfig.buttonVariant,
    });
    return `${baseEmbedUrl}?${params.toString()}`;
  };

  const generateEmbedCode = () => {
    const embedUrl = getEmbedUrl();

    return `<iframe 
  src="${embedUrl}" 
  width="1130" 
  height="700" 
  frameborder="0" 
  style="border: none; border-radius: 8px;"
></iframe>`;
  };

  const colorOptions: { value: ColorVariant; label: string; color: string }[] = [
    { value: "black", label: "Noir", color: "bg-gray-900" },
    { value: "white", label: "Blanc", color: "bg-white" },
    { value: "blue", label: "Bleu", color: "bg-blue-600" },
    { value: "purple", label: "Violet", color: "bg-purple-600" },
    { value: "green", label: "Vert", color: "bg-green-600" },
    { value: "orange", label: "Orange", color: "bg-orange-600" },
    { value: "red", label: "Rouge", color: "bg-red-600" },
  ];

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Configurer l'intégration</DialogTitle>
        </DialogHeader>

        <div className="space-y-6 overflow-hidden">
          {/* Configuration Section */}
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Couleur de fond</Label>
              <Select
                value={embedConfig.backgroundVariant}
                onValueChange={(value) =>
                  setEmbedConfig({ ...embedConfig, backgroundVariant: value as ColorVariant })
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {colorOptions.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      <div className="flex items-center gap-2">
                        <div className={`w-4 h-4 rounded ${option.color}`}></div>
                        <span>{option.label}</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label>Couleur des boutons</Label>
              <Select
                value={embedConfig.buttonVariant}
                onValueChange={(value) =>
                  setEmbedConfig({ ...embedConfig, buttonVariant: value as ColorVariant })
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {colorOptions.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      <div className="flex items-center gap-2">
                        <div className={`w-4 h-4 rounded ${option.color}`}></div>
                        <span>{option.label}</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* Preview Link */}
          <div className="space-y-2 pt-4 border-t">
            <Label>Lien d'aperçu</Label>
            <div className="flex gap-2">
              <input
                type="text"
                readOnly
                value={getEmbedUrl()}
                className="flex-1 min-w-0 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden text-ellipsis"
              />
              <Button
                variant="outline"
                className="flex-shrink-0"
                onClick={() => window.open(getEmbedUrl(), "_blank")}
              >
                Aperçu
              </Button>
            </div>
          </div>

          {/* Embed Code */}
          <div className="space-y-2 min-w-0">
            <Label>Code d'intégration</Label>
            <TypographyMuted className="text-xs">
              Copiez ce code pour intégrer le formulaire de réservation sur votre site web
            </TypographyMuted>
            <div className="relative min-w-0">
              <div className="overflow-auto max-w-full">
                <pre className="p-4 pr-16 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-xs whitespace-pre-wrap break-words w-full">
                  <code className="break-all">{generateEmbedCode()}</code>
                </pre>
              </div>
              <div className="absolute top-2 right-2">
                <CopyButton
                  copyValue={generateEmbedCode()}
                  label="Copier"
                  labelAfterCopied="Copié"
                  variant="outline"
                  size="sm"
                />
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            Fermer
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}