"use client";

import { useState } from "react";
import RuleCard from "../../components/cards/RuleCard";
import Card from "../../components/cards/Card";
import Chip from "../../components/controls/Chip";
import MultiSelect from "../../components/controls/MultiSelect";
import Image from "next/image";
import { getAssetPath } from "../../../lib/assetUtils";

/** Module-level counter for unique rule card chip IDs (avoids ref in initial state). */
let ruleCardIdCounter = 0;

interface ChipData {
  id: string;
  label: string;
  state: "Unselected" | "Selected" | "Custom";
  palette: "Default" | "Inverse";
  size: "S" | "M";
}

// MultiSelect example component with state management
function MultiSelectExample({ size }: { size: "S" | "M" }) {
  const [options, setOptions] = useState<
    Array<{
      id: string;
      label: string;
      state: "Unselected" | "Selected" | "Custom";
    }>
  >([
    { id: "1", label: "1 member", state: "Unselected" },
    { id: "2", label: "2-10 members", state: "Unselected" },
    { id: "3", label: "10-24 members", state: "Unselected" },
    { id: "4", label: "24-64 members", state: "Unselected" },
    { id: "5", label: "64-128 members", state: "Unselected" },
    { id: "6", label: "125-1000 members", state: "Unselected" },
    { id: "7", label: "1000+ members", state: "Unselected" },
  ]);

  const handleChipClick = (chipId: string) => {
    setOptions((prev) =>
      prev.map((opt) =>
        opt.id === chipId
          ? {
              ...opt,
              state: opt.state === "Selected" ? "Unselected" : "Selected",
            }
          : opt,
      ),
    );
  };

  const handleAddClick = () => {
    const newId = `custom-${Date.now()}`;
    setOptions((prev) => [...prev, { id: newId, label: "", state: "Custom" }]);
  };

  const handleCustomConfirm = (chipId: string, value: string) => {
    setOptions((prev) =>
      prev.map((opt) =>
        opt.id === chipId
          ? { ...opt, label: value, state: "Selected" as const }
          : opt,
      ),
    );
  };

  const handleCustomClose = (chipId: string) => {
    setOptions((prev) => prev.filter((opt) => opt.id !== chipId));
  };

  return (
    <div className="space-y-[var(--spacing-scale-016)]">
      <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
        {size === "S" ? "Small (S)" : "Medium (M)"}
      </h3>
      <MultiSelect
        label="Label"
        showHelpIcon={true}
        size={size}
        options={options}
        onChipClick={handleChipClick}
        onAddClick={handleAddClick}
        onCustomChipConfirm={handleCustomConfirm}
        onCustomChipClose={handleCustomClose}
        addButtonText="Add organization type"
      />
    </div>
  );
}

export default function ComponentsPreview() {
  const [chipStates, setChipStates] = useState<
    Record<string, "Unselected" | "Selected">
  >({
    "default-s": "Unselected",
    "default-m": "Unselected",
    "inverse-s": "Unselected",
    "inverse-m": "Unselected",
  });

  // Manage custom chips separately
  const [customChips, setCustomChips] = useState<ChipData[]>([
    {
      id: "custom-1",
      label: "",
      state: "Custom",
      palette: "Default",
      size: "S",
    },
    {
      id: "custom-2",
      label: "",
      state: "Custom",
      palette: "Default",
      size: "M",
    },
  ]);

  // RuleCard categories with chip options and state management
  const [ruleCardCategories, setRuleCardCategories] = useState<
    Array<{
      name: string;
      chipOptions: Array<{
        id: string;
        label: string;
        state: "Unselected" | "Selected" | "Custom";
      }>;
      onChipClick?: (_categoryName: string, _chipId: string) => void;
      onAddClick?: (_categoryName: string) => void;
      onCustomChipConfirm?: (
        _categoryName: string,
        _chipId: string,
        _value: string,
      ) => void;
      onCustomChipClose?: (_categoryName: string, _chipId: string) => void;
    }>
  >([
    {
      name: "Values",
      chipOptions: [
        { id: "values-1", label: "Consciousness", state: "Unselected" },
        { id: "values-2", label: "Ecology", state: "Unselected" },
        { id: "values-3", label: "Abundance", state: "Unselected" },
        { id: "values-4", label: "Art", state: "Unselected" },
        { id: "values-5", label: "Decisiveness", state: "Unselected" },
      ],
      onChipClick: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? {
                          ...opt,
                          state:
                            opt.state === "Selected"
                              ? "Unselected"
                              : "Selected",
                        }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onAddClick: (categoryName: string) => {
        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: [
                    ...cat.chipOptions,
                    { id: newId, label: "", state: "Custom" },
                  ],
                }
              : cat,
          ),
        );
      },
      onCustomChipConfirm: (
        categoryName: string,
        chipId: string,
        value: string,
      ) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? { ...opt, label: value, state: "Selected" }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onCustomChipClose: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.filter(
                    (opt) => opt.id !== chipId,
                  ),
                }
              : cat,
          ),
        );
      },
    },
    {
      name: "Communication",
      chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
      onChipClick: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? {
                          ...opt,
                          state:
                            opt.state === "Selected"
                              ? "Unselected"
                              : "Selected",
                        }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onAddClick: (categoryName: string) => {
        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: [
                    ...cat.chipOptions,
                    { id: newId, label: "", state: "Custom" },
                  ],
                }
              : cat,
          ),
        );
      },
      onCustomChipConfirm: (
        categoryName: string,
        chipId: string,
        value: string,
      ) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? { ...opt, label: value, state: "Selected" }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onCustomChipClose: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.filter(
                    (opt) => opt.id !== chipId,
                  ),
                }
              : cat,
          ),
        );
      },
    },
    {
      name: "Membership",
      chipOptions: [
        { id: "membership-1", label: "Open Admission", state: "Unselected" },
      ],
      onChipClick: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? {
                          ...opt,
                          state:
                            opt.state === "Selected"
                              ? "Unselected"
                              : "Selected",
                        }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onAddClick: (categoryName: string) => {
        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: [
                    ...cat.chipOptions,
                    { id: newId, label: "", state: "Custom" },
                  ],
                }
              : cat,
          ),
        );
      },
      onCustomChipConfirm: (
        categoryName: string,
        chipId: string,
        value: string,
      ) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? { ...opt, label: value, state: "Selected" }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onCustomChipClose: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.filter(
                    (opt) => opt.id !== chipId,
                  ),
                }
              : cat,
          ),
        );
      },
    },
    {
      name: "Decision-making",
      chipOptions: [
        { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
        { id: "decision-2", label: "Modified Consensus", state: "Unselected" },
      ],
      onChipClick: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? {
                          ...opt,
                          state:
                            opt.state === "Selected"
                              ? "Unselected"
                              : "Selected",
                        }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onAddClick: (categoryName: string) => {
        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: [
                    ...cat.chipOptions,
                    { id: newId, label: "", state: "Custom" },
                  ],
                }
              : cat,
          ),
        );
      },
      onCustomChipConfirm: (
        categoryName: string,
        chipId: string,
        value: string,
      ) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? { ...opt, label: value, state: "Selected" }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onCustomChipClose: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.filter(
                    (opt) => opt.id !== chipId,
                  ),
                }
              : cat,
          ),
        );
      },
    },
    {
      name: "Conflict management",
      chipOptions: [
        { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
        { id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
      ],
      onChipClick: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? {
                          ...opt,
                          state:
                            opt.state === "Selected"
                              ? "Unselected"
                              : "Selected",
                        }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onAddClick: (categoryName: string) => {
        const newId = `custom-${categoryName}-${++ruleCardIdCounter}`;
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: [
                    ...cat.chipOptions,
                    { id: newId, label: "", state: "Custom" },
                  ],
                }
              : cat,
          ),
        );
      },
      onCustomChipConfirm: (
        categoryName: string,
        chipId: string,
        value: string,
      ) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.map((opt) =>
                    opt.id === chipId
                      ? { ...opt, label: value, state: "Selected" }
                      : opt,
                  ),
                }
              : cat,
          ),
        );
      },
      onCustomChipClose: (categoryName: string, chipId: string) => {
        setRuleCardCategories((prev) =>
          prev.map((cat) =>
            cat.name === categoryName
              ? {
                  ...cat,
                  chipOptions: cat.chipOptions.filter(
                    (opt) => opt.id !== chipId,
                  ),
                }
              : cat,
          ),
        );
      },
    },
  ]);

  return (
    <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]">
      <div className="max-w-[1200px] mx-auto space-y-[var(--spacing-scale-064)]">
        <header className="space-y-[var(--spacing-scale-008)]">
          <h1 className="font-bricolage-grotesque text-[48px] leading-[56px] font-bold text-[var(--color-content-default-primary)]">
            Component Preview
          </h1>
          <p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
            RuleCard, Card, and Chip component examples - states, palettes,
            sizes, and interactions
          </p>
        </header>

        {/* Chip Component - Controls */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Chip Component (Controls)
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            {/* Default palette */}
            <div className="space-y-[var(--spacing-scale-016)]">
              <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                Default palette
              </h3>
              <div className="flex flex-wrap items-center gap-[var(--spacing-scale-016)]">
                <Chip
                  label="Small"
                  state={chipStates["default-s"]}
                  palette="Default"
                  size="S"
                  onClick={() =>
                    setChipStates((prev) => ({
                      ...prev,
                      "default-s":
                        prev["default-s"] === "Selected"
                          ? "Unselected"
                          : "Selected",
                    }))
                  }
                />
                <Chip
                  label="Medium"
                  state={chipStates["default-m"]}
                  palette="Default"
                  size="M"
                  onClick={() =>
                    setChipStates((prev) => ({
                      ...prev,
                      "default-m":
                        prev["default-m"] === "Selected"
                          ? "Unselected"
                          : "Selected",
                    }))
                  }
                />
                <Chip
                  label="Disabled"
                  state="Disabled"
                  palette="Default"
                  size="S"
                />
                {customChips
                  .filter((chip) => chip.palette === "Default")
                  .map((chip) => (
                    <Chip
                      key={chip.id}
                      label={chip.state === "Custom" ? "" : chip.label}
                      state={chip.state}
                      palette={chip.palette}
                      size={chip.size}
                      onCheck={(value, e) => {
                        e.stopPropagation();
                        setCustomChips((prev) =>
                          prev.map((c) =>
                            c.id === chip.id
                              ? { ...c, label: value, state: "Selected" }
                              : c,
                          ),
                        );
                      }}
                      onClose={(e) => {
                        e.stopPropagation();
                        setCustomChips((prev) =>
                          prev.filter((c) => c.id !== chip.id),
                        );
                      }}
                      onClick={(e) => {
                        e.stopPropagation();
                        // Only toggle if the chip is in Selected or Unselected state (not Custom)
                        if (
                          chip.state === "Selected" ||
                          chip.state === "Unselected"
                        ) {
                          setCustomChips((prev) =>
                            prev.map((c) =>
                              c.id === chip.id
                                ? {
                                    ...c,
                                    state:
                                      c.state === "Selected"
                                        ? "Unselected"
                                        : "Selected",
                                  }
                                : c,
                            ),
                          );
                        }
                      }}
                    />
                  ))}
                {/* Add new custom chip button - Ghost button style */}
                <button
                  type="button"
                  onClick={() => {
                    const newId = `custom-${Date.now()}`;
                    setCustomChips((prev) => [
                      ...prev,
                      {
                        id: newId,
                        label: "",
                        state: "Custom",
                        palette: "Default",
                        size: "S",
                      },
                    ]);
                  }}
                  className="flex gap-[var(--measures-spacing-050,2px)] items-center justify-center p-[var(--measures-spacing-200,8px)] rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity"
                >
                  {/* Plus icon */}
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 14 14"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="text-[var(--color-content-default-brand-primary,#fefcc9)] shrink-0"
                  >
                    <path
                      d="M7 3V11M3 7H11"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  {/* Text */}
                  <span className="font-inter font-medium text-[length:var(--sizing-300,12px)] leading-[14px] text-[color:var(--color-content-default-brand-primary,#fefcc9)]">
                    Add Applicable Scope
                  </span>
                </button>
              </div>
            </div>

            {/* Inverse palette - on white background */}
            <div className="space-y-[var(--spacing-scale-016)]">
              <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                Inverse palette (on white background)
              </h3>
              <div
                className="!bg-white p-[var(--spacing-scale-032)] rounded-[var(--radius-300,12px)]"
                style={{ backgroundColor: "#ffffff" }}
              >
                <div className="flex flex-wrap items-center gap-[var(--spacing-scale-016)]">
                  <Chip
                    label="Small"
                    state={chipStates["inverse-s"]}
                    palette="Inverse"
                    size="S"
                    onClick={() =>
                      setChipStates((prev) => ({
                        ...prev,
                        "inverse-s":
                          prev["inverse-s"] === "Selected"
                            ? "Unselected"
                            : "Selected",
                      }))
                    }
                  />
                  <Chip
                    label="Medium"
                    state={chipStates["inverse-m"]}
                    palette="Inverse"
                    size="M"
                    onClick={() =>
                      setChipStates((prev) => ({
                        ...prev,
                        "inverse-m":
                          prev["inverse-m"] === "Selected"
                            ? "Unselected"
                            : "Selected",
                      }))
                    }
                  />
                  <Chip
                    label="Disabled"
                    state="Disabled"
                    palette="Inverse"
                    size="S"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Card Component - Create flow selection card variants */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Card Component
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <p className="font-inter text-[18px] leading-[24px] text-[var(--color-content-default-secondary)]">
              Horizontal and vertical orientations with recommended and selected
              states.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
              <div className="space-y-2">
                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                  Horizontal + Recommended
                </h3>
                <Card
                  label="Label"
                  supportText="Members vote to resolve a dispute democratically."
                  recommended={true}
                  selected={false}
                  orientation="horizontal"
                  onClick={() => console.warn("Card clicked")}
                />
              </div>
              <div className="space-y-2">
                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                  Horizontal + Selected
                </h3>
                <Card
                  label="Label"
                  supportText="Members vote to resolve a dispute democratically."
                  recommended={false}
                  selected={true}
                  orientation="horizontal"
                  onClick={() => console.warn("Card clicked")}
                />
              </div>
              <div className="space-y-2">
                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                  Vertical + Recommended
                </h3>
                <Card
                  label="Label"
                  supportText="Invite-only"
                  recommended={true}
                  selected={false}
                  orientation="vertical"
                  showInfoIcon={true}
                  onClick={() => console.warn("Card clicked")}
                />
              </div>
              <div className="space-y-2">
                <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
                  Vertical + Selected
                </h3>
                <Card
                  label="Label"
                  supportText="Invite-only"
                  recommended={false}
                  selected={true}
                  orientation="vertical"
                  showInfoIcon={true}
                  onClick={() => console.warn("Card clicked")}
                />
              </div>
            </div>
          </div>
        </section>

        {/* Collapsed State - Large */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Collapsed State - Large (L)
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <RuleCard
              title="Mutual Aid Mondays"
              description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
              backgroundColor="bg-[#b7d9d5]"
              expanded={false}
              size="L"
              className="w-[525px]"
              logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
              logoAlt="Mutual Aid Mondays"
              onClick={() => console.warn("Card clicked: Mutual Aid Mondays")}
            />
          </div>
        </section>

        {/* Collapsed State - Medium */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Collapsed State - Medium (M)
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <RuleCard
              title="Mutual Aid Mondays"
              description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
              backgroundColor="bg-[#b7d9d5]"
              expanded={false}
              size="M"
              className="w-[289px]"
              logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
              logoAlt="Mutual Aid Mondays"
              onClick={() => console.warn("Card clicked: Mutual Aid Mondays")}
            />
          </div>
        </section>

        {/* Expanded State - Large */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Expanded State - Large (L)
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <RuleCard
              title="Mutual Aid Mondays"
              description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
              backgroundColor="bg-[#b7d9d5]"
              expanded={true}
              size="L"
              className="w-[568px]"
              logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
              logoAlt="Mutual Aid Mondays"
              categories={ruleCardCategories}
              onClick={() => console.warn("Card clicked: Mutual Aid Mondays")}
            />
          </div>
        </section>

        {/* Expanded State - Medium */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Expanded State - Medium (M)
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <RuleCard
              title="Mutual Aid Mondays"
              description="Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness."
              backgroundColor="bg-[#b7d9d5]"
              expanded={true}
              size="M"
              className="w-[398px]"
              logoUrl="http://localhost:3845/assets/d2513a6ab56f2b2927e8a7c442c06326e7a29541.png"
              logoAlt="Mutual Aid Mondays"
              categories={ruleCardCategories}
              onClick={() => console.warn("Card clicked: Mutual Aid Mondays")}
            />
          </div>
        </section>

        {/* Different Background Colors */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Different Background Colors
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-scale-024)]">
              <RuleCard
                title="Consensus clusters"
                description="Units called Circles have the ability to decide and act on matters in their domains."
                backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
                expanded={false}
                size="L"
                className="w-[525px]"
                icon={
                  <Image
                    src={getAssetPath("assets/template-mark/consensus-clusters.svg")}
                    alt="Sociocracy"
                    width={103}
                    height={103}
                  />
                }
                onClick={() => console.warn("Consensus clusters selected")}
              />
              <RuleCard
                title="Consensus"
                description="Decisions that affect the group collectively should involve participation of all participants."
                backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
                expanded={false}
                size="L"
                className="w-[525px]"
                icon={
                  <Image
                    src={getAssetPath("assets/template-mark/consensus.svg")}
                    alt="Consensus"
                    width={103}
                    height={103}
                  />
                }
                onClick={() => console.warn("Consensus selected")}
              />
            </div>
          </div>
        </section>

        {/* Logo Fallback */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            Logo Fallback (Community Initials)
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            <RuleCard
              title="Community Example"
              description="This card shows the logo fallback with community initials when no logo is provided."
              backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
              expanded={false}
              size="L"
              className="w-[525px]"
              communityInitials="CE"
              onClick={() => console.warn("Community Example selected")}
            />
          </div>
        </section>

        {/* MultiSelect Component */}
        <section className="space-y-[var(--spacing-scale-024)]">
          <h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
            MultiSelect Component (Controls)
          </h2>
          <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
            {/* Small size */}
            <MultiSelectExample size="S" />

            {/* Medium size */}
            <MultiSelectExample size="M" />
          </div>
        </section>
      </div>
    </div>
  );
}