import { useState, useEffect } from "react";
import { supabase } from "@/integrations/supabase/client";
import { useToast } from "@/hooks/use-toast";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import { Globe, ExternalLink, Save, Loader2, Image, Palette, Calendar, BookOpen, Copy, FileText, MapPin, Plus, X, Images, Megaphone, LayoutPanelLeft, Type } from "lucide-react";
import ContentBlocksEditor from "@/components/public-content/ContentBlocksEditor";
import type { ContentBlock } from "@/components/public-content/contentBlockTypes";
import { sanitizeBlocks } from "@/components/public-content/contentBlockTypes";
import { PUBLIC_PAGE_FONTS } from "@/components/public-content/PublicPageTheme";

interface Props {
  associationId: string;
  associationName: string;
}

function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-|-$)/g, "");
}

export default function PublicPageSettings({ associationId, associationName }: Props) {
  const { toast } = useToast();
  const db = supabase as any;

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [pageId, setPageId] = useState<string | null>(null);

  const [slug, setSlug] = useState("");
  const [isPublished, setIsPublished] = useState(false);
  const [welcomeMessage, setWelcomeMessage] = useState("");
  const [coverImageUrl, setCoverImageUrl] = useState("");
  const [heroImages, setHeroImages] = useState<string[]>([]);
  const [newHeroImageUrl, setNewHeroImageUrl] = useState("");
  const [accentColor, setAccentColor] = useState("#2563EB");
  const [logoWidth, setLogoWidth] = useState(200);
  const [calendarEnabled, setCalendarEnabled] = useState(false);
  const [bookingEnabled, setBookingEnabled] = useState(false);
  const [documentsEnabled, setDocumentsEnabled] = useState(false);
  const [amenitiesEnabled, setAmenitiesEnabled] = useState(false);
  const [announcementsEnabled, setAnnouncementsEnabled] = useState(false);
  const [customLinks, setCustomLinks] = useState<{ label: string; url: string }[]>([]);
  const [pageTitle, setPageTitle] = useState("");
  const [seoDescription, setSeoDescription] = useState("");
  const [newLinkLabel, setNewLinkLabel] = useState("");
  const [newLinkUrl, setNewLinkUrl] = useState("");
  const [bodyBlocks, setBodyBlocks] = useState<ContentBlock[]>([]);
  const [sidebarBlocks, setSidebarBlocks] = useState<ContentBlock[]>([]);
  const [sidebarEnabled, setSidebarEnabled] = useState(false);
  const [sidebarTitle, setSidebarTitle] = useState("");
  const [bgColor, setBgColor] = useState("#FFFFFF");
  const [sectionBgColor, setSectionBgColor] = useState("#F9FAFB");
  const [textColor, setTextColor] = useState("#111827");
  const [headingColor, setHeadingColor] = useState("#0F172A");
  const [fontFamily, setFontFamily] = useState("Inter");
  const [headingFontFamily, setHeadingFontFamily] = useState("Inter");
  const [footerBgColor, setFooterBgColor] = useState("#111827");
  const [footerTextColor, setFooterTextColor] = useState("#FFFFFF");

  useEffect(() => {
    loadSettings();
  }, [associationId]);

  const loadSettings = async () => {
    setLoading(true);
    const { data } = await db
      .from("association_public_pages")
      .select("*")
      .eq("association_id", associationId)
      .maybeSingle();

    if (data) {
      setPageId(data.id);
      setSlug(data.slug || "");
      setIsPublished(data.is_published || false);
      setWelcomeMessage(data.welcome_message || "");
      setCoverImageUrl(data.cover_image_url || "");
      const imgs = Array.isArray(data.hero_images) ? data.hero_images : [];
      setHeroImages(imgs.filter((u: string) => typeof u === "string" && u.trim()));
      setAccentColor(data.accent_color || "#2563EB");
      setLogoWidth(data.logo_width || 200);
      setPageTitle(data.page_title || "");
      setSeoDescription(data.seo_description || "");
      const mods = typeof data.modules_enabled === "string" ? JSON.parse(data.modules_enabled) : data.modules_enabled;
      setCalendarEnabled(mods?.calendar || false);
      setBookingEnabled(mods?.booking || false);
      setDocumentsEnabled(mods?.documents || false);
      setAmenitiesEnabled(mods?.amenities || false);
      setAnnouncementsEnabled(mods?.announcements || false);
      const links = Array.isArray(data.custom_links) ? data.custom_links : [];
      setCustomLinks(links.filter((l: any) => l?.label && l?.url));
      setBodyBlocks(sanitizeBlocks(data.body_blocks));
      setSidebarBlocks(sanitizeBlocks(data.sidebar_blocks));
      setSidebarEnabled(Boolean(data.sidebar_enabled));
      setSidebarTitle(data.sidebar_title || "");
      setBgColor(data.bg_color || "#FFFFFF");
      setSectionBgColor(data.section_bg_color || "#F9FAFB");
      setTextColor(data.text_color || "#111827");
      setHeadingColor(data.heading_color || "#0F172A");
      setFontFamily(data.font_family || "Inter");
      setHeadingFontFamily(data.heading_font_family || data.font_family || "Inter");
      setFooterBgColor(data.footer_bg_color || "#111827");
      setFooterTextColor(data.footer_text_color || "#FFFFFF");
    } else {
      setSlug(slugify(associationName));
    }
    setLoading(false);
  };

  const handleSave = async () => {
    if (!slug.trim()) {
      toast({ title: "Slug is required", variant: "destructive" });
      return;
    }

    setSaving(true);
    const payload = {
      association_id: associationId,
      slug: slug.trim(),
      is_published: isPublished,
      welcome_message: welcomeMessage || null,
      cover_image_url: coverImageUrl || null,
      hero_images: heroImages,
      accent_color: accentColor,
      logo_width: logoWidth,
      page_title: pageTitle.trim() || null,
      seo_description: seoDescription.trim() || null,
      modules_enabled: { calendar: calendarEnabled, booking: bookingEnabled, documents: documentsEnabled, amenities: amenitiesEnabled, announcements: announcementsEnabled },
      custom_links: customLinks,
      body_blocks: bodyBlocks,
      sidebar_blocks: sidebarBlocks,
      sidebar_enabled: sidebarEnabled,
      sidebar_title: sidebarTitle.trim() || null,
      bg_color: bgColor,
      section_bg_color: sectionBgColor,
      text_color: textColor,
      heading_color: headingColor,
      font_family: fontFamily,
      heading_font_family: headingFontFamily,
      footer_bg_color: footerBgColor,
      footer_text_color: footerTextColor,
      updated_at: new Date().toISOString(),
    };

    let error;
    if (pageId) {
      ({ error } = await db.from("association_public_pages").update(payload).eq("id", pageId));
    } else {
      const res = await db.from("association_public_pages").insert(payload).select().single();
      error = res.error;
      if (res.data) setPageId(res.data.id);
    }

    setSaving(false);
    if (error) {
      toast({ title: "Error saving", description: error.message, variant: "destructive" });
    } else {
      toast({ title: "Public page settings saved" });
    }
  };

  const publicUrl = `${window.location.origin}/community/${slug}`;

  const copyLink = () => {
    navigator.clipboard.writeText(publicUrl);
    toast({ title: "Link copied to clipboard" });
  };

  if (loading) {
    return <div className="flex items-center gap-2 text-muted-foreground text-sm py-6"><Loader2 className="h-4 w-4 animate-spin" /> Loading...</div>;
  }

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-base font-semibold flex items-center gap-2">
            <Globe className="h-5 w-5 text-primary" /> Public Community Page
          </h3>
          <p className="text-sm text-muted-foreground mt-0.5">
            Configure a public-facing page for this association.
          </p>
        </div>
        <Button onClick={handleSave} disabled={saving} size="sm">
          {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
          Save
        </Button>
      </div>

      {/* Publish + Slug */}
      <Card>
        <CardContent className="pt-5 space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <Label className="font-medium">Published</Label>
              <p className="text-xs text-muted-foreground">Make this page visible to the public</p>
            </div>
            <Switch checked={isPublished} onCheckedChange={setIsPublished} />
          </div>

          <div className="space-y-1.5">
            <Label>URL Slug</Label>
            <div className="flex gap-2">
              <div className="flex items-center text-sm text-muted-foreground bg-muted rounded-l-md px-3 border border-r-0">
                /community/
              </div>
              <Input
                value={slug}
                onChange={(e) => setSlug(slugify(e.target.value))}
                className="rounded-l-none"
                placeholder="my-community"
              />
            </div>
          </div>

          {isPublished && slug && (
            <div className="flex items-center gap-2 text-xs">
              <a href={publicUrl} target="_blank" rel="noopener noreferrer" className="text-primary underline flex items-center gap-1">
                <ExternalLink className="h-3 w-3" /> {publicUrl}
              </a>
              <Button variant="ghost" size="sm" className="h-6 px-2" onClick={copyLink}>
                <Copy className="h-3 w-3" />
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      {/* SEO / Page Title */}
      <Card>
        <CardContent className="pt-5 space-y-4">
          <div className="space-y-1.5">
            <Label>Page Title (SEO)</Label>
            <Input
              value={pageTitle}
              onChange={(e) => setPageTitle(e.target.value)}
              placeholder={associationName}
            />
          </div>
          <div className="space-y-1.5">
            <Label>Search Preview Text</Label>
            <Textarea
              value={seoDescription}
              onChange={(e) => setSeoDescription(e.target.value.slice(0, 160))}
              placeholder="Brief description shown in search engine results"
              rows={3}
            />
            <p className="text-xs text-muted-foreground">{seoDescription.length}/160 characters</p>
          </div>
          <p className="text-xs text-muted-foreground">
            Used by search engines. Defaults to the association name and welcome text if left blank.
          </p>
        </CardContent>
      </Card>

      {/* Appearance */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm flex items-center gap-2">
            <Palette className="h-4 w-4" /> Appearance
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-1.5">
            <Label>Accent Color</Label>
            <div className="flex items-center gap-2">
              <input
                type="color"
                value={accentColor}
                onChange={(e) => setAccentColor(e.target.value)}
                className="h-9 w-12 rounded border cursor-pointer"
              />
              <Input value={accentColor} onChange={(e) => setAccentColor(e.target.value)} className="max-w-32" />
            </div>
          </div>

          <div className="space-y-1.5">
            <Label>Cover/Banner Image URL (single)</Label>
            <Input
              value={coverImageUrl}
              onChange={(e) => setCoverImageUrl(e.target.value)}
              placeholder="https://... (used when no carousel images are set)"
            />
            <p className="text-xs text-muted-foreground">Fallback if no carousel images below.</p>
          </div>

          <div className="space-y-2">
            <Label className="flex items-center gap-1.5">
              <Images className="h-3.5 w-3.5" /> Hero Image Carousel
            </Label>
            <p className="text-xs text-muted-foreground">Add multiple images for an auto-rotating hero banner. Paste URLs from your Media Library.</p>

            {heroImages.length > 0 && (
              <div className="space-y-2">
                {heroImages.map((url, i) => (
                  <div key={i} className="flex items-center gap-2">
                    <div className="h-12 w-20 rounded border bg-muted overflow-hidden shrink-0">
                      <img src={url} alt={`Slide ${i + 1}`} className="h-full w-full object-cover" />
                    </div>
                    <span className="text-xs text-muted-foreground truncate flex-1 min-w-0">{url}</span>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                      onClick={() => setHeroImages(heroImages.filter((_, j) => j !== i))}
                    >
                      <X className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                ))}
              </div>
            )}

            <div className="flex gap-2">
              <Input
                value={newHeroImageUrl}
                onChange={(e) => setNewHeroImageUrl(e.target.value)}
                placeholder="https://... paste image URL"
                className="flex-1"
                onKeyDown={(e) => {
                  if (e.key === "Enter" && newHeroImageUrl.trim()) {
                    e.preventDefault();
                    setHeroImages([...heroImages, newHeroImageUrl.trim()]);
                    setNewHeroImageUrl("");
                  }
                }}
              />
              <Button
                type="button"
                variant="outline"
                size="sm"
                disabled={!newHeroImageUrl.trim()}
                onClick={() => {
                  setHeroImages([...heroImages, newHeroImageUrl.trim()]);
                  setNewHeroImageUrl("");
                }}
              >
                <Plus className="h-3.5 w-3.5 mr-1" /> Add
              </Button>
            </div>
          </div>

          <div className="space-y-1.5">
            <Label>Logo Width: {logoWidth}px</Label>
            <Slider
              value={[logoWidth]}
              onValueChange={(v) => setLogoWidth(v[0])}
              min={60}
              max={400}
              step={10}
              className="max-w-xs"
            />
            <p className="text-xs text-muted-foreground">The association logo from the Overview tab is used.</p>
          </div>
        </CardContent>
      </Card>

      {/* Public Page Branding (applies to all public pages for this association) */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm flex items-center gap-2">
            <Palette className="h-4 w-4" /> Public Page Branding
          </CardTitle>
          <CardDescription className="text-xs">
            Colors and fonts applied to every public-facing page for this association (community, amenities, RV waitlist, etc.).
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-1.5">
              <Label>Page Background</Label>
              <div className="flex items-center gap-2">
                <input type="color" value={bgColor} onChange={(e) => setBgColor(e.target.value)} className="h-9 w-12 rounded border cursor-pointer" />
                <Input value={bgColor} onChange={(e) => setBgColor(e.target.value)} className="max-w-32" />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label>Section / Card Background</Label>
              <div className="flex items-center gap-2">
                <input type="color" value={sectionBgColor} onChange={(e) => setSectionBgColor(e.target.value)} className="h-9 w-12 rounded border cursor-pointer" />
                <Input value={sectionBgColor} onChange={(e) => setSectionBgColor(e.target.value)} className="max-w-32" />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label>Body Text Color</Label>
              <div className="flex items-center gap-2">
                <input type="color" value={textColor} onChange={(e) => setTextColor(e.target.value)} className="h-9 w-12 rounded border cursor-pointer" />
                <Input value={textColor} onChange={(e) => setTextColor(e.target.value)} className="max-w-32" />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label>Heading Color</Label>
              <div className="flex items-center gap-2">
                <input type="color" value={headingColor} onChange={(e) => setHeadingColor(e.target.value)} className="h-9 w-12 rounded border cursor-pointer" />
                <Input value={headingColor} onChange={(e) => setHeadingColor(e.target.value)} className="max-w-32" />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label>Footer Background</Label>
              <div className="flex items-center gap-2">
                <input type="color" value={footerBgColor} onChange={(e) => setFooterBgColor(e.target.value)} className="h-9 w-12 rounded border cursor-pointer" />
                <Input value={footerBgColor} onChange={(e) => setFooterBgColor(e.target.value)} className="max-w-32" />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label>Footer Text Color</Label>
              <div className="flex items-center gap-2">
                <input type="color" value={footerTextColor} onChange={(e) => setFooterTextColor(e.target.value)} className="h-9 w-12 rounded border cursor-pointer" />
                <Input value={footerTextColor} onChange={(e) => setFooterTextColor(e.target.value)} className="max-w-32" />
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-1.5">
              <Label className="flex items-center gap-1.5"><Type className="h-3.5 w-3.5" /> Body Font</Label>
              <select
                value={fontFamily}
                onChange={(e) => setFontFamily(e.target.value)}
                className="h-9 w-full rounded-md border border-input bg-background px-2 text-sm"
              >
                {PUBLIC_PAGE_FONTS.map((f) => (
                  <option key={f} value={f} style={{ fontFamily: f }}>{f}</option>
                ))}
              </select>
            </div>
            <div className="space-y-1.5">
              <Label className="flex items-center gap-1.5"><Type className="h-3.5 w-3.5" /> Heading Font</Label>
              <select
                value={headingFontFamily}
                onChange={(e) => setHeadingFontFamily(e.target.value)}
                className="h-9 w-full rounded-md border border-input bg-background px-2 text-sm"
              >
                {PUBLIC_PAGE_FONTS.map((f) => (
                  <option key={f} value={f} style={{ fontFamily: f }}>{f}</option>
                ))}
              </select>
            </div>
          </div>

          <div className="rounded-md border p-4" style={{ backgroundColor: bgColor, color: textColor, fontFamily: `'${fontFamily}', sans-serif` }}>
            <div className="text-xs uppercase tracking-wide mb-2 opacity-60">Preview</div>
            <h3 className="text-lg font-semibold mb-1" style={{ color: headingColor, fontFamily: `'${headingFontFamily}', sans-serif` }}>
              Welcome to {associationName}
            </h3>
            <p className="text-sm mb-3">This is how body text will appear on your public pages.</p>
            <div className="rounded p-3 text-sm" style={{ backgroundColor: sectionBgColor }}>
              <span className="font-medium" style={{ color: accentColor }}>● Accent</span> — section / card background sample
            </div>
          </div>
          <div className="rounded-md border p-4" style={{ backgroundColor: footerBgColor, color: footerTextColor, fontFamily: `'${fontFamily}', sans-serif` }}>
            <div className="text-xs uppercase tracking-wide mb-2 opacity-60">Footer Preview</div>
            <h3 className="font-bold text-sm mb-1">Connect with {associationName}</h3>
            <p className="text-xs" style={{ opacity: 0.7 }}>123 Main Street • contact@example.com</p>
          </div>
          <p className="text-xs text-muted-foreground">
            Tip: For accent / button / icon color use the "Accent Color" field in the Appearance section above.
          </p>
        </CardContent>
      </Card>

      {/* Welcome Message */}

      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm">Welcome Message</CardTitle>
          <CardDescription className="text-xs">Shown below the hero section.</CardDescription>
        </CardHeader>
        <CardContent>
          <Textarea
            value={welcomeMessage}
            onChange={(e) => setWelcomeMessage(e.target.value)}
            rows={4}
            placeholder="Welcome to our community! Here you'll find important information..."
          />
        </CardContent>
      </Card>

      {/* Custom Links */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm flex items-center gap-2">
            <ExternalLink className="h-4 w-4" /> Custom Links
          </CardTitle>
          <CardDescription className="text-xs">Add custom links that appear in the navigation bar of the community page.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          {customLinks.length > 0 && (
            <div className="space-y-2">
              {customLinks.map((link, i) => (
                <div key={i} className="flex items-center gap-2 text-sm">
                  <span className="font-medium truncate min-w-0 flex-1">{link.label}</span>
                  <span className="text-muted-foreground truncate min-w-0 flex-1">{link.url}</span>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="h-7 w-7 p-0 text-destructive hover:text-destructive shrink-0"
                    onClick={() => setCustomLinks(customLinks.filter((_, j) => j !== i))}
                  >
                    <X className="h-3.5 w-3.5" />
                  </Button>
                </div>
              ))}
            </div>
          )}
          <div className="flex gap-2">
            <Input
              value={newLinkLabel}
              onChange={(e) => setNewLinkLabel(e.target.value)}
              placeholder="Label (e.g. Pay HOA)"
              className="flex-1"
            />
            <Input
              value={newLinkUrl}
              onChange={(e) => setNewLinkUrl(e.target.value)}
              placeholder="https://..."
              className="flex-1"
              onKeyDown={(e) => {
                if (e.key === "Enter" && newLinkLabel.trim() && newLinkUrl.trim()) {
                  e.preventDefault();
                  setCustomLinks([...customLinks, { label: newLinkLabel.trim(), url: newLinkUrl.trim() }]);
                  setNewLinkLabel("");
                  setNewLinkUrl("");
                }
              }}
            />
            <Button
              type="button"
              variant="outline"
              size="sm"
              disabled={!newLinkLabel.trim() || !newLinkUrl.trim()}
              onClick={() => {
                setCustomLinks([...customLinks, { label: newLinkLabel.trim(), url: newLinkUrl.trim() }]);
                setNewLinkLabel("");
                setNewLinkUrl("");
              }}
            >
              <Plus className="h-3.5 w-3.5 mr-1" /> Add
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Custom Body Content */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm flex items-center gap-2">
            <Type className="h-4 w-4" /> Custom Page Content
          </CardTitle>
          <CardDescription className="text-xs">
            Add your own headings, paragraphs, images, links, and callouts. These appear in the main area of the public community page, between the welcome message and other modules.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <ContentBlocksEditor value={bodyBlocks} onChange={setBodyBlocks} variant="main" />
        </CardContent>
      </Card>

      {/* Sidebar */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm flex items-center gap-2">
            <LayoutPanelLeft className="h-4 w-4" /> Information Sidebar
          </CardTitle>
          <CardDescription className="text-xs">
            Optional sidebar shown beside the main content (e.g. office hours, contacts, helpful links).
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <Label className="font-medium">Show sidebar</Label>
              <p className="text-xs text-muted-foreground">Toggle the information sidebar on the public page.</p>
            </div>
            <Switch checked={sidebarEnabled} onCheckedChange={setSidebarEnabled} />
          </div>
          {sidebarEnabled && (
            <>
              <div className="space-y-1.5">
                <Label>Sidebar Title (optional)</Label>
                <Input
                  value={sidebarTitle}
                  onChange={(e) => setSidebarTitle(e.target.value)}
                  placeholder="e.g. Quick Info"
                />
              </div>
              <ContentBlocksEditor value={sidebarBlocks} onChange={setSidebarBlocks} variant="sidebar" />
            </>
          )}
        </CardContent>
      </Card>

      {/* Modules */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm">Modules</CardTitle>
          <CardDescription className="text-xs">Toggle which sections appear on the public page.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <FileText className="h-4 w-4 text-muted-foreground" />
              <div>
                <Label className="font-medium">Documents</Label>
                <p className="text-xs text-muted-foreground">Show documents marked as "Public" for download</p>
              </div>
            </div>
            <Switch checked={documentsEnabled} onCheckedChange={setDocumentsEnabled} />
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Calendar className="h-4 w-4 text-muted-foreground" />
              <div>
                <Label className="font-medium">Calendar / Events</Label>
                <p className="text-xs text-muted-foreground">Show upcoming events from this association's calendar</p>
              </div>
            </div>
            <Switch checked={calendarEnabled} onCheckedChange={setCalendarEnabled} />
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <MapPin className="h-4 w-4 text-muted-foreground" />
              <div>
                <Label className="font-medium">Amenities</Label>
                <p className="text-xs text-muted-foreground">Show amenity cards (map, booking, forms) from the Amenities tab</p>
              </div>
            </div>
            <Switch checked={amenitiesEnabled} onCheckedChange={setAmenitiesEnabled} />
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Megaphone className="h-4 w-4 text-muted-foreground" />
              <div>
                <Label className="font-medium">Announcements</Label>
                <p className="text-xs text-muted-foreground">Show announcements with "Public" visibility on the community page</p>
              </div>
            </div>
            <Switch checked={announcementsEnabled} onCheckedChange={setAnnouncementsEnabled} />
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <BookOpen className="h-4 w-4 text-muted-foreground" />
              <div>
                <Label className="font-medium">Amenity Booking (Legacy)</Label>
                <p className="text-xs text-muted-foreground">Use the Amenities module above instead</p>
              </div>
            </div>
            <Switch checked={bookingEnabled} onCheckedChange={setBookingEnabled} />
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
