accountbook/frontend/pages/search.js

import { useState, useEffect, useMemo } from 'react';
import { useRouter } from 'next/router';
import { isLoggedIn, searchRecords, updateRecord, deleteRecord } from '../lib/api';
import AppShell from '../components/AppShell';
import { Icon } from '../components/icons';
import RecordModal from '../components/RecordModal';
import { useToast } from '../components/ToastProvider';
import { useConfirm } from '../components/ConfirmProvider';
import { useCategories } from '../hooks/useCategories';

export default function Search() {
  const router = useRouter();
  const { showToast } = useToast();
  const confirm = useConfirm();
  const { categories } = useCategories();
  const [keyword, setKeyword] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);
  const [formData, setFormData] = useState({
    type: 'expense',
    amount: '',
    category: '',
    date: '',
    time: '00:00',
    note: '',
  });
  const [formError, setFormError] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    if (!isLoggedIn()) {
      router.push('/login');
    }
  }, [router]);

  // 检查 URL 参数，自动搜索
  useEffect(() => {
    if (router.isReady && router.query.q) {
      const q = decodeURIComponent(router.query.q);
      setKeyword(q);
      // 自动搜索
      const doSearch = async () => {
        setLoading(true);
        try {
          const data = await searchRecords(q);
          setResults(data);
        } catch (err) {
          console.error(err);
          showToast(err.message, { tone: 'error' });
        } finally {
          setLoading(false);
        }
      };
      doSearch();
    }
  }, [router.isReady, router.query.q]);

  const handleSearch = async (e) => {
    e.preventDefault();
    if (!keyword.trim()) {
      showToast('请输入搜索关键词', { tone: 'info' });
      return;
    }

    // 更新 URL
    router.push(`/search?q=${encodeURIComponent(keyword)}`, undefined, { shallow: true });

    setLoading(true);
    try {
      const data = await searchRecords(keyword);
      setResults(data);
    } catch (err) {
      console.error(err);
      showToast(err.message, { tone: 'error' });
    } finally {
      setLoading(false);
    }
  };

  const openEditModal = (record) => {
    const [datePart, timePart] = record.date.split(' ');
    setEditingRecord(record);
    setFormData({
      type: record.type,
      amount: record.amount.toString(),
      category: record.category,
      date: datePart,
      time: timePart || '00:00',
      note: record.note || '',
    });
    setFormError('');
    setModalOpen(true);
  };

  const closeModal = () => {
    if (submitting || deleting) return;
    setModalOpen(false);
    setEditingRecord(null);
    setFormError('');
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.amount || !formData.category || !formData.date) {
      setFormError('请填写完整信息');
      return;
    }

    setSubmitting(true);
    setFormError('');
    try {
      const data = {
        type: formData.type,
        amount: parseFloat(formData.amount),
        category: formData.category,
        date: `${formData.date} ${formData.time || '00:00'}`,
        note: formData.note,
      };

      // 先调用 API 保存到数据库
      await updateRecord(editingRecord.id, data);

      // 直接更新本地状态，避免重新获取
      const updatedResults = results.map(r =>
        r.id === editingRecord.id
          ? { ...r, ...data, amount: parseFloat(data.amount), date: data.date }
          : r
      );
      setResults(updatedResults);
      showToast('记录已更新', { tone: 'success' });
      closeModal();
    } catch (err) {
      setFormError(err.message);
      showToast(err.message, { tone: 'error' });
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async () => {
    if (!editingRecord) return;
    const shouldDelete = await confirm({
      title: '删除这条记录？',
      description: '删除后将无法恢复，请确认是否继续。',
      confirmText: '删除',
    });
    if (!shouldDelete) return;

    setDeleting(true);
    try {
      await deleteRecord(editingRecord.id);
      // 直接从本地状态移除，避免重新获取
      const filteredResults = results.filter(r => r.id !== editingRecord.id);
      setResults(filteredResults);
      showToast('记录已删除', { tone: 'success' });
      closeModal();
    } catch (err) {
      setFormError(err.message);
      showToast(err.message, { tone: 'error' });
    } finally {
      setDeleting(false);
    }
  };

  const formatMoney = (num) => (num || 0).toFixed(2);

  const groupedResults = useMemo(() => {
    if (!Array.isArray(results)) return {};
    return results.reduce((groups, record) => {
      const date = record.date.split(' ')[0];
      if (!groups[date]) groups[date] = [];
      groups[date].push(record);
      return groups;
    }, {});
  }, [results]);

  const sortedDates = useMemo(
    () => Object.keys(groupedResults).sort((a, b) => b.localeCompare(a)),
    [groupedResults]
  );

  const { totalIncome, totalExpense, totalBalance } = useMemo(() => {
    if (!Array.isArray(results)) return { totalIncome: 0, totalExpense: 0, totalBalance: 0 };
    let income = 0;
    let expense = 0;
    for (const record of results) {
      if (record.type === 'income') income += record.amount;
      else expense += record.amount;
    }
    return { totalIncome: income, totalExpense: expense, totalBalance: income - expense };
  }, [results]);

  // O(1) category icon lookup map (includes custom categories)
  const categoryIconMap = useMemo(() => {
    const icons = {};
    for (const type of ['expense', 'income']) {
      for (const cat of categories[type]) {
        icons[`${type}:${cat.name}`] = cat.icon;
      }
    }
    return icons;
  }, [categories]);

  const actions = (
    <button type="button" className="icon-button" aria-label="设置" onClick={() => router.push('/settings')}>
      <Icon name="settings" size={18} />
    </button>
  );

  return (
    <AppShell title="搜索" subtitle="快速查找分类、备注与金额" actions={actions} compactHeader>
      <section className="card section-card section-card--search section-card--search-panel">
        <form className="search-form search-form--refresh" onSubmit={handleSearch}>
          <div className="search-input-wrap">
            <Icon name="search" size={18} className="search-input-wrap__icon" />
            <input
              type="text"
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              placeholder="搜索分类或备注..."
              autoFocus
              disabled={loading}
            />
          </div>
          <button type="submit" className="btn btn-primary btn-inline" disabled={loading}>
            {loading ? (
              <span className="button-content">
                <Icon name="spinner" size={16} className="is-spinning" />
                搜索中...
              </span>
            ) : '搜索'}
          </button>
        </form>

        {results.length > 0 ? (
          <>
            <div className="stats-grid stats-grid--hero">
              <div className="stat-card">
                <span className="label">收入</span>
                <span className="value income">+{formatMoney(totalIncome)}</span>
              </div>
              <div className="stat-card">
                <span className="label">支出</span>
                <span className="value expense">-{formatMoney(totalExpense)}</span>
              </div>
              <div className="stat-card stat-card--balance">
                <span className="label">结余</span>
                <span className="value">{formatMoney(totalBalance)}</span>
              </div>
            </div>
            <div className="results-count">找到 {results.length} 条记录</div>
          </>
        ) : null}
      </section>

      {loading ? (
        <div className="card loading-state">搜索中...</div>
      ) : results.length > 0 ? (
        <section className="card section-card">
          <div className="records-list records-list--flush">
            {sortedDates.map((date) => (
              <div key={date} className="date-group">
                <div className="date-label">
                  {new Date(date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', weekday: 'short' })}
                </div>
                {groupedResults[date].map((record) => {
                  const icon = categoryIconMap[`${record.type}:${record.category}`] || '📝';
                  return (
                    <button key={record.id} type="button" className="record-item record-item--static" onClick={() => openEditModal(record)}>
                      <div className="record-left">
                        <div className="record-icon">{icon}</div>
                        <div className="record-info">
                          <div className="record-category">{record.category}</div>
                          {record.note && <div className="record-note">{record.note}</div>}
                        </div>
                      </div>
                      <div className={`record-amount ${record.type}`}>
                        {record.type === 'income' ? '+' : '-'}
                        {formatMoney(record.amount)}
                      </div>
                    </button>
                  );
                })}
              </div>
            ))}
          </div>
        </section>
      ) : keyword ? (
        <div className="card empty-state empty-state--card">
          <div className="empty-state__icon"><Icon name="search" size={24} /></div>
          <p>未找到相关记录</p>
        </div>
      ) : (
        <div className="card empty-state empty-state--card">
          <div className="empty-state__icon"><Icon name="search" size={24} /></div>
          <p>输入关键词开始搜索</p>
        </div>
      )}

      <RecordModal
        isOpen={modalOpen}
        onClose={closeModal}
        onSubmit={handleSubmit}
        onDelete={handleDelete}
        formData={formData}
        setFormData={setFormData}
        formError={formError}
        submitting={submitting}
        deleting={deleting}
        editingRecord={editingRecord}
        categories={categories}
      />
    </AppShell>
  );
}