"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Check, ChevronLeft, ChevronRight, Eye, Upload, FileText, Sparkles, Sun } from "lucide-react";
import { supabase } from "@/lib/supabase";
import { formatPrice } from "@/lib/format";

interface LensOffer {
  id: string;
  name: string;
  slug: string;
  price: number;
  description: string;
  sort_order: number;
}

interface LensOption {
  id: string;
  name: string;
  slug: string;
  price: number;
  description: string;
  available_for_offers: string[];
  sort_order: number;
}

interface PrescriptionData {
  vision_type: "loin" | "pres";
  right_sphere: string;
  right_cylinder: string;
  right_axis: string;
  left_sphere: string;
  left_cylinder: string;
  left_axis: string;
  pd_right: string;
  pd_left: string;
}

interface LensConfig {
  offer: LensOffer | null;
  options: LensOption[];
  prescription: PrescriptionData;
  hasValidPrescription: boolean | null;
  sunColor: string;
}

const STEPS = [
  { id: "verre", label: "Verre", icon: Eye },
  { id: "ordonnance", label: "Ordonnance", icon: FileText },
  { id: "correction", label: "Correction", icon: Sparkles },
  { id: "documents", label: "Documents", icon: Upload },
  { id: "offre", label: "Offre", icon: Sun },
  { id: "options", label: "Options", icon: Sparkles },
];

const SPHERE_VALUES: string[] = [];
for (let i = -4; i <= 4; i += 0.25) {
  SPHERE_VALUES.push(i > 0 ? `+${i.toFixed(2)}` : i.toFixed(2));
}

const CYLINDER_VALUES: string[] = [];
for (let i = -2; i <= 2; i += 0.25) {
  CYLINDER_VALUES.push(i > 0 ? `+${i.toFixed(2)}` : i.toFixed(2));
}

const AXIS_VALUES: string[] = [];
for (let i = 0; i <= 180; i += 1) {
  AXIS_VALUES.push(String(i));
}

const PD_VALUES: string[] = [];
for (let i = 27; i <= 35; i += 0.5) {
  PD_VALUES.push(i.toFixed(1));
}

interface LensConfiguratorProps {
  productType: string;
  onConfigChange: (config: LensConfig | null, totalExtra: number) => void;
}

export function LensConfigurator({ productType, onConfigChange }: LensConfiguratorProps) {
  const [enabled, setEnabled] = useState(false);
  const [step, setStep] = useState(0);
  const [offers, setOffers] = useState<LensOffer[]>([]);
  const [options, setOptions] = useState<LensOption[]>([]);
  const [prescriptionFile, setPrescriptionFile] = useState<File | null>(null);
  const [pupilDistancePhoto, setPupilDistancePhoto] = useState<File | null>(null);
  const [config, setConfig] = useState<LensConfig>({
    offer: null,
    options: [],
    prescription: {
      vision_type: "loin",
      right_sphere: "0.00",
      right_cylinder: "",
      right_axis: "",
      left_sphere: "0.00",
      left_cylinder: "",
      left_axis: "",
      pd_right: "",
      pd_left: "",
    },
    hasValidPrescription: null,
    sunColor: "",
  });

  useEffect(() => {
    supabase.from("lens_offers").select("*").eq("is_active", true).order("sort_order").then(({ data }) => {
      if (data) setOffers(data);
    });
    supabase.from("lens_options").select("*").eq("is_active", true).order("sort_order").then(({ data }) => {
      if (data) setOptions(data);
    });
  }, []);

  useEffect(() => {
    if (!enabled) {
      onConfigChange(null, 0);
      return;
    }
    const offerPrice = config.offer?.price || 0;
    const optionsPrice = config.options.reduce((sum, o) => sum + o.price, 0);
    onConfigChange(config, offerPrice + optionsPrice);
  }, [enabled, config, onConfigChange]);

  function updatePrescription(field: string, value: string) {
    setConfig((c) => ({
      ...c,
      prescription: { ...c.prescription, [field]: value },
    }));
  }

  function toggleOption(option: LensOption) {
    setConfig((c) => {
      const exists = c.options.find((o) => o.id === option.id);
      return {
        ...c,
        options: exists
          ? c.options.filter((o) => o.id !== option.id)
          : [...c.options, option],
      };
    });
  }

  function getAvailableOptions(): LensOption[] {
    if (!config.offer) return [];
    return options.filter((o) =>
      o.available_for_offers.includes(config.offer!.slug)
    );
  }

  const filteredSteps = STEPS.filter((s) => {
    if (s.id === "options" && (!config.offer || getAvailableOptions().length === 0)) return false;
    if (s.id === "documents" && config.hasValidPrescription !== true) return false;
    if (productType === "soleil" && s.id === "correction") return false;
    return true;
  });

  if (productType === "accessoire") return null;

  return (
    <div className="border border-brand-sand/50 rounded-xl overflow-hidden mt-6">
      {/* Toggle */}
      <button
        onClick={() => setEnabled(!enabled)}
        className="w-full flex items-center justify-between px-5 py-4 bg-brand-cream/40 hover:bg-brand-cream/70 transition-colors"
      >
        <span className="text-sm font-medium text-brand-black">
          Je veux configurer mes verres
        </span>
        <div className={`w-11 h-6 rounded-full transition-colors relative ${enabled ? "bg-brand-gold" : "bg-brand-sand"}`}>
          <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform ${enabled ? "translate-x-[22px]" : "translate-x-0.5"}`} />
        </div>
      </button>

      {enabled && (
        <div className="border-t border-brand-sand/30">
          {/* Step indicators */}
          <div className="flex border-b border-brand-sand/30 overflow-x-auto">
            {filteredSteps.map((s, i) => {
              const Icon = s.icon;
              const isActive = i === step;
              const isPast = i < step;
              return (
                <button
                  key={s.id}
                  onClick={() => setStep(i)}
                  className={`flex items-center gap-2 px-4 py-3 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${
                    isActive
                      ? "border-brand-gold text-brand-gold bg-brand-gold/5"
                      : isPast
                      ? "border-transparent text-brand-black"
                      : "border-transparent text-brand-charcoal/50"
                  }`}
                >
                  <div className={`w-5 h-5 rounded-full flex items-center justify-center ${
                    isPast ? "bg-green-100" : isActive ? "bg-brand-gold/10" : "bg-brand-sand/50"
                  }`}>
                    {isPast ? (
                      <Check size={10} className="text-green-600" />
                    ) : (
                      <Icon size={10} className={isActive ? "text-brand-gold" : "text-brand-charcoal/40"} />
                    )}
                  </div>
                  <span className="hidden sm:inline">{s.label}</span>
                </button>
              );
            })}
          </div>

          {/* Step content */}
          <div className="p-5">
            {filteredSteps[step]?.id === "verre" && (
              <StepVerre
                value={config.prescription.vision_type}
                onChange={(v) => updatePrescription("vision_type", v)}
              />
            )}

            {filteredSteps[step]?.id === "ordonnance" && (
              <StepOrdonnance
                value={config.hasValidPrescription}
                onChange={(v) => setConfig((c) => ({ ...c, hasValidPrescription: v }))}
              />
            )}

            {filteredSteps[step]?.id === "correction" && (
              <StepCorrection
                prescription={config.prescription}
                onChange={updatePrescription}
              />
            )}

            {filteredSteps[step]?.id === "documents" && (
              <StepDocuments
                prescriptionFile={prescriptionFile}
                pupilDistancePhoto={pupilDistancePhoto}
                onPrescriptionChange={setPrescriptionFile}
                onPupilDistancePhotoChange={setPupilDistancePhoto}
              />
            )}

            {filteredSteps[step]?.id === "offre" && (
              <StepOffre
                offers={offers}
                selected={config.offer}
                onSelect={(o) => setConfig((c) => ({ ...c, offer: o, options: [] }))}
                productType={productType}
              />
            )}

            {filteredSteps[step]?.id === "options" && (
              <StepOptions
                availableOptions={getAvailableOptions()}
                selected={config.options}
                onToggle={toggleOption}
                offerSlug={config.offer?.slug || ""}
                sunColor={config.sunColor}
                onSunColorChange={(c) => setConfig((cfg) => ({ ...cfg, sunColor: c }))}
              />
            )}

            {/* Navigation */}
            <div className="flex justify-between mt-6 pt-4 border-t border-brand-sand/20">
              <button
                onClick={() => setStep(Math.max(0, step - 1))}
                disabled={step === 0}
                className="flex items-center gap-1 px-4 py-2 text-sm text-brand-charcoal hover:text-brand-black disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft size={14} />
                Precedent
              </button>
              {step < filteredSteps.length - 1 ? (
                <button
                  onClick={() => setStep(step + 1)}
                  className="flex items-center gap-1 px-4 py-2 text-sm font-medium text-brand-gold hover:text-brand-black transition-colors"
                >
                  Suivant
                  <ChevronRight size={14} />
                </button>
              ) : (
                <div className="flex items-center gap-2 text-sm font-medium text-green-600">
                  <Check size={14} />
                  Configuration terminee
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function StepVerre({ value, onChange }: { value: string; onChange: (v: "loin" | "pres") => void }) {
  const visionTypes = [
    {
      id: "loin" as const,
      label: "Vision de loin",
      desc: "Vous portez principalement vos lunettes pour voir de loin, par exemple, pour conduire ou regarder la television.",
    },
    {
      id: "pres" as const,
      label: "Vision de pres",
      desc: "Vous portez principalement vos lunettes pour voir de pres, par exemple, les livres ou ecrans digitaux.",
    },
  ];

  return (
    <div>
      <h3 className="text-sm font-semibold text-brand-black mb-1">
        Choisissez votre type de verre
      </h3>
      <p className="text-xs text-brand-charcoal/60 mb-4">
        Verres unifocaux inclus, les verres multifocaux/progressifs disponibles uniquement en magasin.
      </p>
      <div className="grid gap-3">
        {visionTypes.map((vt) => (
          <button
            key={vt.id}
            onClick={() => onChange(vt.id)}
            className={`text-left p-4 rounded-lg border-2 transition-all ${
              value === vt.id
                ? "border-brand-gold bg-brand-gold/5"
                : "border-brand-sand/50 hover:border-brand-sand"
            }`}
          >
            <div className="flex items-center gap-3">
              <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                value === vt.id ? "border-brand-gold" : "border-brand-sand"
              }`}>
                {value === vt.id && <div className="w-2 h-2 rounded-full bg-brand-gold" />}
              </div>
              <span className="text-sm font-medium text-brand-black">{vt.label}</span>
            </div>
            <p className="text-xs text-brand-charcoal/60 mt-2 ml-7">{vt.desc}</p>
          </button>
        ))}
      </div>
    </div>
  );
}

function StepOrdonnance({ value, onChange }: { value: boolean | null; onChange: (v: boolean) => void }) {
  const choices = [
    {
      id: true,
      label: "J'ai une ordonnance valide",
      desc: "Je renseigne les informations de mon ordonnance. Le nom doit correspondre entre mon ordonnance et mes informations de commande.",
    },
    {
      id: false,
      label: "Je ne suis pas certain(e)",
      desc: "Vous avez une ordonnance mais avez l'impression que votre vue a change, vous pouvez nous contacter via notre formulaire de contact.",
    },
  ];

  return (
    <div>
      <h3 className="text-sm font-semibold text-brand-black mb-1">
        Avez-vous une ordonnance valide ?
      </h3>
      <p className="text-xs text-brand-charcoal/60 mb-4">
        Votre ordonnance est valide si : 5 ans (16-42 ans) ou 3 ans (+42 ans).
      </p>
      <div className="grid gap-3">
        {choices.map((c) => (
          <button
            key={String(c.id)}
            onClick={() => onChange(c.id)}
            className={`text-left p-4 rounded-lg border-2 transition-all ${
              value === c.id
                ? "border-brand-gold bg-brand-gold/5"
                : "border-brand-sand/50 hover:border-brand-sand"
            }`}
          >
            <div className="flex items-center gap-3">
              <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                value === c.id ? "border-brand-gold" : "border-brand-sand"
              }`}>
                {value === c.id && <div className="w-2 h-2 rounded-full bg-brand-gold" />}
              </div>
              <span className="text-sm font-medium text-brand-black">{c.label}</span>
            </div>
            <p className="text-xs text-brand-charcoal/60 mt-2 ml-7">{c.desc}</p>
          </button>
        ))}
      </div>
    </div>
  );
}

function StepCorrection({ prescription, onChange }: { prescription: PrescriptionData; onChange: (field: string, value: string) => void }) {
  return (
    <div>
      <h3 className="text-sm font-semibold text-brand-black mb-1">
        Renseignez vos corrections
      </h3>
      <p className="text-xs text-brand-charcoal/60 mb-5">
        Si votre cylindre et votre axe ne sont pas renseignes sur votre ordonnance, laissez les champs vides.
      </p>

      {/* Right eye */}
      <div className="mb-5">
        <h4 className="text-xs font-semibold text-blue-600 mb-3 uppercase tracking-wide">
          Oeil droit (OD)
        </h4>
        <div className="grid grid-cols-3 gap-3">
          <div>
            <label className="block text-[10px] font-medium text-brand-charcoal/70 mb-1">Sphere</label>
            <select
              value={prescription.right_sphere}
              onChange={(e) => onChange("right_sphere", e.target.value)}
              className="w-full px-2 py-2 text-xs border border-brand-sand rounded-lg focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30"
            >
              {SPHERE_VALUES.map((v) => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-[10px] font-medium text-brand-charcoal/70 mb-1">Cylindre</label>
            <select
              value={prescription.right_cylinder}
              onChange={(e) => onChange("right_cylinder", e.target.value)}
              className="w-full px-2 py-2 text-xs border border-brand-sand rounded-lg focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30"
            >
              <option value="">-</option>
              {CYLINDER_VALUES.map((v) => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-[10px] font-medium text-brand-charcoal/70 mb-1">Axe</label>
            <select
              value={prescription.right_axis}
              onChange={(e) => onChange("right_axis", e.target.value)}
              className="w-full px-2 py-2 text-xs border border-brand-sand rounded-lg focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30"
            >
              <option value="">-</option>
              {AXIS_VALUES.map((v) => <option key={v} value={v}>{v}°</option>)}
            </select>
          </div>
        </div>
      </div>

      {/* Left eye */}
      <div className="mb-5">
        <h4 className="text-xs font-semibold text-blue-600 mb-3 uppercase tracking-wide">
          Oeil gauche (OG)
        </h4>
        <div className="grid grid-cols-3 gap-3">
          <div>
            <label className="block text-[10px] font-medium text-brand-charcoal/70 mb-1">Sphere</label>
            <select
              value={prescription.left_sphere}
              onChange={(e) => onChange("left_sphere", e.target.value)}
              className="w-full px-2 py-2 text-xs border border-brand-sand rounded-lg focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30"
            >
              {SPHERE_VALUES.map((v) => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-[10px] font-medium text-brand-charcoal/70 mb-1">Cylindre</label>
            <select
              value={prescription.left_cylinder}
              onChange={(e) => onChange("left_cylinder", e.target.value)}
              className="w-full px-2 py-2 text-xs border border-brand-sand rounded-lg focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30"
            >
              <option value="">-</option>
              {CYLINDER_VALUES.map((v) => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-[10px] font-medium text-brand-charcoal/70 mb-1">Axe</label>
            <select
              value={prescription.left_axis}
              onChange={(e) => onChange("left_axis", e.target.value)}
              className="w-full px-2 py-2 text-xs border border-brand-sand rounded-lg focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30"
            >
              <option value="">-</option>
              {AXIS_VALUES.map((v) => <option key={v} value={v}>{v}°</option>)}
            </select>
          </div>
        </div>
      </div>

      {/* PD */}
      <div>
        <h4 className="text-xs font-semibold text-brand-black mb-3">Ecart pupillaire</h4>
        <p className="text-[10px] text-brand-charcoal/60 mb-3">
          Laissez vide si non renseigne sur votre ordonnance. Vous pourrez transmettre une photo a l&apos;etape suivante.
        </p>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-[10px] font-medium text-brand-charcoal/70 mb-1">OD (mm)</label>
            <select
              value={prescription.pd_right}
              onChange={(e) => onChange("pd_right", e.target.value)}
              className="w-full px-2 py-2 text-xs border border-brand-sand rounded-lg focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30"
            >
              <option value="">-</option>
              {PD_VALUES.map((v) => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-[10px] font-medium text-brand-charcoal/70 mb-1">OG (mm)</label>
            <select
              value={prescription.pd_left}
              onChange={(e) => onChange("pd_left", e.target.value)}
              className="w-full px-2 py-2 text-xs border border-brand-sand rounded-lg focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30"
            >
              <option value="">-</option>
              {PD_VALUES.map((v) => <option key={v} value={v}>{v}</option>)}
            </select>
          </div>
        </div>
      </div>
    </div>
  );
}

function StepDocuments({
  prescriptionFile,
  pupilDistancePhoto,
  onPrescriptionChange,
  onPupilDistancePhotoChange,
}: {
  prescriptionFile: File | null;
  pupilDistancePhoto: File | null;
  onPrescriptionChange: (file: File | null) => void;
  onPupilDistancePhotoChange: (file: File | null) => void;
}) {
  return (
    <div>
      <h3 className="text-sm font-semibold text-brand-black mb-1">
        Envoyer vos documents
      </h3>
      <p className="text-xs text-brand-charcoal/60 mb-1">
        Joignez votre ordonnance
      </p>
      <p className="text-xs text-brand-charcoal/60 mb-5 leading-relaxed">
        Veuillez nous transmettre une photo pour votre écart pupillaire uniquement si vous ne
        l&apos;avez pas renseigné à l&apos;étape d&apos;avant. Découvrez{" "}
        <Link
          href="/ecart-pupillaire"
          className="font-medium text-brand-gold underline underline-offset-2 hover:text-brand-black transition-colors"
        >
          ici
        </Link>{" "}
        comment prendre la bonne photo.
      </p>

      <div className="grid gap-4">
        <DocumentUploadField
          id="prescription-document"
          label="Ordonnance"
          required
          accept=".pdf,image/*"
          file={prescriptionFile}
          onChange={onPrescriptionChange}
        />
        <DocumentUploadField
          id="pupil-distance-photo"
          label="Joignez une photo pour votre écart pupillaire"
          accept="image/*"
          file={pupilDistancePhoto}
          onChange={onPupilDistancePhotoChange}
        />
      </div>
    </div>
  );
}

function DocumentUploadField({
  id,
  label,
  required = false,
  accept,
  file,
  onChange,
}: {
  id: string;
  label: string;
  required?: boolean;
  accept: string;
  file: File | null;
  onChange: (file: File | null) => void;
}) {
  return (
    <div>
      <label htmlFor={id} className="block text-xs font-medium text-brand-black mb-2">
        {required && <span className="text-brand-gold mr-1" aria-hidden="true">*</span>}
        {label}
      </label>
      <label
        htmlFor={id}
        className="flex min-h-20 cursor-pointer items-center gap-3 rounded-lg border border-dashed border-brand-sand px-4 py-3 transition-colors hover:border-brand-gold hover:bg-brand-gold/5"
      >
        <Upload size={18} className="shrink-0 text-brand-gold" />
        <span className="min-w-0 text-xs text-brand-charcoal/70">
          {file ? file.name : "Choisir un fichier"}
        </span>
      </label>
      <input
        id={id}
        type="file"
        required={required}
        accept={accept}
        onChange={(event) => onChange(event.target.files?.[0] ?? null)}
        className="sr-only"
      />
    </div>
  );
}

function StepOffre({ offers, selected, onSelect, productType }: {
  offers: LensOffer[];
  selected: LensOffer | null;
  onSelect: (o: LensOffer) => void;
  productType: string;
}) {
  const filtered = productType === "soleil"
    ? offers.filter((o) => o.slug === "sun")
    : offers.filter((o) => o.slug !== "sun");

  return (
    <div>
      <h3 className="text-sm font-semibold text-brand-black mb-1">
        Offres disponibles
      </h3>
      <p className="text-xs text-brand-charcoal/60 mb-4">
        Verres francais de la marque Novacel
      </p>
      <div className="grid gap-3">
        {filtered.map((offer) => (
          <button
            key={offer.id}
            onClick={() => onSelect(offer)}
            className={`text-left p-4 rounded-lg border-2 transition-all ${
              selected?.id === offer.id
                ? "border-brand-gold bg-brand-gold/5"
                : "border-brand-sand/50 hover:border-brand-sand"
            }`}
          >
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                  selected?.id === offer.id ? "border-brand-gold" : "border-brand-sand"
                }`}>
                  {selected?.id === offer.id && <div className="w-2 h-2 rounded-full bg-brand-gold" />}
                </div>
                <span className="text-sm font-medium text-brand-black">{offer.name}</span>
              </div>
              <span className="text-sm font-semibold text-brand-gold">
                +{formatPrice(offer.price)}
              </span>
            </div>
            <p className="text-xs text-brand-charcoal/60 mt-2 ml-7 leading-relaxed">
              {offer.description}
            </p>
          </button>
        ))}
      </div>
    </div>
  );
}

function StepOptions({ availableOptions, selected, onToggle, offerSlug, sunColor, onSunColorChange }: {
  availableOptions: LensOption[];
  selected: LensOption[];
  onToggle: (o: LensOption) => void;
  offerSlug: string;
  sunColor: string;
  onSunColorChange: (c: string) => void;
}) {
  const sunColors = ["Brun", "Gris", "Gris vert"];
  const showSunColors = offerSlug === "sun";

  return (
    <div>
      <h3 className="text-sm font-semibold text-brand-black mb-4">
        Options supplementaires
      </h3>

      {showSunColors && (
        <div className="mb-5">
          <h4 className="text-xs font-medium text-brand-charcoal mb-3">Couleur des verres</h4>
          <div className="flex gap-3">
            {sunColors.map((color) => (
              <button
                key={color}
                onClick={() => onSunColorChange(color)}
                className={`px-4 py-2 text-xs rounded-lg border-2 transition-all ${
                  sunColor === color
                    ? "border-brand-gold bg-brand-gold/5 text-brand-black font-medium"
                    : "border-brand-sand/50 text-brand-charcoal hover:border-brand-sand"
                }`}
              >
                {color}
              </button>
            ))}
          </div>
        </div>
      )}

      {availableOptions.length > 0 ? (
        <div className="grid gap-3">
          {availableOptions.map((option) => {
            const isSelected = selected.some((o) => o.id === option.id);
            return (
              <button
                key={option.id}
                onClick={() => onToggle(option)}
                className={`text-left p-4 rounded-lg border-2 transition-all ${
                  isSelected
                    ? "border-brand-gold bg-brand-gold/5"
                    : "border-brand-sand/50 hover:border-brand-sand"
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className={`w-4 h-4 rounded border flex items-center justify-center ${
                      isSelected ? "bg-brand-gold border-brand-gold" : "border-brand-sand"
                    }`}>
                      {isSelected && <Check size={10} className="text-white" />}
                    </div>
                    <span className="text-sm font-medium text-brand-black">{option.name}</span>
                  </div>
                  <span className="text-sm font-semibold text-brand-gold">
                    +{formatPrice(option.price)}
                  </span>
                </div>
                <p className="text-xs text-brand-charcoal/60 mt-2 ml-7 leading-relaxed">
                  {option.description}
                </p>
              </button>
            );
          })}
        </div>
      ) : (
        !showSunColors && (
          <p className="text-sm text-brand-charcoal/50">
            Aucune option supplementaire disponible pour cette offre.
          </p>
        )
      )}
    </div>
  );
}