'use client';

import * as React from 'react';
import { ChevronRight, Search } from 'lucide-react';

import * as Button from '@/components/ui/button';
import * as EmptyState from '@/components/ui/empty-state';
import * as Kbd from '@/components/ui/kbd';
import { cn } from '@/utils/cn';

type FilterType = {
  icon: React.ReactNode;
  label: string;
};

function FilterSidebar({
  items,
  active,
  onActiveChange,
}: {
  items: FilterType[];
  active: string;
  onActiveChange: (value: string) => void;
}) {
  return (
    <div className='border-stroke-soft-200 w-full border-b md:w-[224px] md:border-r md:border-b-0'>
      <div className='flex flex-row gap-2 overflow-x-auto p-3 md:flex-col'>
        {items.map((item) => (
          <button
            key={item.label}
            className={cn(
              'flex w-full items-center gap-2 rounded-lg p-2 text-left',
              'group relative transition-all duration-200 ease-out',
              active === item.label
                ? 'bg-bg-weak-50 text-stroke-strong-950 font-medium'
                : 'text-text-sub-600 hover:bg-bg-weak-50',
            )}
            onClick={() => onActiveChange(item.label)}
          >
            <span
              className={cn(
                'flex size-5 items-center justify-center',
                active === item.label
                  ? 'text-primary-base'
                  : 'text-text-soft-400',
              )}
            >
              {item.icon}
            </span>
            <span className='text-label-sm'>{item.label}</span>
            {active === item.label && (
              <ChevronRight className='text-text-soft-400 ml-auto hidden size-5 md:block md:opacity-100' />
            )}
          </button>
        ))}
      </div>
    </div>
  );
}

function SearchField({
  value,
  onChange,
}: {
  value: string;
  onChange: (value: string) => void;
}) {
  return (
    <div className='group/cmd-input border-stroke-soft-200 flex h-11 items-center gap-2 border-b px-5'>
      <Search
        className={cn(
          'text-text-soft-400 size-5 shrink-0',
          'transition duration-200 ease-out',
          'group-focus-within/cmd-input:text-primary-base',
        )}
      />
      <input
        type='text'
        className='text-paragraph-sm text-text-strong-950 placeholder:text-text-sub-600 h-full w-full flex-1 bg-transparent outline-none'
        placeholder='Search...'
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
      <Kbd.Root>⌘K</Kbd.Root>
    </div>
  );
}

function Actions({ onClear }: { onClear: () => void }) {
  return (
    <div className='border-stroke-soft-200 mt-auto flex justify-between gap-4 border-t px-5 py-4'>
      <Button.Root
        variant='neutral'
        mode='stroke'
        size='small'
        className='flex-1'
        onClick={onClear}
      >
        Clear
      </Button.Root>
      <Button.Root
        variant='primary'
        mode='filled'
        size='small'
        className='flex-1'
      >
        Apply
      </Button.Root>
    </div>
  );
}

function NoResults() {
  return <EmptyState.Root title='No results found' />;
}

export { Actions, FilterSidebar, NoResults, SearchField };
export type { FilterType };