import { useMemo } from 'react';
import { useStore } from '../store';
import { buildLedger, getAvailableMonths, filterByMonth, formatAmount, calcAccountBalance } from '../utils/bookkeeping';
import { ACCOUNT_TYPE_LABELS } from '../utils/accounts';
import type { AccountType } from '../types';

const TYPE_ORDER: AccountType[] = ['asset', 'liability', 'equity', 'income', 'expense'];

export default function LedgerPage() {
  const {
    accounts, transactions, openingBalances,
    selectedMonth, setSelectedMonth,
    selectedLedgerAccountId: selectedAccountId,
    setSelectedLedgerAccountId: setSelectedAccountId,
    previousPage, goBack,
    hideInactiveLedgerAccounts, setHideInactiveLedgerAccounts,
  } = useStore();

  const availableMonths = useMemo(() => getAvailableMonths(transactions), [transactions]);
  const effectiveMonth = selectedMonth;

  const [year, month] = effectiveMonth
    ? [parseInt(effectiveMonth.split('-')[0]), parseInt(effectiveMonth.split('-')[1])]
    : [0, 0];

  // 対象取引
  const targetTxs = useMemo(
    () => effectiveMonth ? filterByMonth(transactions, year, month) : transactions,
    [transactions, effectiveMonth, year, month]
  );

  // 勘定科目グループ
  const accountGroups = useMemo(() => {
    return TYPE_ORDER.map(type => ({
      type,
      label: ACCOUNT_TYPE_LABELS[type],
      accounts: accounts
        .filter(a => a.type === type)
        .sort((a, b) => a.order - b.order),
    }));
  }, [accounts]);

  const selectedAccount = accounts.find(a => a.id === selectedAccountId);

  const ledgerLines = useMemo(() => {
    if (!selectedAccount) return [];
    const isBsAccount = selectedAccount.type === 'asset' || selectedAccount.type === 'liability' || selectedAccount.type === 'equity';
    // B/S科目かつ月フィルター時は「対象月より前の全仕訳による残高」を開始値とする
    // P/L科目（収益・費用）は月次でリセットされるので期首残高0から始める
    const startBalance = (isBsAccount && effectiveMonth)
      ? calcAccountBalance(
          selectedAccount,
          transactions.filter(tx => tx.date < `${effectiveMonth}-01`),
          openingBalances,
        )
      : (isBsAccount ? (openingBalances.find(b => b.accountId === selectedAccountId)?.amount ?? 0) : 0);
    return buildLedger(selectedAccount, accounts, targetTxs, startBalance);
  }, [selectedAccount, accounts, targetTxs, openingBalances, selectedAccountId, effectiveMonth, transactions]);

  // 前月繰越残高（B/S科目かつ月次表示時のみ）
  const carryOverBalance = useMemo(() => {
    if (!selectedAccount || !effectiveMonth) return 0;
    const isBsAccount = selectedAccount.type === 'asset' || selectedAccount.type === 'liability' || selectedAccount.type === 'equity';
    if (!isBsAccount) return 0;
    return calcAccountBalance(
      selectedAccount,
      transactions.filter(tx => tx.date < `${effectiveMonth}-01`),
      openingBalances,
    );
  }, [selectedAccount, effectiveMonth, transactions, openingBalances]);

  // サマリ（借方合計・貸方合計・残高）
  const summary = useMemo(() => {
    const debitTotal  = ledgerLines.reduce((s, l) => s + l.debit,  0);
    const creditTotal = ledgerLines.reduce((s, l) => s + l.credit, 0);
    const balance     = ledgerLines.length > 0 ? ledgerLines[ledgerLines.length - 1].balance : carryOverBalance;
    return { debitTotal, creditTotal, balance };
  }, [ledgerLines, carryOverBalance]);

  if (transactions.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-slate-500">
        <p className="text-5xl mb-4">📗</p>
        <p className="text-slate-400">データがありません。CSVをインポートしてください。</p>
      </div>
    );
  }

  return (
    <div className="flex gap-0 h-full overflow-hidden">
      {/* 左: 勘定科目一覧 */}
      <div className="w-52 shrink-0 overflow-y-auto border-r border-slate-700 p-4">
        {previousPage && (
          <button
            onClick={goBack}
            className="flex items-center gap-1 text-xs text-indigo-400 hover:text-indigo-300 mb-3"
          >
            ← 戻る
          </button>
        )}
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-semibold text-slate-400">勘定科目</h3>
          <select
            value={effectiveMonth}
            onChange={e => setSelectedMonth(e.target.value)}
            className="border rounded px-1 py-0.5 text-xs"
          >
            <option value="">全期間</option>
            {availableMonths.map(m => (
              <option key={m} value={m}>{m.replace('-', '年')}月</option>
            ))}
          </select>
        </div>

        <label className="flex items-center gap-1.5 px-1 mb-3 cursor-pointer">
          <input
            type="checkbox"
            checked={hideInactiveLedgerAccounts}
            onChange={e => setHideInactiveLedgerAccounts(e.target.checked)}
            className="accent-indigo-500 w-3 h-3"
          />
          <span className="text-xs text-slate-500">取引なし科目を非表示</span>
        </label>

        <div className="space-y-3">
          {accountGroups.map(group => {
            const visibleAccounts = group.accounts.filter(acc => {
              const hasActivity = targetTxs.some(tx =>
                tx.entries.some(e => e.accountId === acc.id)
              );
              return !hideInactiveLedgerAccounts || hasActivity;
            });
            if (visibleAccounts.length === 0) return null;
            return (
              <div key={group.type}>
                <p className="text-xs font-bold text-slate-500 uppercase px-1 mb-1">{group.label}</p>
                {visibleAccounts.map(acc => {
                  const hasActivity = targetTxs.some(tx =>
                    tx.entries.some(e => e.accountId === acc.id)
                  );
                  return (
                    <button
                      key={acc.id}
                      onClick={() => setSelectedAccountId(acc.id)}
                      className={`w-full text-left px-2 py-1.5 rounded text-xs transition-colors ${
                        selectedAccountId === acc.id
                          ? 'bg-indigo-700 text-white font-semibold'
                          : hasActivity
                          ? 'text-slate-300 hover:bg-slate-700'
                          : 'text-slate-600'
                      }`}
                    >
                      {acc.name}
                    </button>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>

      {/* 右: 元帳明細 */}
      <div className="flex-1 overflow-hidden flex flex-col p-6 gap-4">
        {selectedAccount ? (
          <>
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-lg font-bold text-slate-100">{selectedAccount.name}</h2>
                <p className="text-xs text-slate-500">
                  {ACCOUNT_TYPE_LABELS[selectedAccount.type]} / 正規残高: {selectedAccount.normalBalance === 'debit' ? '借方' : '貸方'}
                </p>
              </div>
              {/* サマリ */}
              <div className="flex gap-4 text-sm">
                <div className="text-center">
                  <p className="text-xs text-slate-500">借方合計</p>
                  <p className="font-semibold text-indigo-400">{summary.debitTotal.toLocaleString()}</p>
                </div>
                <div className="text-center">
                  <p className="text-xs text-slate-500">貸方合計</p>
                  <p className="font-semibold text-rose-400">{summary.creditTotal.toLocaleString()}</p>
                </div>
                <div className="text-center">
                  <p className="text-xs text-slate-500">残高</p>
                  <p className={`font-bold ${summary.balance >= 0 ? 'text-slate-100' : 'text-rose-400'}`}>
                    {formatAmount(summary.balance)}
                  </p>
                </div>
              </div>
            </div>

            <div className="card p-0 overflow-auto flex-1">
              <table className="w-full">
                <thead className="bg-slate-900 border-b border-slate-700 sticky top-0">
                  <tr>
                    <th className="table-th">日付</th>
                    <th className="table-th">摘要</th>
                    <th className="table-th">相手勘定</th>
                    <th className="table-th text-right">借方</th>
                    <th className="table-th text-right">貸方</th>
                    <th className="table-th text-right">残高</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-700/50">
                  {/* 前月繰越行（月次表示かつ繰越残高あり） */}
                  {effectiveMonth && carryOverBalance !== 0 && (
                    <tr className="bg-slate-800/60 border-b border-slate-600">
                      <td className="table-td text-slate-500 whitespace-nowrap">—</td>
                      <td className="table-td text-slate-500 italic">前月繰越</td>
                      <td className="table-td" />
                      <td className="table-td" />
                      <td className="table-td" />
                      <td className={`table-td text-right font-semibold ${carryOverBalance >= 0 ? 'text-slate-400' : 'text-rose-400'}`}>
                        {carryOverBalance.toLocaleString()}
                      </td>
                    </tr>
                  )}
                  {ledgerLines.length === 0 ? (
                    <tr>
                      <td colSpan={6} className="text-center py-8 text-slate-500 text-sm">
                        この期間の取引はありません
                      </td>
                    </tr>
                  ) : (
                    ledgerLines.map((line, i) => (
                      <tr key={i} className="hover:bg-slate-700/30">
                        <td className="table-td text-slate-400 whitespace-nowrap">{line.date}</td>
                        <td className="table-td max-w-xs truncate">{line.description}</td>
                        <td className="table-td text-xs text-slate-500">{line.counterAccountName}</td>
                        <td className="table-td text-right font-medium text-indigo-400">
                          {line.debit  > 0 ? line.debit.toLocaleString()  : ''}
                        </td>
                        <td className="table-td text-right font-medium text-rose-400">
                          {line.credit > 0 ? line.credit.toLocaleString() : ''}
                        </td>
                        <td className={`table-td text-right font-semibold ${
                          line.balance >= 0 ? 'text-slate-200' : 'text-rose-400'
                        }`}>
                          {line.balance.toLocaleString()}
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </>
        ) : (
          <div className="flex items-center justify-center h-full text-slate-500">
            <p>左から勘定科目を選択してください</p>
          </div>
        )}
      </div>
    </div>
  );
}