ReUI Filters

import { MailIcon, TypeIcon, GlobeIcon, PhoneIcon, BellIcon, ClockIcon, CircleAlertIcon, CircleCheckIcon, BanIcon, UserRoundCheckIcon, UserRoundXIcon, UsersIcon, StarIcon, BuildingIcon, ListFilterIcon, FunnelXIcon } from "lucide-react"
"use client"

import { useCallback, useState } from "react"
import {
  createFilter,
  Filters,
  type Filter,
  type FilterFieldConfig,
} from "@/components/ui/reui-filters"

import { cn } from "@/lib/utils"
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/reui-filters-utils/avatar"
import { Button } from "@/components/ui/reui-filters-utils/button"

// Priority icon component
const PriorityIcon = ({ priority }: { priority: string }) => {
  const colors = {
    low: "bg-green-500",
    medium: "bg-yellow-500",
    high: "bg-violet-500",
    urgent: "bg-orange-500",
    critical: "bg-red-500",
  }
  return (
    <div
      className={cn(
        "size-2.25 shrink-0 rounded-full",
        colors[priority as keyof typeof colors]
      )}
    />
  )
}

const countryFlags = [
  { code: "AF", name: "Afghanistan" },
  { code: "AL", name: "Albania" },
  { code: "DZ", name: "Algeria" },
  { code: "AS", name: "American Samoa" },
  { code: "AD", name: "Andorra" },
  { code: "AO", name: "Angola" },
  { code: "AI", name: "Anguilla" },
  { code: "AG", name: "Antigua and Barbuda" },
  { code: "AR", name: "Argentina" },
  { code: "AM", name: "Armenia" },
  { code: "AU", name: "Australia" },
  { code: "AT", name: "Austria" },
  { code: "AZ", name: "Azerbaijan" },
  { code: "BS", name: "Bahamas" },
  { code: "BH", name: "Bahrain" },
  { code: "BD", name: "Bangladesh" },
  { code: "BB", name: "Barbados" },
  { code: "BY", name: "Belarus" },
  { code: "BE", name: "Belgium" },
  { code: "BZ", name: "Belize" },
  { code: "BJ", name: "Benin" },
  { code: "BM", name: "Bermuda" },
  { code: "BT", name: "Bhutan" },
  { code: "BO", name: "Bolivia" },
  { code: "BA", name: "Bosnia and Herzegovina" },
  { code: "BW", name: "Botswana" },
  { code: "BR", name: "Brazil" },
  { code: "IO", name: "British Indian Ocean Territory" },
  { code: "BN", name: "Brunei Darussalam" },
  { code: "BG", name: "Bulgaria" },
  { code: "BF", name: "Burkina Faso" },
  { code: "BI", name: "Burundi" },
  { code: "KH", name: "Cambodia" },
  { code: "CM", name: "Cameroon" },
  { code: "CA", name: "Canada" },
  { code: "CV", name: "Cape Verde" },
  { code: "KY", name: "Cayman Islands" },
  { code: "CF", name: "Central African Republic" },
  { code: "TD", name: "Chad" },
  { code: "CL", name: "Chile" },
  { code: "CN", name: "China" },
  { code: "CO", name: "Colombia" },
  { code: "KM", name: "Comoros" },
  { code: "CG", name: "Congo" },
  { code: "CR", name: "Costa Rica" },
  { code: "CI", name: "Cote D'Ivoire" },
  { code: "HR", name: "Croatia" },
  { code: "CU", name: "Cuba" },
  { code: "CY", name: "Cyprus" },
  { code: "CZ", name: "Czech Republic" },
  { code: "DK", name: "Denmark" },
  { code: "DJ", name: "Djibouti" },
  { code: "DM", name: "Dominica" },
  { code: "DO", name: "Dominican Republic" },
  { code: "EC", name: "Ecuador" },
  { code: "EG", name: "Egypt" },
  { code: "SV", name: "El Salvador" },
  { code: "GQ", name: "Equatorial Guinea" },
  { code: "ER", name: "Eritrea" },
  { code: "EE", name: "Estonia" },
  { code: "SZ", name: "Eswatini" },
  { code: "ET", name: "Ethiopia" },
  { code: "FI", name: "Finland" },
  { code: "FR", name: "France" },
  { code: "GA", name: "Gabon" },
  { code: "GM", name: "Gambia" },
  { code: "GE", name: "Georgia" },
  { code: "DE", name: "Germany" },
  { code: "GH", name: "Ghana" },
  { code: "GR", name: "Greece" },
  { code: "GD", name: "Grenada" },
  { code: "GT", name: "Guatemala" },
  { code: "GN", name: "Guinea" },
  { code: "GW", name: "Guinea-Bissau" },
  { code: "GY", name: "Guyana" },
  { code: "HT", name: "Haiti" },
  { code: "HN", name: "Honduras" },
  { code: "HK", name: "Hong Kong" },
  { code: "HU", name: "Hungary" },
  { code: "IS", name: "Iceland" },
  { code: "IN", name: "India" },
  { code: "ID", name: "Indonesia" },
  { code: "IR", name: "Iran" },
  { code: "IQ", name: "Iraq" },
  { code: "IE", name: "Ireland" },
  { code: "IL", name: "Israel" },
  { code: "IT", name: "Italy" },
  { code: "JM", name: "Jamaica" },
  { code: "JP", name: "Japan" },
  { code: "JO", name: "Jordan" },
  { code: "KZ", name: "Kazakhstan" },
  { code: "KE", name: "Kenya" },
  { code: "KR", name: "South Korea" },
  { code: "KW", name: "Kuwait" },
  { code: "KG", name: "Kyrgyzstan" },
  { code: "LA", name: "Laos" },
  { code: "LV", name: "Latvia" },
  { code: "LB", name: "Lebanon" },
  { code: "LS", name: "Lesotho" },
  { code: "LR", name: "Liberia" },
  { code: "LY", name: "Libya" },
  { code: "LT", name: "Lithuania" },
  { code: "LU", name: "Luxembourg" },
  { code: "MO", name: "Macao" },
  { code: "MG", name: "Madagascar" },
  { code: "MW", name: "Malawi" },
  { code: "MY", name: "Malaysia" },
  { code: "MV", name: "Maldives" },
  { code: "ML", name: "Mali" },
  { code: "MT", name: "Malta" },
  { code: "MH", name: "Marshall Islands" },
  { code: "MR", name: "Mauritania" },
  { code: "MU", name: "Mauritius" },
  { code: "MX", name: "Mexico" },
  { code: "FM", name: "Micronesia" },
  { code: "MD", name: "Moldova" },
  { code: "MC", name: "Monaco" },
  { code: "MN", name: "Mongolia" },
  { code: "ME", name: "Montenegro" },
  { code: "MA", name: "Morocco" },
  { code: "MZ", name: "Mozambique" },
  { code: "MM", name: "Myanmar" },
  { code: "NA", name: "Namibia" },
  { code: "NP", name: "Nepal" },
  { code: "NL", name: "Netherlands" },
  { code: "NZ", name: "New Zealand" },
  { code: "NI", name: "Nicaragua" },
  { code: "NG", name: "Nigeria" },
  { code: "NO", name: "Norway" },
  { code: "OM", name: "Oman" },
  { code: "PK", name: "Pakistan" },
  { code: "PA", name: "Panama" },
  { code: "PG", name: "Papua New Guinea" },
  { code: "PY", name: "Paraguay" },
  { code: "PE", name: "Peru" },
  { code: "PH", name: "Philippines" },
  { code: "PL", name: "Poland" },
  { code: "PT", name: "Portugal" },
  { code: "QA", name: "Qatar" },
  { code: "RO", name: "Romania" },
  { code: "RU", name: "Russia" },
  { code: "RW", name: "Rwanda" },
  { code: "WS", name: "Samoa" },
  { code: "SM", name: "San Marino" },
  { code: "SA", name: "Saudi Arabia" },
  { code: "SN", name: "Senegal" },
  { code: "RS", name: "Serbia" },
  { code: "SG", name: "Singapore" },
  { code: "SK", name: "Slovakia" },
  { code: "SI", name: "Slovenia" },
  { code: "ZA", name: "South Africa" },
  { code: "ES", name: "Spain" },
  { code: "LK", name: "Sri Lanka" },
  { code: "SE", name: "Sweden" },
  { code: "CH", name: "Switzerland" },
  { code: "SY", name: "Syria" },
  { code: "TW", name: "Taiwan" },
  { code: "TJ", name: "Tajikistan" },
  { code: "TZ", name: "Tanzania" },
  { code: "TH", name: "Thailand" },
  { code: "TR", name: "Turkey" },
  { code: "UG", name: "Uganda" },
  { code: "UA", name: "Ukraine" },
  { code: "AE", name: "United Arab Emirates" },
  { code: "GB", name: "United Kingdom" },
  { code: "US", name: "United States" },
  { code: "UY", name: "Uruguay" },
  { code: "UZ", name: "Uzbekistan" },
  { code: "VN", name: "Vietnam" },
  { code: "ZM", name: "Zambia" },
  { code: "ZW", name: "Zimbabwe" },
]

export default function Pattern() {
  // Example: All Possible Filter Field Types with Grouping
  const fields: FilterFieldConfig[] = [
    {
      group: "Basic",
      fields: [
        {
          key: "text",
          label: "Text",
          type: "text",
          icon: (
            <MailIcon />
          ),
          placeholder: "Search text...",
        },
        {
          key: "email",
          label: "Email",
          type: "text",
          icon: (
            <TypeIcon />
          ),
          placeholder: "user@example.com",
        },
        {
          key: "website",
          label: "Website",
          icon: (
            <GlobeIcon />
          ),
          type: "text",
          placeholder: "https://example.com",
        },
        {
          key: "phone",
          label: "Phone",
          icon: (
            <PhoneIcon />
          ),
          type: "text",
          placeholder: "+1 (123) 456-7890",
        },
      ],
    },
    {
      group: "Select",
      fields: [
        {
          key: "status",
          label: "Status",
          icon: (
            <BellIcon />
          ),
          type: "select",
          searchable: false,
          className: "w-[200px]",
          options: [
            {
              value: "todo",
              label: "To Do",
              icon: (
                <ClockIcon className="stroke-violet-500" />
              ),
            },
            {
              value: "in-progress",
              label: "In Progress",
              icon: (
                <CircleAlertIcon className="stroke-yellow-500" />
              ),
            },
            {
              value: "done",
              label: "Done",
              icon: (
                <CircleCheckIcon className="stroke-green-500" />
              ),
            },
            {
              value: "cancelled",
              label: "Cancelled",
              icon: (
                <BanIcon className="stroke-destructive" />
              ),
            },
          ],
        },
        {
          key: "priority",
          label: "Priority",
          icon: (
            <BanIcon />
          ),
          type: "multiselect",
          className: "w-[180px]",
          options: [
            {
              value: "low",
              label: "Low",
              icon: <PriorityIcon priority="low" />,
            },
            {
              value: "medium",
              label: "Medium",
              icon: <PriorityIcon priority="medium" />,
            },
            {
              value: "high",
              label: "High",
              icon: <PriorityIcon priority="high" />,
            },
            {
              value: "urgent",
              label: "Urgent",
              icon: <PriorityIcon priority="urgent" />,
            },
            {
              value: "critical",
              label: "Critical",
              icon: <PriorityIcon priority="critical" />,
            },
          ],
        },
        {
          key: "assignee",
          label: "Assignee",
          icon: (
            <UserRoundCheckIcon />
          ),
          type: "multiselect",
          maxSelections: 5,
          options: [
            {
              value: "john",
              label: "John Doe",
              icon: (
                <Avatar className="size-5 border">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/b1/b1f6209ae26207ebe11c243a659f0e5e15a0a48232261ecf3c05211a40af2225.jpg"
                    alt="John Doe"
                  />
                  <AvatarFallback>JD</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "jane",
              label: "Jane Smith",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/e7/e7a0b30cb92ca533b2f8dbf57649e4b60129a9e84f3fc36d45b09e2dfcaec61d.jpg"
                    alt="Jane Smith"
                  />
                  <AvatarFallback>JS</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "bob",
              label: "Bob Johnson",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/4c/4cff4f892ece6dca0865313df96f11ac30e11b6dcbf3b9a86bad86a3049aa6e1.jpg"
                    alt="Bob Johnson"
                  />
                  <AvatarFallback>BJ</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "alice",
              label: "Alice Brown",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/55/55d0cf713811843ffbd3412ee403668a82597bb83aabbc684a87f66c1fc962e4.jpg"
                    alt="Alice Brown"
                  />
                  <AvatarFallback>AB</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "nick",
              label: "Nick Bold",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/d1/d1db668ef30403e132bab1de4720f1c9159e8ba03dc0f3d65d5bf95f3985b80a.jpg"
                    alt="Nick Bold"
                  />
                  <AvatarFallback>NB</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "sarah",
              label: "Sarah Wilson",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/9e/9ef716cb49c8a7e58c27a65358d91e806a1d4c8579a128772a5d9d09d62cb113.jpg"
                    alt="Sarah Wilson"
                  />
                  <AvatarFallback>SW</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "michael",
              label: "Michael Scott",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/af/af66f803b7eca79bf82dcf20589825a624672f03141b801dc0e2adf2e858cd26.jpg"
                    alt="Michael Scott"
                  />
                  <AvatarFallback>MS</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "emily",
              label: "Emily Blunt",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/4f/4fe5438bd9b8b88451a84ff4a1d43d20217239fe5b5510ce751e735ffcd65117.jpg"
                    alt="Emily Blunt"
                  />
                  <AvatarFallback>EB</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "david",
              label: "David Gandy",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/b4/b471183ac240bde44afd6592c20daa6d5cae530c67c6c03952c72a034f021fef.jpg"
                    alt="David Gandy"
                  />
                  <AvatarFallback>DG</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "laura",
              label: "Laura Palmer",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/f2/f22764f3355bb916a04e578d85b3078c4efcd804fe83018ec6ac97ab56e82b5f.jpg"
                    alt="Laura Palmer"
                  />
                  <AvatarFallback>LP</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "kevin",
              label: "Kevin Hart",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/a2/a2c119fd54bdd0e0148ab84a5fe314357a8e5c9dd7c15c0ef574749128437830.jpg"
                    alt="Kevin Hart"
                  />
                  <AvatarFallback>KH</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "anna",
              label: "Anna Kendrick",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/e6/e6ee2e0593ec044ab8b7a4697e34cfb92551c62b9495bf8a524ba905845ddb5d.jpg"
                    alt="Anna Kendrick"
                  />
                  <AvatarFallback>AK</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "tom",
              label: "Tom Cruise",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/a5/a501a0a3424e4bf370d77ee94bcc76545df3c9322fe7154d96bcd55b840b5037.jpg"
                    alt="Tom Cruise"
                  />
                  <AvatarFallback>TC</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "lisa",
              label: "Lisa Kudrow",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/2a/2a2fdbbaf5bf75b85642b3af8adca3da5f6ccfa51b2a28e963d74653e547b5d5.jpg"
                    alt="Lisa Kudrow"
                  />
                  <AvatarFallback>LK</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "james",
              label: "James Bond",
              icon: (
                <Avatar className="size-5">
                  <AvatarImage
                    src="https://cdn.21st.dev/assets/mirror/2f/2f61d9e108f2a1074fb07703cadf176da43f5efb8782537cf07048680fc74e44.jpg"
                    alt="James Bond"
                  />
                  <AvatarFallback>JB</AvatarFallback>
                </Avatar>
              ),
            },
            {
              value: "unassigned",
              label: "Unassigned",
              icon: (
                <Avatar className="size-5">
                  <AvatarFallback>
                    <UserRoundXIcon />
                  </AvatarFallback>
                </Avatar>
              ),
            },
          ],
        },
        {
          key: "userType",
          label: "User Type",
          icon: (
            <UsersIcon />
          ),
          type: "select",
          searchable: false,
          className: "w-[200px]",
          options: [
            {
              value: "premium",
              label: "Premium",
              icon: (
                <StarIcon className="size-3 text-yellow-500" />
              ),
            },
            {
              value: "standard",
              label: "Standard",
              icon: (
                <BuildingIcon className="size-3 text-blue-500" />
              ),
            },
            {
              value: "trial",
              label: "Trial",
              icon: (
                <ClockIcon className="size-3 text-gray-500" />
              ),
            },
          ],
        },
        {
          key: "country",
          label: "Country",
          icon: (
            <GlobeIcon />
          ),
          type: "select",
          searchable: true,
          className: "w-[220px]",
          options: countryFlags.map((country) => ({
            value: country.code,
            label: country.name,
            icon: (
              <img
                src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`}
                alt={country.code}
                className="size-4 rounded-full object-cover"
              />
            ),
          })),
        },
      ],
    },
  ]

  const [filters, setFilters] = useState<Filter[]>([
    createFilter("priority", "is_any_of", ["low", "medium", "critical"]),
  ])

  const handleFiltersChange = useCallback((filters: Filter[]) => {
    setFilters(filters)
  }, [])

  return (
    <div className="flex w-full max-w-[850px] items-start gap-2.5">
      <div className="grow space-y-5">
        {/* Filters Section */}
        <div className="flex items-start gap-2.5">
          <div className="flex-1">
            <Filters
              filters={filters}
              fields={fields}
              onChange={handleFiltersChange}
              shortcutKey="f"
              shortcutLabel="F"
              enableShortcut={true}
              trigger={
                <Button variant="outline">
                  <ListFilterIcon />
                  Add Filter
                </Button>
              }
            />
          </div>

          {filters.length > 0 && (
            <Button variant="outline" onClick={() => setFilters([])}>
              <FunnelXIcon />
              Clear
            </Button>
          )}
        </div>

        {/* Debug Block */}
        <pre className="bg-muted dark:bg-muted/60 mt-2 max-h-[400px] w-full max-w-[500px] overflow-auto overflow-x-auto rounded-md border p-3 text-xs">
          {JSON.stringify(filters, null, 2)}
        </pre>
      </div>
    </div>
  )
}