boc/web-v2/src/components/AccountDetailModal.tsx

import { useState, useEffect } from 'react'
import { Card, CardHeader } from '@/components/ui/Card'
import {
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableHeader,
  TableCell,
} from '@/components/ui/Table'

interface Transaction {
  id: string
  date: string
  description: string
  debit: number
  credit: number
  balance: number
}

interface AccountDetailModalProps {
  accountCode: string
  accountName: string
  onClose: () => void
}

export function AccountDetailModal({ accountCode, accountName, onClose }: AccountDetailModalProps) {
  const [transactions, setTransactions] = useState<Transaction[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Mock data - replace with actual API call
    const mockTransactions: Transaction[] = [
      { id: '1', date: '2026-02-01', description: 'Opening balance', debit: 0, credit: 0, balance: 44313 },
      { id: '2', date: '2026-02-15', description: 'Purchase - Dell laptops', debit: 25000, credit: 0, balance: 69313 },
      { id: '3', date: '2026-02-20', description: 'Depreciation', debit: 0, credit: 25000, balance: 44313 },
    ]
    setTransactions(mockTransactions)
    setLoading(false)
  }, [accountCode])

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-surface rounded-lg w-full max-w-4xl max-h-[80vh] overflow-auto">
        <Card>
          <CardHeader
            title={`${accountCode} - ${accountName}`}
            subtitle="Transaction History"
            action={
              <button
                onClick={onClose}
                className="text-sm text-primary hover:underline"
              >
                Close
              </button>
            }
          />
          <div className="p-6">
            {loading ? (
              <div className="text-center py-8">Loading...</div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Date</TableHead>
                    <TableHead>Description</TableHead>
                    <TableHead className="text-right">Debit</TableHead>
                    <TableHead className="text-right">Credit</TableHead>
                    <TableHead className="text-right">Balance</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {transactions.map((tx) => (
                    <TableRow key={tx.id}>
                      <TableCell>{tx.date}</TableCell>
                      <TableCell>{tx.description}</TableCell>
                      <TableCell className="text-right text-success">
                        {tx.debit > 0 ? formatCurrency(tx.debit) : '-'}
                      </TableCell>
                      <TableCell className="text-right text-danger">
                        {tx.credit > 0 ? formatCurrency(tx.credit) : '-'}
                      </TableCell>
                      <TableCell className="text-right font-medium">
                        {formatCurrency(tx.balance)}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </div>
        </Card>
      </div>
    </div>
  )
}

function formatCurrency(value: number): string {
  return new Intl.NumberFormat('sv-SE', {
    style: 'currency',
    currency: 'SEK',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(value)
}