'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 Divider from '@/components/ui/divider';
import * as Input from '@/components/ui/input';
import * as Label from '@/components/ui/label';
import {
  Actions,
  FilterSidebar,
} 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 useAmountFilter = () => {
  const [directions, setDirections] = React.useState<string[]>(['any']);
  const [specificAmount, setSpecificAmount] = React.useState<string>('');
  const [minAmount, setMinAmount] = React.useState<string>('');
  const [maxAmount, setMaxAmount] = React.useState<string>('');

  const clearSelection = () => {
    setSpecificAmount('');
    setMinAmount('');
    setMaxAmount('');
    setDirections(['any']);
  };

  const toggleDirection = (value: string) => {
    setDirections((prev) => {
      if (prev.includes(value)) {
        return prev.filter((dir) => dir !== value);
      } else {
        return [...prev, value];
      }
    });
  };

  return {
    directions,
    setDirections,
    toggleDirection,
    specificAmount,
    setSpecificAmount,
    minAmount,
    setMinAmount,
    maxAmount,
    setMaxAmount,
    clearSelection,
  };
};

export default function AmountFilterPopover() {
  const [activeFilter, setActiveFilter] = React.useState('Amount');
  const {
    directions,
    toggleDirection,
    specificAmount,
    setSpecificAmount,
    minAmount,
    setMinAmount,
    maxAmount,
    setMaxAmount,
    clearSelection,
  } = useAmountFilter();

  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='flex items-center justify-between px-5 py-4'>
            <div className='flex flex-row items-center gap-2'>
              <CircleDollarSign className='text-text-sub-600 size-5' />
              <h4 className='text-label-sm text-text-strong-950'>Amount</h4>
            </div>
          </div>

          {/* Main content area */}
          <div>
            <Divider.Root variant='solid-text'>DIRECTION</Divider.Root>
            {/* Direction */}
            <div className='flex flex-col gap-4 p-5'>
              <div className='flex items-center justify-between'>
                <div className='flex items-center gap-2'>
                  <Checkbox.Root
                    id='any-direction'
                    checked={directions.includes('any')}
                    onCheckedChange={() => toggleDirection('any')}
                  />
                  <Label.Root
                    htmlFor='any-direction'
                    className='text-paragraph-sm'
                  >
                    Any
                  </Label.Root>
                </div>
                <span className='text-text-soft-400 text-paragraph-xs'>
                  (Recipient)
                </span>
              </div>
              <div className='flex items-center justify-between'>
                <div className='flex items-center gap-2'>
                  <Checkbox.Root
                    id='direction-in'
                    checked={directions.includes('in')}
                    onCheckedChange={() => toggleDirection('in')}
                  />
                  <Label.Root
                    htmlFor='direction-in'
                    className='text-paragraph-sm'
                  >
                    In (e.g. deposits, refunds)
                  </Label.Root>
                </div>
                <span className='text-text-soft-400 text-paragraph-xs'>
                  (Recipient)
                </span>
              </div>
              <div className='flex items-center justify-between'>
                <div className='flex items-center gap-2'>
                  <Checkbox.Root
                    id='direction-out'
                    checked={directions.includes('out')}
                    onCheckedChange={() => toggleDirection('out')}
                  />
                  <Label.Root
                    htmlFor='direction-out'
                    className='text-paragraph-sm'
                  >
                    Out (e.g. purchases, charges)
                  </Label.Root>
                </div>
                <span className='text-text-soft-400 text-paragraph-xs'>
                  (Recipient)
                </span>
              </div>
            </div>

            <div className='border-stroke-soft-200 flex flex-col gap-3 border-t p-5'>
              {/* Specific Amount */}
              <div className='flex flex-col gap-1'>
                <Label.Root htmlFor='specific-amount'>
                  Specific Amount
                </Label.Root>
                <div className='flex items-center'>
                  <Input.Root>
                    <Input.Wrapper>
                      <span className='text-text-soft-400 text-paragraph-sm'>
                        $
                      </span>
                      <Input.Input
                        id='specific-amount'
                        type='text'
                        placeholder='0.00'
                        value={specificAmount}
                        onChange={(e) => setSpecificAmount(e.target.value)}
                      />
                    </Input.Wrapper>
                  </Input.Root>
                </div>
              </div>

              {/* At least... */}
              <div className='flex flex-col gap-1'>
                <Label.Root htmlFor='min-amount'>At least...</Label.Root>
                <div className='flex items-center'>
                  <Input.Root>
                    <Input.Wrapper>
                      <span className='text-text-soft-400 text-paragraph-sm'>
                        $
                      </span>
                      <Input.Input
                        id='min-amount'
                        type='text'
                        placeholder='0.00'
                        value={minAmount}
                        onChange={(e) => setMinAmount(e.target.value)}
                      />
                    </Input.Wrapper>
                  </Input.Root>
                </div>
              </div>

              {/* No more than... */}
              <div className='flex flex-col gap-1'>
                <Label.Root htmlFor='max-amount'>No more than...</Label.Root>
                <div className='flex items-center'>
                  <Input.Root>
                    <Input.Wrapper>
                      <span className='text-text-soft-400 text-paragraph-sm'>
                        $
                      </span>
                      <Input.Input
                        id='max-amount'
                        type='text'
                        placeholder='0.00'
                        value={maxAmount}
                        onChange={(e) => setMaxAmount(e.target.value)}
                      />
                    </Input.Wrapper>
                  </Input.Root>
                </div>
              </div>
            </div>
          </div>

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