'use client';

import * as React from 'react';
import {
  Landmark,
  CalendarDays,
  CircleDollarSign,
  Tag,
  UserRound,
} from 'lucide-react';

import * as Checkbox from '@/components/ui/checkbox';
import * as Label from '@/components/ui/label';
import * as LinkButton from '@/components/ui/link-button';
import {
  Actions,
  FilterSidebar,
  NoResults,
  SearchField,
} from '@/components/blocks/filter/filter-popover-parts';
const FILTER_TYPES = [
  { icon: <CalendarDays />, label: 'Date' },
  { icon: <UserRound />, label: 'Customers' },
  { icon: <CircleDollarSign />, label: 'Amount' },
  { icon: <Tag />, label: 'Categories' },
  { icon: <Landmark />, label: 'Accounts' },
];

const CUSTOMERS = [
  { name: 'James Brown' },
  { name: 'Sophia Williams' },
  { name: 'Arthur Taylor' },
  { name: 'Emma Wright' },
  { name: 'Matthew Johnson' },
  { name: 'Laura Perez' },
  { name: 'Wei Chen' },
];

type CustomerItemProps = {
  name: string;
  selected: boolean;
  onSelect: () => void;
};

const CustomerItem = ({ name, selected, onSelect }: CustomerItemProps) => {
  const id = React.useId();

  return (
    <div className='flex items-center justify-between'>
      <div className='flex items-center gap-2'>
        <Checkbox.Root id={id} checked={selected} onCheckedChange={onSelect} />
        <Label.Root
          htmlFor={id}
          className='text-paragraph-sm text-text-strong-950'
        >
          {name}
        </Label.Root>
      </div>
      <div className='text-paragraph-xs text-text-soft-400'>(Recipient)</div>
    </div>
  );
};

const useCustomerFilter = () => {
  const [selectedCustomers, setSelectedCustomers] = React.useState<string[]>([
    'James Brown',
  ]);

  const toggleCustomer = (customerName: string) => {
    if (selectedCustomers.includes(customerName)) {
      setSelectedCustomers(
        selectedCustomers.filter((name) => name !== customerName),
      );
    } else {
      setSelectedCustomers([...selectedCustomers, customerName]);
    }
  };

  const selectAll = () => {
    setSelectedCustomers(CUSTOMERS.map((customer) => customer.name));
  };

  const clearSelection = () => {
    setSelectedCustomers([]);
  };

  return {
    selectedCustomers,
    toggleCustomer,
    selectAll,
    clearSelection,
  };
};

export default function CustomerFilterPopover() {
  const [activeFilter, setActiveFilter] = React.useState('Customers');
  const [searchQuery, setSearchQuery] = React.useState('');
  const { selectedCustomers, toggleCustomer, selectAll, clearSelection } =
    useCustomerFilter();

  const filteredCustomers = CUSTOMERS.filter((customer) =>
    customer.name.toLowerCase().includes(searchQuery.toLowerCase()),
  );

  return (
    <div className='rounded-20 bg-bg-white-0 shadow-custom-md w-[min(696px,calc(100vw-32px))] overflow-hidden'>
      <div className='flex flex-col md:flex-row'>
        <FilterSidebar
          items={FILTER_TYPES}
          active={activeFilter}
          onActiveChange={setActiveFilter}
        />

        {/* Content */}
        <div className='flex-1'>
          {/* Header */}
          <div className='border-stroke-soft-200 flex items-center justify-between border-b px-5 py-4'>
            <div className='flex flex-row items-center gap-2'>
              <UserRound className='text-text-sub-600 size-5' />
              <h4 className='text-label-sm text-text-strong-950'>Customers</h4>
            </div>
            <LinkButton.Root variant='gray' onClick={selectAll}>
              Select All
            </LinkButton.Root>
          </div>

          <SearchField value={searchQuery} onChange={setSearchQuery} />

          {/* Customer List */}
          <div className='flex max-h-[320px] flex-col gap-4 overflow-y-auto p-5'>
            {filteredCustomers.map((customer) => (
              <CustomerItem
                key={customer.name}
                name={customer.name}
                selected={selectedCustomers.includes(customer.name)}
                onSelect={() => toggleCustomer(customer.name)}
              />
            ))}
            {filteredCustomers.length === 0 && <NoResults />}
          </div>

          <Actions onClear={clearSelection} />
        </div>
      </div>
    </div>
  );
}