// frontend/src/modals/bellcloud/devices/DeviceFiltersModal.jsx
// Filter modal for Device Fleet list — grouped filter options

import Modal from '@/components/ui/Modal'
import Button from '@/components/ui/Button'

const TIER_OPTIONS = ['basic', 'small', 'mini', 'premium', 'vip', 'custom']

function FilterGroup({ label, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
      <div style={{
        fontSize: 'var(--font-size-xs)',
        fontWeight: 'var(--font-weight-semibold)',
        textTransform: 'uppercase',
        letterSpacing: 'var(--tracking-wide)',
        color: 'var(--color-text-muted)',
        marginBottom: 'var(--space-1)',
      }}>
        {label}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
        {children}
      </div>
    </div>
  )
}

function FilterChip({ label, active, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        padding: 'var(--space-1) var(--space-3)',
        borderRadius: 'var(--radius-full)',
        border: `1px solid ${active ? 'var(--color-primary)' : 'var(--color-border)'}`,
        backgroundColor: active ? 'var(--color-primary-subtle)' : 'transparent',
        color: active ? 'var(--color-primary)' : 'var(--color-text-secondary)',
        fontSize: 'var(--font-size-sm)',
        fontWeight: active ? 'var(--font-weight-semibold)' : 'var(--font-weight-normal)',
        cursor: 'pointer',
        transition: 'all 120ms ease',
        whiteSpace: 'nowrap',
      }}
    >
      {label}
    </button>
  )
}

export default function DeviceFiltersModal({
  open,
  onClose,
  // Server-side filters
  onlineFilter,        setOnlineFilter,
  tierFilter,          setTierFilter,
  // Client-side filters
  subscrStatusFilter,  setSubscrStatusFilter,
  warrantyStatusFilter, setWarrantyStatusFilter,
  hasClockFilter,      setHasClockFilter,
  hasBellsFilter,      setHasBellsFilter,
}) {
  const hasAnyFilter = onlineFilter || tierFilter || subscrStatusFilter || warrantyStatusFilter || hasClockFilter || hasBellsFilter

  function clearAll() {
    setOnlineFilter('')
    setTierFilter('')
    setSubscrStatusFilter('')
    setWarrantyStatusFilter('')
    setHasClockFilter('')
    setHasBellsFilter('')
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Filter Devices"
      size="md"
      footer={
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-3)' }}>
          <Button variant="ghost" onClick={clearAll} disabled={!hasAnyFilter}>
            Clear All Filters
          </Button>
          <Button variant="primary" onClick={onClose}>
            Apply
          </Button>
        </div>
      }
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>

        {/* Status */}
        <FilterGroup label="Status">
          <FilterChip label="Online"  active={onlineFilter === 'true'}  onClick={() => setOnlineFilter(onlineFilter === 'true'  ? '' : 'true')} />
          <FilterChip label="Offline" active={onlineFilter === 'false'} onClick={() => setOnlineFilter(onlineFilter === 'false' ? '' : 'false')} />
        </FilterGroup>

        {/* Subscription Tier */}
        <FilterGroup label="Subscription Tier">
          {TIER_OPTIONS.map((t) => (
            <FilterChip
              key={t}
              label={t.charAt(0).toUpperCase() + t.slice(1)}
              active={tierFilter === t}
              onClick={() => setTierFilter(tierFilter === t ? '' : t)}
            />
          ))}
        </FilterGroup>

        {/* Subscription Status */}
        <FilterGroup label="Subscription Status">
          <FilterChip label="Active"  active={subscrStatusFilter === 'active'}  onClick={() => setSubscrStatusFilter(subscrStatusFilter === 'active'  ? '' : 'active')} />
          <FilterChip label="Expired" active={subscrStatusFilter === 'expired'} onClick={() => setSubscrStatusFilter(subscrStatusFilter === 'expired' ? '' : 'expired')} />
        </FilterGroup>

        {/* Warranty */}
        <FilterGroup label="Warranty">
          <FilterChip label="Active"  active={warrantyStatusFilter === 'active'}  onClick={() => setWarrantyStatusFilter(warrantyStatusFilter === 'active'  ? '' : 'active')} />
          <FilterChip label="Expired" active={warrantyStatusFilter === 'expired'} onClick={() => setWarrantyStatusFilter(warrantyStatusFilter === 'expired' ? '' : 'expired')} />
        </FilterGroup>

        {/* Hardware */}
        <FilterGroup label="Has Clock">
          <FilterChip label="Yes" active={hasClockFilter === 'yes'} onClick={() => setHasClockFilter(hasClockFilter === 'yes' ? '' : 'yes')} />
          <FilterChip label="No"  active={hasClockFilter === 'no'}  onClick={() => setHasClockFilter(hasClockFilter === 'no'  ? '' : 'no')} />
        </FilterGroup>

        <FilterGroup label="Has Bells">
          <FilterChip label="Yes" active={hasBellsFilter === 'yes'} onClick={() => setHasBellsFilter(hasBellsFilter === 'yes' ? '' : 'yes')} />
          <FilterChip label="No"  active={hasBellsFilter === 'no'}  onClick={() => setHasBellsFilter(hasBellsFilter === 'no'  ? '' : 'no')} />
        </FilterGroup>

      </div>
    </Modal>
  )
}
