'use client';

import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxInput } from '@fox/core/components/fox-input';
import {
  FoxListContainer,
  type FoxListColumn,
} from '@fox/core/components/fox-list-container';
import { FoxSelect } from '@fox/core/components/fox-select';
import { FoxSelectText } from '@fox/core/components/fox-select-text';
import { FoxIconButton } from '@fox/core/components/fox-icon-button';
import { FoxArrowUpRightIcon } from '@fox/core/icons';
import {
  formatOptionalValue,
  formatPoint,
  type PointAccount,
} from '@/lib/domain/point-account';
import {
  CLASS_OPTIONS,
  FILTER_ALL,
  GRADE_OPTIONS,
  NUMBER_OPTIONS,
  POINT_ACCOUNTS_PATH,
  POINT_ACCOUNT_PAGE_SIZE_OPTIONS,
  POINT_ACCOUNT_SEARCH_FIELD_OPTIONS,
  buildPointAccountHref,
  type PointAccountPageSize,
  type PointAccountQuery,
  type PointAccountSearchField,
} from '@/lib/domain/point-account-query';
import { PointDetailModal } from './point-detail-modal';
import styles from './point-account-filter.module.scss';

interface PointAccountListProps {
  items: PointAccount[];
  query: PointAccountQuery;
  currentPage: number;
  totalPages: number;
  totalCount: number;
}

function numberOptions(values: readonly number[], suffix: string) {
  return [
    { value: FILTER_ALL, label: `${suffix} 전체` },
    ...values.map((value) => ({
      value: String(value),
      label: `${value}${suffix}`,
    })),
  ];
}

export function PointAccountList({
  items,
  query,
  currentPage,
  totalPages,
  totalCount,
}: PointAccountListProps) {
  const router = useRouter();
  const [detailAccount, setDetailAccount] = useState<PointAccount | null>(null);
  const [schoolNameDraft, setSchoolNameDraft] = useState(query.schoolName);

  function go(patch: Partial<PointAccountQuery>) {
    router.replace(buildPointAccountHref(query, { ...patch, page: 1 }));
  }

  function selectedNumber(value: number | null) {
    return value === null ? FILTER_ALL : String(value);
  }

  function parseSelected(value: string): number | null {
    return value === FILTER_ALL ? null : Number(value);
  }

  const columns: FoxListColumn<PointAccount>[] = [
    {
      key: 'no',
      header: '번호',
      width: 80,
      render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
    },
    { key: 'loginId', header: '아이디', width: 140 },
    { key: 'studentName', header: '학생명', width: 120, emphasis: true },
    { key: 'schoolName', header: '학교명', width: 160 },
    { key: 'grade', header: '학년', width: 80, align: 'center' },
    { key: 'classNo', header: '반', width: 80, align: 'center' },
    { key: 'studentNo', header: '번호', width: 80, align: 'center' },
    {
      key: 'totalPoint',
      header: '총 포인트',
      width: 120,
      align: 'end',
      render: (row) => formatPoint(row.totalPoint),
    },
    {
      key: 'deductedPoint',
      header: '차감 포인트',
      width: 120,
      align: 'end',
      render: (row) => formatPoint(row.deductedPoint),
    },
    {
      key: 'usedPoint',
      header: '사용 포인트',
      width: 120,
      align: 'end',
      render: (row) => formatPoint(row.usedPoint),
    },
    {
      key: 'currentPoint',
      header: '현재 포인트',
      width: 120,
      align: 'end',
      render: (row) => formatPoint(row.currentPoint),
    },
    {
      key: 'updatedAt',
      header: '수정일시',
      width: 160,
      render: (row) => formatOptionalValue(row.updatedAt),
    },
    { key: 'siteName', header: '구분(사이트)', width: 160 },
    {
      key: 'actions',
      header: '관리',
      width: 100,
      render: (row) => (
        <FoxIconButton
          type="default"
          size="sm"
          icon={<FoxArrowUpRightIcon />}
          label={`${row.studentName} 포인트 상세내역`}
          onAction={() => setDetailAccount(row)}
        />
      ),
    },
  ];

  return (
    <>
      <FoxListContainer<PointAccount>
        title="누적포인트 관리 목록"
        breadcrumb={[
          { label: '홈', href: '/' },
          { label: '포인트관리' },
          { label: '누적포인트 관리' },
        ]}
        caption="누적포인트 관리 목록"
        columns={columns}
        rows={items}
        rowKey={(row) => row.id}
        totalCount={totalCount}
        emptyMessage="검색 결과가 없습니다. 다른 검색어로 다시 시도해 주세요."
        sorts={
          <FoxSelectText
            size="sm"
            ariaLabel="페이지 크기"
            options={POINT_ACCOUNT_PAGE_SIZE_OPTIONS.map((size) => ({
              value: String(size),
              label: `${size}개씩 보기`,
            }))}
            value={String(query.pageSize)}
            onValueChange={(value) =>
              go({ pageSize: Number(value) as PointAccountPageSize })
            }
          />
        }
        filter={
          <div className={styles.filter}>
            <div className={styles.school}>
              <FoxInput
                size="md"
                aria-label="학교명"
                placeholder="학교를 입력하세요."
                value={schoolNameDraft}
                onChange={setSchoolNameDraft}
                onKeyDown={(event) => {
                  if (event.key === 'Enter') {
                    go({ schoolName: schoolNameDraft });
                  }
                }}
              />
            </div>
            <div className={styles.select}>
              <FoxSelect
                size="md"
                ariaLabel="학년"
                options={numberOptions(GRADE_OPTIONS, '학년')}
                value={selectedNumber(query.grade)}
                onValueChange={(value) => go({ grade: parseSelected(value) })}
              />
            </div>
            <div className={styles.select}>
              <FoxSelect
                size="md"
                ariaLabel="반"
                options={numberOptions(CLASS_OPTIONS, '반')}
                value={selectedNumber(query.classNo)}
                onValueChange={(value) => go({ classNo: parseSelected(value) })}
              />
            </div>
            <div className={styles.select}>
              <FoxSelect
                size="md"
                ariaLabel="번호"
                options={numberOptions(NUMBER_OPTIONS, '번')}
                value={selectedNumber(query.studentNo)}
                onValueChange={(value) => go({ studentNo: parseSelected(value) })}
              />
            </div>
          </div>
        }
        searchFields={POINT_ACCOUNT_SEARCH_FIELD_OPTIONS.map((option) => ({
          value: option.value,
          label: option.label,
        }))}
        searchField={query.searchField}
        keyword={query.keyword}
        searchPlaceholder="검색어를 입력하세요."
        toolbarActions={
          <FoxButton
            type="default"
            size="md"
            label="초기화"
            onAction={() => {
              setSchoolNameDraft('');
              router.replace(POINT_ACCOUNTS_PATH);
            }}
          />
        }
        page={currentPage}
        totalPages={totalPages}
        buildHref={(patch) =>
          buildPointAccountHref(query, { page: Number(patch.page ?? 1) })
        }
        onQueryChange={(patch) => {
          if (patch.keyword !== undefined || patch.searchField !== undefined) {
            go({
              schoolName: schoolNameDraft,
              keyword: String(patch.keyword ?? ''),
              searchField: (patch.searchField ??
                query.searchField) as PointAccountSearchField,
            });
          }
        }}
      />

      {detailAccount && (
        <PointDetailModal
          account={detailAccount}
          onClose={() => setDetailAccount(null)}
        />
      )}
    </>
  );
}