// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {useState, useMemo} from 'react';
import {
  VStack,
  HStack,
  StackItem,
  Layout,
  LayoutContent,
  LayoutHeader,
} from '@astryxdesign/core/Layout';
import {Text, Heading} from '@astryxdesign/core/Text';
import {Button} from '@astryxdesign/core/Button';
import {IconButton} from '@astryxdesign/core/IconButton';
import {Icon} from '@astryxdesign/core/Icon';
import {Avatar} from '@astryxdesign/core/Avatar';
import {PowerSearch, usePowerSearchConfig} from '@astryxdesign/core/PowerSearch';
import type {PowerSearchFilter} from '@astryxdesign/core/PowerSearch';
import {Table, proportional, pixel} from '@astryxdesign/core/Table';
import type {TableColumn} from '@astryxdesign/core/Table';
import {
  FunnelIcon,
  ArrowDownTrayIcon,
  PlusIcon,
} from '@heroicons/react/24/outline';

interface DogRow extends Record<string, unknown> {
  id: string;
  name: string;
  breed: string;
  biography: string;
  age: number;
}

const allDogs: DogRow[] = [
  {
    id: '1',
    name: 'Adam',
    breed: 'Labrador',
    biography:
      'I love relaxing in the park and hate skateboards — you might wonder how well those things mix and the answer is "not that well."',
    age: 17,
  },
  {
    id: '2',
    name: 'Al Chihuahua',
    breed: 'Chihuahua',
    biography: 'This is a Chihuahua generated by meta.ai',
    age: 2,
  },
  {
    id: '3',
    name: 'Archer',
    breed: 'Doberman',
    biography:
      "I'm an 8 year old Greater Swiss Mountain Dog and I live in Mountain View with my mom and dad.",
    age: 9,
  },
  {
    id: '4',
    name: 'Archie',
    breed: 'Australian Shepherd',
    biography: 'Border collie at heart, shepherd by trade.',
    age: 5,
  },
  {
    id: '5',
    name: 'Argos',
    breed: 'Labrador',
    biography: 'Faithful hunting dog who never gives up the trail.',
    age: 23,
  },
  {
    id: '6',
    name: 'Banjo',
    breed: 'Poodle',
    biography:
      "Banjo was a rescue from Underdog Rescue in Concord, CA. He's a loving poodle mix that loves to run on the beach.",
    age: 9,
  },
  {
    id: '7',
    name: 'Barley',
    breed: 'Maltese',
    biography: 'Teacup-sized with a full-sized personality.',
    age: 4,
  },
  {
    id: '8',
    name: 'Beast',
    breed: 'Bulldog',
    biography: 'Summers in Palo Alto, winters on the couch.',
    age: 14,
  },
  {
    id: '9',
    name: 'Belki',
    breed: 'Pomsky',
    biography: 'Belki is actually three squirrels in an overcoat.',
    age: 6,
  },
  {
    id: '10',
    name: 'Bella',
    breed: 'Doberman',
    biography: 'Guard dog by day, cuddle bug by night.',
    age: 10,
  },
  {
    id: '11',
    name: 'Brienne',
    breed: 'Dachshund',
    biography: 'Brienne of Bark, the cream mini dachshund.',
    age: 7,
  },
  {
    id: '12',
    name: 'Bruno',
    breed: 'Poodle',
    biography:
      "Bruno is a shih tzu. He's a smart doggo — I never needed more than a day to teach him a trick.",
    age: 5,
  },
  {
    id: '13',
    name: 'Cabo',
    breed: 'Poodle',
    biography:
      'Cabo is a mix of Terrier, Poodle, and unknown. Fat and grumpy but lovable.',
    age: 9,
  },
  {
    id: '14',
    name: 'Chai',
    breed: 'Shiba Inu',
    biography: 'Sunshine and hiking are the only two things that matter.',
    age: 1,
  },
  {
    id: '15',
    name: 'Charlie',
    breed: 'Golden Retriever',
    biography: 'The goodest boy in the whole wide world.',
    age: 3,
  },
  {
    id: '16',
    name: 'Coco',
    breed: 'French Bulldog',
    biography: 'Loves naps and belly rubs more than anything.',
    age: 6,
  },
  {
    id: '17',
    name: 'Daisy',
    breed: 'Beagle',
    biography: 'Will follow any scent trail anywhere, anytime.',
    age: 8,
  },
  {
    id: '18',
    name: 'Duke',
    breed: 'German Shepherd',
    biography: 'Guard dog by day, couch potato by night.',
    age: 11,
  },
  {
    id: '19',
    name: 'Ella',
    breed: 'Corgi',
    biography: 'Short legs, big personality, endless zoomies.',
    age: 4,
  },
  {
    id: '20',
    name: 'Finn',
    breed: 'Husky',
    biography: 'Loves snow and howling at the moon.',
    age: 7,
  },
  {
    id: '21',
    name: 'Ginger',
    breed: 'Irish Setter',
    biography: 'Red and rambunctious with boundless energy.',
    age: 5,
  },
  {
    id: '22',
    name: 'Hank',
    breed: 'Basset Hound',
    biography: 'Ears for days and a nose that never quits.',
    age: 9,
  },
  {
    id: '23',
    name: 'Izzy',
    breed: 'Border Collie',
    biography: 'Smarter than most people I know.',
    age: 3,
  },
  {
    id: '24',
    name: 'Jax',
    breed: 'Pit Bull',
    biography: 'Gentle giant who loves kids and belly scratches.',
    age: 6,
  },
  {
    id: '25',
    name: 'Koda',
    breed: 'Akita',
    biography: 'Loyal, fluffy, and fiercely protective.',
    age: 8,
  },
  {
    id: '26',
    name: 'Luna',
    breed: 'Samoyed',
    biography: 'A cloud on four legs with a permanent smile.',
    age: 2,
  },
  {
    id: '27',
    name: 'Max',
    breed: 'Rottweiler',
    biography: 'Looks tough, but melts for ear scratches.',
    age: 10,
  },
  {
    id: '28',
    name: 'Nala',
    breed: 'Labradoodle',
    biography: 'Hypoallergenic and proud of it.',
    age: 4,
  },
  {
    id: '29',
    name: 'Oscar',
    breed: 'Dachshund',
    biography: 'Long boy with short legs and big dreams.',
    age: 12,
  },
  {
    id: '30',
    name: 'Penny',
    breed: 'Cavalier King Charles',
    biography: 'Lap dog extraordinaire and treat connoisseur.',
    age: 7,
  },
  {
    id: '31',
    name: 'Rex',
    breed: 'Doberman',
    biography: 'Fast, fearless, and first to the food bowl.',
    age: 5,
  },
  {
    id: '32',
    name: 'Sadie',
    breed: 'Australian Shepherd',
    biography: 'Herds everything, including the cat.',
    age: 3,
  },
  {
    id: '33',
    name: 'Tucker',
    breed: 'Golden Retriever',
    biography: 'Tennis ball enthusiast and professional fetcher.',
    age: 6,
  },
  {
    id: '34',
    name: 'Willow',
    breed: 'Greyhound',
    biography: 'Retired racer, full-time lounger.',
    age: 8,
  },
  {
    id: '35',
    name: 'Zeus',
    breed: 'Great Dane',
    biography: 'Thinks he is a lap dog despite weighing 150 lbs.',
    age: 4,
  },
  {
    id: '36',
    name: 'Rosie',
    breed: 'Maltipoo',
    biography: 'Tiny but mighty with a bark bigger than her bite.',
    age: 2,
  },
  {
    id: '37',
    name: 'Scout',
    breed: 'Labrador',
    biography: 'Adventure buddy who never says no to a hike.',
    age: 5,
  },
  {
    id: '38',
    name: 'Teddy',
    breed: 'Bernese Mountain Dog',
    biography: 'Gentle giant of the mountains.',
    age: 7,
  },
];

const breedValues = [
  {value: 'Labrador', label: 'Labrador'},
  {value: 'Chihuahua', label: 'Chihuahua'},
  {value: 'Doberman', label: 'Doberman'},
  {value: 'Australian Shepherd', label: 'Australian Shepherd'},
  {value: 'Poodle', label: 'Poodle'},
  {value: 'Maltese', label: 'Maltese'},
  {value: 'Bulldog', label: 'Bulldog'},
  {value: 'Pomsky', label: 'Pomsky'},
  {value: 'Dachshund', label: 'Dachshund'},
  {value: 'Shiba Inu', label: 'Shiba Inu'},
  {value: 'Golden Retriever', label: 'Golden Retriever'},
  {value: 'French Bulldog', label: 'French Bulldog'},
  {value: 'Beagle', label: 'Beagle'},
  {value: 'German Shepherd', label: 'German Shepherd'},
  {value: 'Corgi', label: 'Corgi'},
  {value: 'Husky', label: 'Husky'},
  {value: 'Irish Setter', label: 'Irish Setter'},
  {value: 'Basset Hound', label: 'Basset Hound'},
  {value: 'Border Collie', label: 'Border Collie'},
  {value: 'Pit Bull', label: 'Pit Bull'},
  {value: 'Akita', label: 'Akita'},
  {value: 'Samoyed', label: 'Samoyed'},
  {value: 'Rottweiler', label: 'Rottweiler'},
  {value: 'Labradoodle', label: 'Labradoodle'},
  {value: 'Cavalier King Charles', label: 'Cavalier King Charles'},
  {value: 'Great Dane', label: 'Great Dane'},
  {value: 'Maltipoo', label: 'Maltipoo'},
  {value: 'Greyhound', label: 'Greyhound'},
  {value: 'Bernese Mountain Dog', label: 'Bernese Mountain Dog'},
];

const fieldDefs = [
  {key: 'name', type: 'string', label: 'Name'},
  {key: 'breed', type: 'enum', label: 'Breed', enumValues: breedValues},
  {key: 'biography', type: 'string', label: 'Biography'},
] as const;

const columns: TableColumn<DogRow>[] = [
  {
    key: 'name',
    header: 'Name',
    width: proportional(2),
    renderCell: (item: DogRow) => (
      <HStack gap={3} vAlign="center">
        <Avatar name={item.name} size="small" />
        <VStack gap={0}>
          <Text type="body">{item.name}</Text>
          <Text type="supporting" color="secondary">
            {item.breed}
          </Text>
        </VStack>
      </HStack>
    ),
  },
  {
    key: 'biography',
    header: 'Biography',
    width: proportional(5),
    renderCell: (item: DogRow) => (
      <Text type="body">{item.biography}</Text>
    ),
  },
  {
    key: 'age',
    header: 'Age',
    width: pixel(80),
    renderCell: (item: DogRow) => <Text type="body">{item.age}</Text>,
  },
];

export default function TablePageTemplate() {
  const [filters, setFilters] = useState<PowerSearchFilter[]>([]);
  const {config, applyFilters} = usePowerSearchConfig(fieldDefs, 'Dogs');

  const filtered = useMemo(() => {
    return applyFilters(filters, allDogs);
  }, [filters, applyFilters]);

  return (
    <Layout
      height="auto"
      header={
        <LayoutHeader hasDivider>
          <HStack gap={2} vAlign="center">
            <StackItem size="fill">
              <Heading level={1}>Dogs</Heading>
            </StackItem>
            <IconButton
              label="Filter"
              icon={<Icon icon={FunnelIcon} size="sm" />}
              variant="ghost"
            />
            <IconButton
              label="Download"
              icon={<Icon icon={ArrowDownTrayIcon} size="sm" />}
              variant="ghost"
            />
            <Button
              label="Add"
              icon={<Icon icon={PlusIcon} size="sm" />}
            />
          </HStack>
        </LayoutHeader>
      }
      content={
        <LayoutContent padding={3}>
          <VStack gap={4}>
            <PowerSearch
              config={config}
              filters={filters}
              onChange={newFilters => {
                setFilters([...newFilters]);
              }}
              placeholder="Search dogs..."
              resultCount={filtered.length}
            />
            <Table<DogRow>
              data={filtered}
              columns={columns}
              idKey="id"
              density="balanced"
              dividers="rows"
              hasHover
            />
          </VStack>
        </LayoutContent>
      }
    />
  );
}
