'use client';

/**
 * 모바일 종합 필터 컴포넌트
 *
 * PC에서 여러 개의 필터를 모바일에서는 하나의 바텀시트로 통합
 * - 단일선택(single), 다중선택(multi) 필드 지원
 * - 적용된 필터 개수 배지 표시
 * - 초기화/적용 버튼
 * - PC와 동일한 셀렉트 박스 형태로 컴팩트하게 표시
 */

import * as React from 'react';
import { Filter, X, Check, RotateCcw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Label } from '@/components/ui/label';
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerFooter,
  DrawerClose,
} from '@/components/ui/drawer';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { MultiSelectCombobox } from '@/components/ui/multi-select-combobox';
import { cn } from '@/lib/utils';

// 필터 옵션 타입
export interface FilterOption {
  value: string;
  label: string;
}

// 필터 필드 설정 타입
export interface FilterFieldConfig {
  key: string;
  label: string;
  type: 'single' | 'multi';
  options: readonly FilterOption[];
  allOptionLabel?: string; // single 타입에서 "전체" 옵션 라벨 (기본: '전체')
}

// 필터 값 타입
export type FilterValues = Record<string, string | string[]>;

// MobileFilter Props
export interface MobileFilterProps {
  fields: FilterFieldConfig[];
  values: FilterValues;
  onChange: (key: string, value: string | string[]) => void;
  onReset: () => void;
  onApply?: () => void;
  buttonLabel?: string;
  title?: string;
  className?: string;
  /** 적용된 필터를 버튼 아래 태그로 표시할지 여부 (기본: true) */
  showAppliedTags?: boolean;
}

/**
 * 적용된 필터 개수 계산
 */
function countActiveFilters(
  fields: FilterFieldConfig[],
  values: FilterValues
): number {
  let count = 0;

  for (const field of fields) {
    const value = values[field.key];

    if (field.type === 'single') {
      // single: 'all'이 아니면 활성화
      if (value && value !== 'all') {
        count++;
      }
    } else {
      // multi: 배열에 값이 있으면 활성화
      if (Array.isArray(value) && value.length > 0) {
        count++;
      }
    }
  }

  return count;
}

/**
 * 필터 필드 요약 텍스트 생성
 */
function _getFieldSummary(
  field: FilterFieldConfig,
  value: string | string[] | undefined
): string {
  if (field.type === 'single') {
    if (!value || value === 'all') return field.allOptionLabel || '전체';
    const option = field.options.find((opt) => opt.value === value);
    return option?.label || '전체';
  } else {
    const arr = Array.isArray(value) ? value : [];
    if (arr.length === 0) return '전체';
    if (arr.length === field.options.length) return '전체';
    const firstOption = field.options.find((opt) => arr.includes(opt.value));
    if (arr.length === 1) return firstOption?.label || '';
    return `${firstOption?.label} 외 ${arr.length - 1}`;
  }
}

/**
 * 적용된 필터 태그 목록 생성
 */
function getAppliedFilterTags(
  fields: FilterFieldConfig[],
  values: FilterValues
): Array<{ key: string; label: string; displayValue: string }> {
  const tags: Array<{ key: string; label: string; displayValue: string }> = [];

  for (const field of fields) {
    const value = values[field.key];

    if (field.type === 'single') {
      // single: 'all'이 아니면 태그 추가
      if (value && value !== 'all') {
        const option = field.options.find((opt) => opt.value === value);
        if (option) {
          tags.push({
            key: field.key,
            label: field.label,
            displayValue: option.label,
          });
        }
      }
    } else {
      // multi: 배열에 값이 있으면 태그 추가
      const arr = Array.isArray(value) ? value : [];
      if (arr.length > 0) {
        const firstOption = field.options.find((opt) => arr.includes(opt.value));
        const displayValue =
          arr.length === 1
            ? firstOption?.label || ''
            : `${firstOption?.label} 외 ${arr.length - 1}`;
        tags.push({
          key: field.key,
          label: field.label,
          displayValue,
        });
      }
    }
  }

  return tags;
}

export function MobileFilter({
  fields,
  values,
  onChange,
  onReset,
  onApply,
  buttonLabel = '필터',
  title = '검색 필터',
  className,
  showAppliedTags = true,
}: MobileFilterProps) {
  const [open, setOpen] = React.useState(false);
  const activeCount = countActiveFilters(fields, values);
  const appliedTags = showAppliedTags ? getAppliedFilterTags(fields, values) : [];

  // 개별 필터 초기화 핸들러
  const handleClearFilter = (key: string) => {
    const field = fields.find((f) => f.key === key);
    if (field) {
      if (field.type === 'single') {
        onChange(key, 'all');
      } else {
        onChange(key, []);
      }
    }
  };

  // 초기화 핸들러
  const handleReset = () => {
    onReset();
  };

  // 적용 핸들러
  const handleApply = () => {
    if (onApply) {
      onApply();
    }
    setOpen(false);
  };

  return (
    <div className="flex flex-col gap-2">
      {/* 상단: 필터 버튼 + 적용된 태그 */}
      <div className="flex items-center gap-2 flex-wrap">
        {/* 필터 버튼 */}
        <Button
          variant="outline"
          size="sm"
          className={cn('gap-2', className)}
          onClick={() => setOpen(true)}
        >
          <Filter className="h-4 w-4" />
          <span>{buttonLabel}</span>
          {activeCount > 0 && (
            <Badge
              variant="secondary"
              className="h-5 min-w-5 rounded-full px-1.5 text-xs bg-primary text-primary-foreground"
            >
              {activeCount}
            </Badge>
          )}
        </Button>

        {/* 적용된 필터 태그 */}
        {showAppliedTags && appliedTags.length > 0 && (
          <>
            {appliedTags.map((tag) => (
              <Badge
                key={tag.key}
                variant="secondary"
                className="gap-1 pr-1 text-xs font-normal bg-muted hover:bg-muted"
              >
                <span className="text-muted-foreground">{tag.label}:</span>
                <span>{tag.displayValue}</span>
                <button
                  type="button"
                  onClick={() => handleClearFilter(tag.key)}
                  className="ml-0.5 rounded-full hover:bg-foreground/10 p-0.5"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            ))}
            {/* 전체 초기화 버튼 */}
            <button
              type="button"
              onClick={onReset}
              className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
            >
              <RotateCcw className="h-3 w-3" />
              초기화
            </button>
          </>
        )}
      </div>

      {/* 필터 Drawer (바텀시트) */}
      <Drawer open={open} onOpenChange={setOpen}>
        <DrawerContent className="max-h-[85vh] flex flex-col">
          <DrawerHeader className="border-b flex-shrink-0">
            <div className="flex items-center justify-between">
              <DrawerTitle>{title}</DrawerTitle>
              <DrawerClose asChild>
                <Button variant="ghost" size="icon" className="h-8 w-8">
                  <X className="h-4 w-4" />
                </Button>
              </DrawerClose>
            </div>
          </DrawerHeader>

          {/* 컴팩트한 셀렉트 박스 형태 - 스크롤 가능 */}
          <div className="px-4 py-4 space-y-4 overflow-y-auto flex-1">
            {fields.map((field) => (
              <div key={field.key} className="space-y-1.5">
                <Label className="text-sm font-medium text-muted-foreground">
                  {field.label}
                </Label>
                {field.type === 'single' ? (
                  // 단일선택: Select
                  <Select
                    value={(values[field.key] as string) || 'all'}
                    onValueChange={(value) => onChange(field.key, value)}
                  >
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder={field.allOptionLabel || '전체'} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">
                        {field.allOptionLabel || '전체'}
                      </SelectItem>
                      {field.options.filter(opt => opt.value !== '').map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                ) : (
                  // 다중선택: MultiSelectCombobox
                  <MultiSelectCombobox
                    options={field.options
                      .filter(opt => opt.value !== '')
                      .map((opt) => ({
                        value: opt.value,
                        label: opt.label,
                      }))}
                    value={(values[field.key] as string[]) || []}
                    onChange={(value) => onChange(field.key, value)}
                    placeholder="전체"
                    searchPlaceholder={`${field.label} 검색...`}
                    className="w-full"
                  />
                )}
              </div>
            ))}
          </div>

          <DrawerFooter className="border-t flex-row gap-2 flex-shrink-0">
            <Button
              variant="outline"
              className="flex-1 gap-2"
              onClick={handleReset}
            >
              <RotateCcw className="h-4 w-4" />
              초기화
            </Button>
            <Button className="flex-1 gap-2" onClick={handleApply}>
              <Check className="h-4 w-4" />
              적용
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  );
}