'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';

// Constants
const FILTER_TYPES = [
  { icon: <CalendarDays />, label: 'Date' },
  { icon: <UserRound />, label: 'Customers' },
  { icon: <CircleDollarSign />, label: 'Amount' },
  { icon: <Tag />, label: 'Categories' },
  { icon: <Landmark />, label: 'Accounts' },
];

const ACCOUNTS = [
  { name: 'Credit' },
  { name: 'Treasury' },
  { name: 'Ops / Payroll' },
  { name: 'AP' },
  { name: 'AR' },
  { name: 'Checking' },
  { name: 'Savings' },
];

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

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

  return (
    <div className='flex items-center'>
      <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>
  );
};

// Custom hook
const useAccountFilter = () => {
  const [selectedAccounts, setSelectedAccounts] = React.useState<string[]>([
    'Ops / Payroll',
    'Checking',
  ]);

  const toggleAccount = (accountName: string) => {
    if (selectedAccounts.includes(accountName)) {
      setSelectedAccounts(
        selectedAccounts.filter((name) => name !== accountName),
      );
    } else {
      setSelectedAccounts([...selectedAccounts, accountName]);
    }
  };

  const selectAll = () => {
    setSelectedAccounts(ACCOUNTS.map((account) => account.name));
  };

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

  return {
    selectedAccounts,
    toggleAccount,
    selectAll,
    clearSelection,
  };
};

// Main Component
export default function AccountFilterPopover() {
  const [activeFilter, setActiveFilter] = React.useState('Accounts');
  const [searchQuery, setSearchQuery] = React.useState('');
  const { selectedAccounts, toggleAccount, selectAll, clearSelection } =
    useAccountFilter();

  const filteredAccounts = ACCOUNTS.filter((account) =>
    account.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'>
              <Landmark className='text-text-sub-600 size-5' />
              <h4 className='text-label-sm text-text-strong-950'>Accounts</h4>
            </div>
            <LinkButton.Root variant='gray' onClick={selectAll}>
              Select All
            </LinkButton.Root>
          </div>

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

          {/* Account List */}
          <div className='flex max-h-[320px] flex-col gap-4 overflow-y-auto p-5'>
            {filteredAccounts.map((account) => (
              <AccountItem
                key={account.name}
                name={account.name}
                selected={selectedAccounts.includes(account.name)}
                onSelect={() => toggleAccount(account.name)}
              />
            ))}
            {filteredAccounts.length === 0 && <NoResults />}
          </div>

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