"use client";

import { useEffect, useState } from "react";
import { AdminPageHeader } from "@/components/admin/admin-ui";
import { toast } from "@/components/ui/toast";
import {
  DEFAULT_CMS_CONFIG,
  type CMSBrandingConfig,
  type CMSConfig,
  type CMSFaqItem,
  type CMSLandingContent,
} from "@/lib/cms";

type TabKey = "landing" | "faqs" | "branding";

export default function AdminCMSPage() {
  const [activeTab, setActiveTab] = useState<TabKey>("landing");
  const [config, setConfig] = useState<CMSConfig>(DEFAULT_CMS_CONFIG);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  // New FAQ Form State
  const [newQuestion, setNewQuestion] = useState("");
  const [newAnswer, setNewAnswer] = useState("");
  const [isAddingFaq, setIsAddingFaq] = useState(false);

  useEffect(() => {
    fetch("/api/admin/cms", { credentials: "include", cache: "no-store" })
      .then(async (res) => {
        if (!res.ok) return null;
        return res.json();
      })
      .then((data: { ok: boolean; config?: CMSConfig } | null) => {
        if (data?.config) {
          setConfig(data.config);
        }
      })
      .catch(() => {
        // Fall back gracefully to defaults
      })
      .finally(() => setLoading(false));
  }, []);

  const handleLandingChange = (field: keyof CMSLandingContent, value: string) => {
    setConfig((prev) => ({
      ...prev,
      landing: { ...prev.landing, [field]: value },
    }));
  };

  const handleBrandingChange = (field: keyof CMSBrandingConfig, value: string) => {
    setConfig((prev) => ({
      ...prev,
      branding: { ...prev.branding, [field]: value },
    }));
  };

  const handleFaqChange = (id: string, field: "question" | "answer", value: string) => {
    setConfig((prev) => ({
      ...prev,
      faqs: prev.faqs.map((faq) => (faq.id === id ? { ...faq, [field]: value } : faq)),
    }));
  };

  const handleDeleteFaq = (id: string) => {
    setConfig((prev) => ({
      ...prev,
      faqs: prev.faqs.filter((faq) => faq.id !== id),
    }));
  };

  const handleAddFaq = () => {
    if (!newQuestion.trim() || !newAnswer.trim()) return;
    const newFaq: CMSFaqItem = {
      id: `faq-${Date.now()}`,
      question: newQuestion.trim(),
      answer: newAnswer.trim(),
    };
    setConfig((prev) => ({
      ...prev,
      faqs: [...prev.faqs, newFaq],
    }));
    setNewQuestion("");
    setNewAnswer("");
    setIsAddingFaq(false);
  };

  const handleMoveFaq = (index: number, direction: "up" | "down") => {
    const targetIndex = direction === "up" ? index - 1 : index + 1;
    if (targetIndex < 0 || targetIndex >= config.faqs.length) return;
    const updated = [...config.faqs];
    const [moved] = updated.splice(index, 1);
    updated.splice(targetIndex, 0, moved);
    setConfig((prev) => ({ ...prev, faqs: updated }));
  };

  const handleResetDefaults = () => {
    if (confirm("Reset all content and branding back to system defaults?")) {
      setConfig(DEFAULT_CMS_CONFIG);
      toast.info("Reset to defaults", {
        description: "Click 'Save Changes' to publish these defaults live.",
      });
    }
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      const res = await fetch("/api/admin/cms", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify(config),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to save CMS changes.");
      toast.success("CMS configuration saved!", {
        description: "Content and branding published live.",
      });
    } catch (err: unknown) {
      toast.error("Error saving CMS content", {
        description: err instanceof Error ? err.message : "Failed to save CMS changes.",
      });
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="flex flex-col space-y-6 pb-12">
      <AdminPageHeader
        eyebrow="Content & Branding (CMS)"
        title="Live platform content, made easy."
        description="Update homepage banners, manage FAQ accordions, and adjust brand palette tokens in real-time."
        action={
          <div className="flex items-center gap-2.5">
            <button
              type="button"
              onClick={handleResetDefaults}
              className="rounded-xl border border-slate-200/80 bg-white px-3.5 py-2 text-xs font-semibold text-slate-600 shadow-xs transition hover:border-slate-300 hover:text-slate-900"
            >
              Reset Defaults
            </button>
            <button
              type="button"
              onClick={handleSave}
              disabled={saving || loading}
              className="flex items-center gap-1.5 rounded-xl bg-[#1D4ED8] px-4 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-[#1e40af] disabled:opacity-50"
            >
              <span className="material-symbols-outlined text-[16px]">
                {saving ? "sync" : "save"}
              </span>
              {saving ? "Saving..." : "Save & Publish"}
            </button>
          </div>
        }
      />

      {/* Tabs Row */}
      <div className="flex flex-wrap items-center gap-1.5 rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xs">
        {[
          { id: "landing", label: "Landing Page Copy", icon: "auto_stories" },
          { id: "faqs", label: `FAQ Manager (${config.faqs.length})`, icon: "quiz" },
          { id: "branding", label: "Branding & Theme", icon: "palette" },
        ].map((tab) => (
          <button
            key={tab.id}
            type="button"
            onClick={() => setActiveTab(tab.id as TabKey)}
            className={`flex items-center gap-2 rounded-xl px-4 py-2 text-xs font-semibold transition-all ${
              activeTab === tab.id
                ? "bg-[#0D1B2A] text-white shadow-xs"
                : "bg-transparent text-slate-600 hover:bg-slate-100 hover:text-[#0D1B2A]"
            }`}
          >
            <span className="material-symbols-outlined text-[18px]">{tab.icon}</span>
            {tab.label}
          </button>
        ))}
      </div>

      {/* TAB 1: LANDING PAGE COPY */}
      {activeTab === "landing" && (
        <div className="space-y-6">
          {/* Hero Section Card */}
          <div className="rounded-[2rem] border border-white/70 bg-white/55 p-6 shadow-sm backdrop-blur-xl sm:p-8">
            <div className="flex items-center gap-2 text-xs font-extrabold uppercase tracking-wider text-[#F97316]">
              <span className="material-symbols-outlined text-[18px]">looks_one</span>
              Section 1 · Hero Headline & Copy
            </div>
            <h2 className="mt-1 text-2xl font-extrabold tracking-tight text-[#0D1B2A]">
              Main Public Banner
            </h2>

            <div className="mt-6 grid gap-5">
              <div>
                <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                  Hero Top Badge
                </label>
                <input
                  type="text"
                  value={config.landing.heroBadge}
                  onChange={(e) => handleLandingChange("heroBadge", e.target.value)}
                  className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                  placeholder="e.g. COMMUNITY SPORTS REINVENTED"
                />
              </div>

              <div>
                <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                  Hero Main Headline
                </label>
                <input
                  type="text"
                  value={config.landing.heroHeadline}
                  onChange={(e) => handleLandingChange("heroHeadline", e.target.value)}
                  className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-base font-bold outline-none focus:border-[#1D4ED8]"
                  placeholder="e.g. Play Today. Local, Safe & Effortless."
                />
              </div>

              <div>
                <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                  Hero Subheading Description
                </label>
                <textarea
                  rows={3}
                  value={config.landing.heroSubheading}
                  onChange={(e) => handleLandingChange("heroSubheading", e.target.value)}
                  className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                  placeholder="Provide a welcoming description for parents and players..."
                />
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                <div>
                  <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                    Primary CTA Button Text
                  </label>
                  <input
                    type="text"
                    value={config.landing.heroPrimaryCtaText}
                    onChange={(e) => handleLandingChange("heroPrimaryCtaText", e.target.value)}
                    className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-2.5 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                  />
                </div>
                <div>
                  <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                    Secondary CTA Button Text
                  </label>
                  <input
                    type="text"
                    value={config.landing.heroSecondaryCtaText}
                    onChange={(e) => handleLandingChange("heroSecondaryCtaText", e.target.value)}
                    className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-2.5 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* About / Safety Section Card */}
          <div className="rounded-[2rem] border border-white/70 bg-white/55 p-6 shadow-sm backdrop-blur-xl sm:p-8">
            <div className="flex items-center gap-2 text-xs font-extrabold uppercase tracking-wider text-emerald-600">
              <span className="material-symbols-outlined text-[18px]">looks_two</span>
              Section 2 · About Us & Safety Card
            </div>
            <h2 className="mt-1 text-2xl font-extrabold tracking-tight text-[#0D1B2A]">
              Trust & Privacy Panel
            </h2>

            <div className="mt-6 grid gap-5">
              <div>
                <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                  About Section Badge
                </label>
                <input
                  type="text"
                  value={config.landing.aboutBadge}
                  onChange={(e) => handleLandingChange("aboutBadge", e.target.value)}
                  className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                />
              </div>

              <div>
                <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                  About Section Headline
                </label>
                <input
                  type="text"
                  value={config.landing.aboutHeadline}
                  onChange={(e) => handleLandingChange("aboutHeadline", e.target.value)}
                  className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-base font-bold outline-none focus:border-[#1D4ED8]"
                />
              </div>

              <div>
                <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                  About Description
                </label>
                <textarea
                  rows={3}
                  value={config.landing.aboutDescription}
                  onChange={(e) => handleLandingChange("aboutDescription", e.target.value)}
                  className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                />
              </div>

              <div className="mt-2 border-t border-slate-200/80 pt-4">
                <p className="text-xs font-bold uppercase tracking-wider text-slate-500">
                  Glassmorphism Telemetry Metrics (4 Cards)
                </p>
                <div className="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                  <div className="rounded-2xl border border-slate-200/80 bg-white/70 p-3.5">
                    <label className="block text-[10px] font-bold text-slate-500">Metric 1 Value</label>
                    <input
                      type="text"
                      value={config.landing.stat1Value}
                      onChange={(e) => handleLandingChange("stat1Value", e.target.value)}
                      className="mt-1 w-full rounded-xl bg-white px-2.5 py-1.5 text-sm font-bold"
                    />
                    <label className="mt-2 block text-[10px] font-bold text-slate-500">Metric 1 Label</label>
                    <input
                      type="text"
                      value={config.landing.stat1Label}
                      onChange={(e) => handleLandingChange("stat1Label", e.target.value)}
                      className="mt-1 w-full rounded-xl bg-white px-2.5 py-1.5 text-xs"
                    />
                  </div>

                  <div className="rounded-2xl border border-slate-200/80 bg-white/70 p-3.5">
                    <label className="block text-[10px] font-bold text-slate-500">Metric 2 Value</label>
                    <input
                      type="text"
                      value={config.landing.stat2Value}
                      onChange={(e) => handleLandingChange("stat2Value", e.target.value)}
                      className="mt-1 w-full rounded-xl bg-white px-2.5 py-1.5 text-sm font-bold"
                    />
                    <label className="mt-2 block text-[10px] font-bold text-slate-500">Metric 2 Label</label>
                    <input
                      type="text"
                      value={config.landing.stat2Label}
                      onChange={(e) => handleLandingChange("stat2Label", e.target.value)}
                      className="mt-1 w-full rounded-xl bg-white px-2.5 py-1.5 text-xs"
                    />
                  </div>

                  <div className="rounded-2xl border border-slate-200/80 bg-white/70 p-3.5">
                    <label className="block text-[10px] font-bold text-slate-500">Metric 3 Value</label>
                    <input
                      type="text"
                      value={config.landing.stat3Value}
                      onChange={(e) => handleLandingChange("stat3Value", e.target.value)}
                      className="mt-1 w-full rounded-xl bg-white px-2.5 py-1.5 text-sm font-bold"
                    />
                    <label className="mt-2 block text-[10px] font-bold text-slate-500">Metric 3 Label</label>
                    <input
                      type="text"
                      value={config.landing.stat3Label}
                      onChange={(e) => handleLandingChange("stat3Label", e.target.value)}
                      className="mt-1 w-full rounded-xl bg-white px-2.5 py-1.5 text-xs"
                    />
                  </div>

                  <div className="rounded-2xl border border-slate-200/80 bg-white/70 p-3.5">
                    <label className="block text-[10px] font-bold text-slate-500">Metric 4 Value</label>
                    <input
                      type="text"
                      value={config.landing.stat4Value}
                      onChange={(e) => handleLandingChange("stat4Value", e.target.value)}
                      className="mt-1 w-full rounded-xl bg-white px-2.5 py-1.5 text-sm font-bold"
                    />
                    <label className="mt-2 block text-[10px] font-bold text-slate-500">Metric 4 Label</label>
                    <input
                      type="text"
                      value={config.landing.stat4Label}
                      onChange={(e) => handleLandingChange("stat4Label", e.target.value)}
                      className="mt-1 w-full rounded-xl bg-white px-2.5 py-1.5 text-xs"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* TAB 2: FAQ MANAGER */}
      {activeTab === "faqs" && (
        <div className="space-y-6">
          <div className="flex flex-wrap items-center justify-between gap-4 rounded-[2rem] border border-white/70 bg-white/55 p-6 shadow-sm backdrop-blur-xl">
            <div>
              <h2 className="text-2xl font-extrabold tracking-tight text-[#0D1B2A]">
                Frequently Asked Questions
              </h2>
              <p className="mt-1 text-sm text-slate-500">
                Manage the questions and detailed answers shown in the public accordion.
              </p>
            </div>
            <button
              type="button"
              onClick={() => setIsAddingFaq(true)}
              className="flex items-center gap-2 rounded-full bg-[#0D1B2A] px-5 py-2.5 text-xs font-extrabold text-white shadow-md transition hover:bg-[#253241]"
            >
              <span className="material-symbols-outlined text-[18px]">add</span>
              Add New Question
            </button>
          </div>

          {/* New FAQ Form */}
          {isAddingFaq && (
            <div className="rounded-2xl border-2 border-[#1D4ED8] bg-white p-6 shadow-md sm:p-8">
              <div className="flex items-center justify-between">
                <h3 className="text-base font-bold text-[#0D1B2A]">New FAQ Item</h3>
                <button
                  type="button"
                  onClick={() => setIsAddingFaq(false)}
                  className="rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700"
                >
                  <span className="material-symbols-outlined text-[20px]">close</span>
                </button>
              </div>
              <div className="mt-4 space-y-4">
                <div>
                  <label className="mb-1 block text-xs font-semibold text-slate-500">Question</label>
                  <input
                    type="text"
                    value={newQuestion}
                    onChange={(e) => setNewQuestion(e.target.value)}
                    placeholder="e.g. How do I register multiple children?"
                    className="w-full rounded-xl border border-slate-200/80 bg-white px-4 py-2.5 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                  />
                </div>
                <div>
                  <label className="mb-1 block text-xs font-semibold text-slate-500">Answer</label>
                  <textarea
                    rows={3}
                    value={newAnswer}
                    onChange={(e) => setNewAnswer(e.target.value)}
                    placeholder="Provide a clear, helpful answer..."
                    className="w-full rounded-xl border border-slate-200/80 bg-white px-4 py-2.5 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                  />
                </div>
                <div className="flex justify-end gap-2.5 pt-2">
                  <button
                    type="button"
                    onClick={() => setIsAddingFaq(false)}
                    className="rounded-xl border border-slate-200/80 px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="button"
                    onClick={handleAddFaq}
                    className="rounded-xl bg-[#1D4ED8] px-5 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-[#1e40af]"
                  >
                    Add Question
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* List of FAQs */}
          <div className="space-y-4">
            {config.faqs.map((faq, index) => (
              <div
                key={faq.id}
                className="rounded-[2rem] border border-white/70 bg-white/55 p-5 shadow-sm backdrop-blur-xl sm:p-6"
              >
                <div className="flex items-start justify-between gap-4">
                  <div className="flex items-center gap-3">
                    <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[#0D1B2A]/10 text-xs font-extrabold text-[#0D1B2A]">
                      {index + 1}
                    </span>
                    <span className="text-xs font-bold text-[#758293]">ID: {faq.id}</span>
                  </div>

                  <div className="flex items-center gap-1">
                    <button
                      type="button"
                      onClick={() => handleMoveFaq(index, "up")}
                      disabled={index === 0}
                      title="Move Up"
                      className="grid h-8 w-8 place-items-center rounded-lg border border-slate-200/80 bg-white text-slate-500 transition hover:bg-[#0D1B2A] hover:text-white disabled:opacity-30"
                    >
                      <span className="material-symbols-outlined text-[18px]">arrow_upward</span>
                    </button>
                    <button
                      type="button"
                      onClick={() => handleMoveFaq(index, "down")}
                      disabled={index === config.faqs.length - 1}
                      title="Move Down"
                      className="grid h-8 w-8 place-items-center rounded-lg border border-slate-200/80 bg-white text-slate-500 transition hover:bg-[#0D1B2A] hover:text-white disabled:opacity-30"
                    >
                      <span className="material-symbols-outlined text-[18px]">arrow_downward</span>
                    </button>
                    <button
                      type="button"
                      onClick={() => handleDeleteFaq(faq.id)}
                      title="Delete FAQ"
                      className="grid h-8 w-8 place-items-center rounded-lg border border-red-200 bg-red-50 text-red-600 transition hover:bg-red-600 hover:text-white"
                    >
                      <span className="material-symbols-outlined text-[18px]">delete</span>
                    </button>
                  </div>
                </div>

                <div className="mt-4 space-y-3">
                  <div>
                    <label className="mb-1 block text-xs font-bold text-slate-500">Question</label>
                    <input
                      type="text"
                      value={faq.question}
                      onChange={(e) => handleFaqChange(faq.id, "question", e.target.value)}
                      className="w-full rounded-xl border border-slate-200/80 bg-white px-4 py-2.5 text-sm font-semibold outline-none focus:border-[#1D4ED8]"
                    />
                  </div>
                  <div>
                    <label className="mb-1 block text-xs font-bold text-slate-500">Answer</label>
                    <textarea
                      rows={3}
                      value={faq.answer}
                      onChange={(e) => handleFaqChange(faq.id, "answer", e.target.value)}
                      className="w-full rounded-xl border border-slate-200/80 bg-white px-4 py-2.5 text-sm font-normal leading-relaxed outline-none focus:border-[#1D4ED8]"
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* TAB 3: BRANDING & THEME */}
      {activeTab === "branding" && (
        <div className="rounded-[2rem] border border-white/70 bg-white/55 p-6 shadow-sm backdrop-blur-xl sm:p-8">
          <div className="flex items-center gap-2 text-xs font-extrabold uppercase tracking-wider text-[#F97316]">
            <span className="material-symbols-outlined text-[18px]">palette</span>
            Theme Tokens & Branding
          </div>
          <h2 className="mt-1 text-2xl font-extrabold tracking-tight text-[#0D1B2A]">
            Platform Visual Identity
          </h2>

          <div className="mt-6 grid gap-6 sm:grid-cols-2">
            <div>
              <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                Brand Name
              </label>
              <input
                type="text"
                value={config.branding.brandName}
                onChange={(e) => handleBrandingChange("brandName", e.target.value)}
                className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-base font-extrabold tracking-tight outline-none focus:border-[#1D4ED8]"
              />
            </div>

            <div>
              <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                Brand Tagline
              </label>
              <input
                type="text"
                value={config.branding.brandTagline}
                onChange={(e) => handleBrandingChange("brandTagline", e.target.value)}
                className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-sm font-medium outline-none focus:border-[#1D4ED8]"
              />
            </div>

            <div>
              <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                Primary Dark Color
              </label>
              <div className="flex items-center gap-3">
                <input
                  type="color"
                  value={config.branding.primaryColor}
                  onChange={(e) => handleBrandingChange("primaryColor", e.target.value)}
                  className="h-11 w-14 cursor-pointer rounded-xl border border-slate-200/80 bg-white p-1"
                />
                <input
                  type="text"
                  value={config.branding.primaryColor}
                  onChange={(e) => handleBrandingChange("primaryColor", e.target.value)}
                  className="w-full rounded-xl border border-slate-200/80 bg-white px-4 py-2.5 font-mono text-sm uppercase outline-none focus:border-[#1D4ED8]"
                />
              </div>
            </div>

            <div>
              <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                Vibrant Accent Color
              </label>
              <div className="flex items-center gap-3">
                <input
                  type="color"
                  value={config.branding.accentColor}
                  onChange={(e) => handleBrandingChange("accentColor", e.target.value)}
                  className="h-11 w-14 cursor-pointer rounded-xl border border-slate-200/80 bg-white p-1"
                />
                <input
                  type="text"
                  value={config.branding.accentColor}
                  onChange={(e) => handleBrandingChange("accentColor", e.target.value)}
                  className="w-full rounded-xl border border-slate-200/80 bg-white px-4 py-2.5 font-mono text-sm uppercase outline-none focus:border-[#1D4ED8]"
                />
              </div>
            </div>

            <div className="sm:col-span-2">
              <label className="mb-1.5 block text-xs font-bold uppercase tracking-wider text-slate-500">
                Announcement Banner Text
              </label>
              <input
                type="text"
                value={config.branding.announcementText}
                onChange={(e) => handleBrandingChange("announcementText", e.target.value)}
                className="w-full rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-sm font-medium outline-none focus:border-[#1D4ED8]"
                placeholder="e.g. Autumn 2026 Community Sessions Now Open"
              />
            </div>
          </div>

          {/* Live Preview Box */}
          <div className="mt-8 rounded-2xl border border-slate-200/80 bg-gradient-to-br from-white/90 to-white/50 p-6">
            <p className="text-xs font-bold uppercase tracking-wider text-slate-500">Live Preview Swatch</p>
            <div className="mt-4 flex flex-wrap items-center gap-4">
              <span
                className="rounded-full px-4 py-2 text-xs font-extrabold uppercase tracking-wider text-white shadow-sm"
                style={{ backgroundColor: config.branding.primaryColor }}
              >
                {config.branding.brandName}
              </span>
              <span
                className="rounded-full px-4 py-2 text-xs font-extrabold uppercase tracking-wider text-white shadow-sm"
                style={{ backgroundColor: config.branding.accentColor }}
              >
                Accent Action Button
              </span>
              <span className="text-xs font-bold text-slate-500">
                {config.branding.announcementText}
              </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}