import { useRef, useEffect, useState } from 'react';
import { Bell, TrendingUp, ArrowDownLeft, Users, Plus, MessageSquare, Filter, PhoneCall, MessageCircle, Search, Phone, ArrowUpRight, History, ChevronRight, IndianRupee, Package } from 'lucide-react';
import Modal from './Modal';
import './LedgerSection.scss'
import Avatar from './Avatar';

const gradientMap = {
  'from-green-400 to-green-500': 'linear-gradient(135deg, #34D399, #10B981)',
  'from-red-400 to-red-500': 'linear-gradient(135deg, #F87171, #EF4444)',
  'from-orange-400 to-orange-500': 'linear-gradient(135deg, #FB923C, #F97316)',
  'from-blue-400 to-blue-500': 'linear-gradient(135deg, #60A5FA, #3B82F6)',
  'from-purple-400 to-purple-500': 'linear-gradient(135deg, #A78BFA, #8B5CF6)',
  'from-pink-400 to-pink-500': 'linear-gradient(135deg, #F472B6, #EC4899)'
};

export default function LedgerSection({ customers, suppliers }) {
  const customerHeaderRef = useRef(null);
  const customerCardsRef = useRef(null);
  const sideBarRef = useRef(null);

  const [activeTab, setActiveTab] = useState('customers');
  const [customerCardMaxHeight, setCustomerCardMaxHeight] = useState(500);
  const [showGaveMoneyModal, setShowGaveMoneyModal] = useState(false);
  const [showGotMoneyModal, setShowGotMoneyModal] = useState(false);
  const [showAddCustomerModal, setShowAddCustomerModal] = useState(false);
  const [showAddEntryModal, setShowAddEntryModal] = useState(false);
  const [showReminderModal, setShowReminderModal] = useState(false);
  const [showHistoryModal, setShowHistoryModal] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState(null);

  const totalReceivable = customers.filter(c => c.type === 'credit').reduce((sum, c) => sum + c.balance, 0);
  const totalPayable = customers.filter(c => c.type === 'debit').reduce((sum, c) => sum + c.balance, 0);

  const supplierReceivable = suppliers.filter(s => s.type === 'credit').reduce((sum, s) => sum + s.balance, 0);
  const supplierPayable = suppliers.filter(s => s.type === 'debit').reduce((sum, s) => sum + s.balance, 0);

  const netBalance = (totalReceivable + supplierReceivable) - (totalPayable + supplierPayable);


  const activeData = activeTab === 'customers' ? customers : suppliers;

  useEffect(() => {
    if (sideBarRef?.current) {
      const headerHeight = customerHeaderRef.current?.getBoundingClientRect().height;
      const sidebarHeight = sideBarRef.current?.getBoundingClientRect().height;
      setCustomerCardMaxHeight(sidebarHeight - headerHeight);
    }
  }, [sideBarRef.current]);

  return (
    <>
      <div className="khata-summary">
        <div className="khata-card green">
          <div className="card-content">
            <div className="card-header">
              <ArrowDownLeft />
              <span>You Will Get</span>
            </div>
            <div className="amount">₹{totalReceivable.toLocaleString()}</div>
            <div className="subtitle"><div>{customers.filter(c => c.type === 'credit').length}</div><div>Customers</div></div>
          </div>
        </div>

        <div className="khata-card red">
          <div className="card-content">
            <div className="card-header">
              <ArrowUpRight />
              <span>You Will Give</span>
            </div>
            <div className="amount">₹{totalPayable.toLocaleString()}</div>
            <div className="subtitle"><div>{customers.filter(c => c.type === 'debit').length}</div><div>Customers</div></div>
          </div>
        </div>

        <div className="khata-card orange">
          <div className="card-content">
            <div className="card-header">
              <IndianRupee />
              <span>Net Balance</span>
            </div>
            <div className="amount">₹{netBalance.toLocaleString()}</div>
            <div className="subtitle">
              <TrendingUp />
              <div>Overall balance</div>
            </div>
          </div>
        </div>
      </div>

      <div className="main-content">
        <div className="customer-list">
          <div className="customer-list-card">
            <div className="customer-header" ref={customerHeaderRef}>
              <div className="header-top">
                <div className="header-text">
                  <h2>{activeTab === 'customers' ? 'Customer' : 'Supplier'} Ledger</h2>
                  <p>Track all your {activeTab === 'customers' ? 'customer' : 'supplier'} transactions</p>
                </div>
                <div className="header-actions-right">
                  <div className="tabs">
                    <button
                      className={`tab ${activeTab === 'customers' ? 'active' : ''}`}
                      onClick={() => setActiveTab('customers')}
                    >
                      <Users />
                      Customers
                    </button>
                    <button
                      className={`tab ${activeTab === 'suppliers' ? 'active' : ''}`}
                      onClick={() => setActiveTab('suppliers')}
                    >
                      <Package />
                      Suppliers
                    </button>
                  </div>
                  <button className="add-btn" onClick={() => setShowAddCustomerModal(true)}>
                    <Plus />
                    <div>Add {activeTab === 'customers' ? 'Customer' : 'Supplier'}</div>
                  </button>
                </div>
              </div>

              <div className="search-filter">
                <div className="search-wrapper">
                  <Search />
                  <input type="text" placeholder={`Search ${activeTab}...`} />
                </div>
                <button className="filter-btn">
                  <Filter />
                </button>
              </div>
            </div>

            <div className="customer-cards" style={{ maxHeight: `${customerCardMaxHeight}px` }} ref={customerCardsRef}>
              {activeData.map((customer) => (
                <div key={customer.id} className={`customer-card ${customer.type}`}>
                  <div className="card-main">
                    <div className="customer-info">
                      <Avatar className="avatar" background={gradientMap[customer.color]} children={customer?.avatar} />
                      <div className="customer-details">
                        <div className="name-row">
                          <h3>{customer.name}</h3>
                          <span className={`badge ${customer.type === 'credit' ? 'get' : 'give'}`}>
                            {customer.type === 'credit' ? 'GET' : 'GIVE'}
                          </span>
                        </div>
                        <div className="phone-row">
                          <Phone />
                          {customer.phone}
                        </div>
                        <div className="transaction-row">
                          <History />
                          {customer.lastTransaction} • {customer.lastDate}
                        </div>
                      </div>
                    </div>

                    <div className="balance-info">
                      <div className={`amount ${customer.type === 'credit' ? 'get' : 'give'}`}>
                        ₹{customer.balance.toLocaleString()}
                      </div>
                      <div className={`label ${customer.type === 'credit' ? 'get' : 'give'}`}>
                        {customer.type === 'credit' ? "You'll Get" : "You'll Give"}
                      </div>
                    </div>
                  </div>

                  <div className="card-actions">
                    <button onClick={() => {
                      setSelectedCustomer(customer);
                      setShowAddEntryModal(true);
                    }}>
                      <Plus />
                      <div>Add Entry</div>
                    </button>
                    <button onClick={() => {
                      setSelectedCustomer(customer);
                      setShowReminderModal(true);
                    }}>
                      <MessageSquare />
                      <div>Remind</div>
                    </button>
                    <button onClick={() => {
                      setSelectedCustomer(customer);
                      setShowHistoryModal(true);
                    }}>
                      <ChevronRight />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="sidebar" ref={sideBarRef}>
          <div className="quick-actions-card">
            <h3>Quick Actions</h3>
            <div className="actions">
              <button className="gave-money" onClick={() => setShowGotMoneyModal(true)}>
                <div className="icon">
                  <ArrowDownLeft />
                </div>
                <span>Payment Received</span>
              </button>
              <button className="got-money" onClick={() => setShowGaveMoneyModal(true)}>
                <div className="icon">
                  <ArrowUpRight />
                </div>
                <span>Payment Made</span>
              </button>
              <button className="add-customer" onClick={() => setShowAddCustomerModal(true)}>
                <div className="icon">
                  <Users />
                </div>
                <span>Add Customer</span>
              </button>
            </div>
          </div>

          <div className="total-customers-card">
            <div className="card-header">
              <Users />
              <span>Total Customers</span>
            </div>
            <div className="count">{customers.length}</div>
          </div>

          <div className="total-customers-card" style={{ background: 'linear-gradient(to bottom right, rgb(249, 115, 22), rgb(234, 88, 12))' }}>
            <div className="card-header">
              <Package />
              <span>Total Suppliers</span>
            </div>
            <div className="count">{suppliers.length}</div>
          </div>

          <div className="recent-activity-card">
            <h3>Recent Activity</h3>
            <div className="activities">
              <div className="activity-item">
                <div className="dot green"></div>
                <div className="activity-content">
                  <p className="title">Payment received</p>
                  <p className="description">₹800 from Deepa</p>
                  <p className="time">2 hours ago</p>
                </div>
              </div>
              <div className="activity-item">
                <div className="dot red"></div>
                <div className="activity-content">
                  <p className="title">Payment due</p>
                  <p className="description">₹500 to Rakesh</p>
                  <p className="time">Yesterday</p>
                </div>
              </div>
              <div className="activity-item">
                <div className="dot blue"></div>
                <div className="activity-content">
                  <p className="title">Customer added</p>
                  <p className="description">Priya added</p>
                  <p className="time">3 days ago</p>
                </div>
              </div>
            </div>
          </div>

          <div className="reminders-card">
            <div className="reminders-header">
              <Bell />
              <h3>Reminders</h3>
            </div>
            <p>3 pending reminders to send</p>
            <button>Send All Reminders</button>
          </div>
        </div>
      </div>

      {/* Modals */}
      {/* Payment Made Modal */}
      <Modal
        isOpen={showGaveMoneyModal}
        onClose={() => setShowGaveMoneyModal(false)}
        title={<h3>Payment Made</h3>}
        submitText="Save Transaction"
        submitClassName="submit-btn made-btn"
        onSubmit={() => console.log('Payment Made')}
      >
        <div className="form-group">
          <label>Select Customer/Supplier</label>
          <select onChange={(e) => setSelectedCustomer([...customers, ...suppliers].find(c => c.id === parseInt(e.target.value)))}>
            <option value="">Choose...</option>
            {[...customers, ...suppliers].map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
        {selectedCustomer && (
          <div className="form-group">
            <label>Current Balance</label>
            <div style={{
              padding: '1rem',
              backgroundColor: selectedCustomer.type === 'credit' ? '#F0FDF4' : '#FEF2F2',
              borderRadius: '0.75rem',
              border: `2px solid ${selectedCustomer.type === 'credit' ? '#BBF7D0' : '#FECACA'}`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}>
              <span style={{ fontSize: '0.875rem', fontWeight: 600, color: '#6B7280' }}>
                {selectedCustomer.type === 'credit' ? "You'll Get" : "You'll Give"}
              </span>
              <span style={{ fontSize: '1.5rem', fontWeight: 700, color: selectedCustomer.type === 'credit' ? '#059669' : '#DC2626' }}>
                ₹{selectedCustomer.balance.toLocaleString()}
              </span>
            </div>
          </div>
        )}
        <div className="form-group">
          <label>Amount (₹)</label>
          <input type="number" placeholder="Enter amount" />
        </div>
        <div className="form-group">
          <label>Note</label>
          <textarea placeholder="Add a note (optional)" rows="3"></textarea>
        </div>
        <div className="form-group">
          <label>Date</label>
          <input type="date" defaultValue={new Date().toISOString().split('T')[0]} />
        </div>
      </Modal>

      {/* Payment Received Modal */}
      <Modal
        isOpen={showGotMoneyModal}
        onClose={() => setShowGotMoneyModal(false)}
        title={<h3>Payment Received</h3>}
        submitText="Save Transaction"
        submitClassName="submit-btn received-btn"
        onSubmit={() => console.log('Payment Received')}
      >
        <div className="form-group">
          <label>Select Customer/Supplier</label>
          <select onChange={(e) => setSelectedCustomer([...customers, ...suppliers].find(c => c.id === parseInt(e.target.value)))}>
            <option value="">Choose...</option>
            {[...customers, ...suppliers].map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
        {selectedCustomer && (
          <div className="form-group">
            <label>Current Balance</label>
            <div style={{
              padding: '1rem',
              backgroundColor: selectedCustomer.type === 'credit' ? '#F0FDF4' : '#FEF2F2',
              borderRadius: '0.75rem',
              border: `2px solid ${selectedCustomer.type === 'credit' ? '#BBF7D0' : '#FECACA'}`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}>
              <span style={{ fontSize: '0.875rem', fontWeight: 600, color: '#6B7280' }}>
                {selectedCustomer.type === 'credit' ? "You'll Get" : "You'll Give"}
              </span>
              <span style={{ fontSize: '1.5rem', fontWeight: 700, color: selectedCustomer.type === 'credit' ? '#059669' : '#DC2626' }}>
                ₹{selectedCustomer.balance.toLocaleString()}
              </span>
            </div>
          </div>
        )}
        <div className="form-group">
          <label>Amount (₹)</label>
          <input type="number" placeholder="Enter amount" />
        </div>
        <div className="form-group">
          <label>Note</label>
          <textarea placeholder="Add a note (optional)" rows="3"></textarea>
        </div>
        <div className="form-group">
          <label>Date</label>
          <input type="date" defaultValue={new Date().toISOString().split('T')[0]} />
        </div>
      </Modal>

      {/* Add Customer/Supplier Modal */}
      <Modal
        isOpen={showAddCustomerModal}
        onClose={() => setShowAddCustomerModal(false)}
        title={<h3>Add New {activeTab === 'customers' ? 'Customer' : 'Supplier'}</h3>}
        submitText={`Add ${activeTab === 'customers' ? 'Customer' : 'Supplier'}`}
        submitClassName="submit-btn add-btn"
        onSubmit={() => console.log('Add Customer')}
      >
        <div className="form-group">
          <label>Name</label>
          <input type="text" placeholder="Enter name" />
        </div>
        <div className="form-group">
          <label>Phone Number</label>
          <input type="tel" placeholder="98755 43210" />
        </div>
        <div className="form-group">
          <label>Opening Balance (₹)</label>
          <input type="number" placeholder="0" />
        </div>
        <div className="form-group">
          <label>Balance Type</label>
          <select>
            <option value="credit">You'll Get (Credit)</option>
            <option value="debit">You'll Give (Debit)</option>
          </select>
        </div>
        <div className="form-group">
          <label>Address (Optional)</label>
          <textarea placeholder="Enter address" rows="2"></textarea>
        </div>
      </Modal>

      {/* Add Customer/Supplier Entry Modal */}
      <Modal
        isOpen={showAddEntryModal}
        onClose={() => setShowAddEntryModal(false)}
        title={<h3>Add Entry for {selectedCustomer?.name}</h3>}
        submitText="Save Entry"
        submitClassName="submit-btn received-btn"
        onSubmit={() => console.log('Add Entry')}
      >
        {selectedCustomer && (
          <div className="form-group">
            <label>Current Balance</label>
            <div style={{
              padding: '1rem',
              backgroundColor: selectedCustomer.type === 'credit' ? '#F0FDF4' : '#FEF2F2',
              borderRadius: '0.75rem',
              border: `2px solid ${selectedCustomer.type === 'credit' ? '#BBF7D0' : '#FECACA'}`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}>
              <span style={{ fontSize: '0.875rem', fontWeight: 600, color: '#6B7280' }}>
                {selectedCustomer.type === 'credit' ? "You'll Get" : "You'll Give"}
              </span>
              <span style={{ fontSize: '1.5rem', fontWeight: 700, color: selectedCustomer.type === 'credit' ? '#059669' : '#DC2626' }}>
                ₹{selectedCustomer.balance.toLocaleString()}
              </span>
            </div>
          </div>
        )}
        <div className="form-group">
          <label>Transaction Type</label>
          <select>
            <option value="credit">Payment Received (You'll Get)</option>
            <option value="debit">Payment Made (You'll Give)</option>
          </select>
        </div>
        <div className="form-group">
          <label>Amount (₹)</label>
          <input type="number" placeholder="Enter amount" />
        </div>
        <div className="form-group">
          <label>Description</label>
          <textarea placeholder="Add description (optional)" rows="3"></textarea>
        </div>
        <div className="form-group">
          <label>Payment Method</label>
          <select>
            <option value="cash">Cash</option>
            <option value="upi">UPI</option>
            <option value="bank">Bank Transfer</option>
            <option value="card">Card</option>
          </select>
        </div>
        <div className="form-group">
          <label>Date</label>
          <input type="date" defaultValue={new Date().toISOString().split('T')[0]} />
        </div>
      </Modal>

      {/* Reminder Modal */}
      <Modal
        isOpen={showReminderModal}
        onClose={() => setShowReminderModal(false)}
        title={<h3>Send Reminder to {selectedCustomer?.name}</h3>}
        submitText="Send Reminder"
        submitClassName="submit-btn made-btn"
        onSubmit={() => console.log('Send Reminder')}
      >
        <div className="form-group">
          <label>Reminder Type</label>
          <select>
            <option value="payment">Payment Reminder</option>
            <option value="followup">Follow-up</option>
            <option value="custom">Custom Message</option>
          </select>
        </div>
        <div className="form-group">
          <label>Message</label>
          <textarea
            placeholder={`Hi ${selectedCustomer?.name}, this is a friendly reminder about your pending payment of ₹${selectedCustomer?.balance}. Please settle at your earliest convenience. Thank you!`}
            rows="5"
            defaultValue={`Hi ${selectedCustomer?.name}, this is a friendly reminder about your pending payment of ₹${selectedCustomer?.balance}. Please settle at your earliest convenience. Thank you!`}
          ></textarea>
        </div>
        <div className="form-group">
          <label>Send Via</label>
          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
              <input type="checkbox" defaultChecked />
              <span>WhatsApp</span>
            </label>
            <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
              <input type="checkbox" />
              <span>SMS</span>
            </label>
            <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
              <input type="checkbox" />
              <span>Email</span>
            </label>
          </div>
        </div>
        <div className="form-group">
          <label>Schedule (Optional)</label>
          <input type="datetime-local" />
        </div>
      </Modal>

      {/* Transaction History Modal */}
      <Modal
        className='transaction-history-modal'
        isOpen={showHistoryModal}
        onClose={() => setShowHistoryModal(false)}
        title={<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
          <div className="avatar" style={{
            background: `linear-gradient(135deg, ${selectedCustomer?.color === 'from-green-400 to-green-500' ? '#34D399, #10B981' :
              selectedCustomer?.color === 'from-red-400 to-red-500' ? '#F87171, #EF4444' :
                selectedCustomer?.color === 'from-orange-400 to-orange-500' ? '#FB923C, #F97316' :
                  selectedCustomer?.color === 'from-blue-400 to-blue-500' ? '#60A5FA, #3B82F6' :
                    selectedCustomer?.color === 'from-purple-400 to-purple-500' ? '#A78BFA, #8B5CF6' : '#F472B6, #EC4899'})`,
            width: '3rem',
            height: '3rem',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            fontSize: '1.25rem',
            fontWeight: 700
          }}>
            {selectedCustomer?.avatar}
          </div>
          <div style={{ flex: 1 }}>
            <h3 style={{ margin: 0 }}>{selectedCustomer?.name}</h3>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '0.25rem' }}>
              <p style={{ margin: 0, fontSize: '0.875rem', color: '#6B7280', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                <Phone style={{ width: '0.875rem', height: '0.875rem' }} />
                {selectedCustomer?.phone}
              </p>
              <div style={{ display: 'flex', gap: '0.25rem', marginLeft: '0.5rem' }}>
                <button
                  onClick={() => window.open(`tel:${selectedCustomer?.phone?.replace(/\s/g, '')}`)}
                  style={{
                    padding: '0.375rem',
                    backgroundColor: '#10B981',
                    border: 'none',
                    borderRadius: '0.5rem',
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    transition: 'all 0.2s'
                  }}
                  title="Call"
                >
                  <PhoneCall style={{ width: '0.875rem', height: '0.875rem', color: 'white' }} />
                </button>
                <button
                  onClick={() => window.open(`https://wa.me/${selectedCustomer?.phone.replace(/\s/g, '')}`, '_blank')}
                  style={{
                    padding: '0.375rem',
                    backgroundColor: '#25D366',
                    border: 'none',
                    borderRadius: '0.5rem',
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    transition: 'all 0.2s'
                  }}
                  title="WhatsApp"
                >
                  <MessageCircle style={{ width: '0.875rem', height: '0.875rem', color: 'white' }} />
                </button>
                <button
                  onClick={() => window.open(`sms:${selectedCustomer?.phone.replace(/\s/g, '')}`)}
                  style={{
                    padding: '0.375rem',
                    backgroundColor: '#3B82F6',
                    border: 'none',
                    borderRadius: '0.5rem',
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    transition: 'all 0.2s'
                  }}
                  title="SMS"
                >
                  <MessageSquare style={{ width: '0.875rem', height: '0.875rem', color: 'white' }} />
                </button>
              </div>
            </div>
          </div>
        </div>}
        submitText={
          <>
            <Plus style={{ width: '1rem', height: '1rem' }} />
            <div>Add New Entry</div>
          </>
        }
        submitClassName="submit-btn add-btn"
        onSubmit={() => {
          setShowAddEntryModal(true);
          setShowHistoryModal(false);
        }}
      >
        {selectedCustomer && (
          <>
            <div style={{
              padding: '1.5rem',
              background: selectedCustomer?.type === 'credit' ? 'linear-gradient(to right, #F0FDF4, #DCFCE7)' : 'linear-gradient(to right, #FEF2F2, #FEE2E2)',
              borderRadius: '0.75rem',
              marginBottom: '1rem'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <p style={{ fontSize: '0.875rem', color: '#6B7280', margin: 0 }}>Current Balance</p>
                  <p style={{ fontSize: '0.75rem', color: '#9CA3AF', margin: '0.25rem 0 0 0' }}>
                    {selectedCustomer?.type === 'credit' ? "You'll Get" : "You'll Give"}
                  </p>
                </div>
                <div style={{
                  fontSize: '2rem',
                  fontWeight: 700,
                  color: selectedCustomer?.type === 'credit' ? '#059669' : '#DC2626'
                }}>
                  ₹{selectedCustomer?.balance.toLocaleString()}
                </div>
              </div>
            </div>
            <h4 style={{ fontSize: '0.875rem', fontWeight: 700, color: '#111827', marginBottom: '1rem' }}>
              Transaction History ({selectedCustomer.history?.length || 0} entries)
            </h4>

            {selectedCustomer.history && selectedCustomer.history.length > 0 ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                {selectedCustomer.history.map((transaction) => (
                  <div key={transaction.id} style={{
                    padding: '1rem',
                    border: '1px solid #E5E7EB',
                    borderRadius: '0.75rem',
                    backgroundColor: transaction.type === 'credit' ? '#F0FDF4' : '#FEF2F2',
                    borderLeft: `4px solid ${transaction.type === 'credit' ? '#10B981' : '#EF4444'}`
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '0.5rem' }}>
                      <div>
                        <span style={{
                          display: 'inline-block',
                          padding: '0.25rem 0.5rem',
                          borderRadius: '0.375rem',
                          fontSize: '0.75rem',
                          fontWeight: 600,
                          backgroundColor: transaction.type === 'credit' ? '#D1FAE5' : '#FEE2E2',
                          color: transaction.type === 'credit' ? '#065F46' : '#991B1B',
                          marginBottom: '0.25rem'
                        }}>
                          {transaction.type === 'credit' ? '↓ Received' : '↑ Paid'}
                        </span>
                        <p style={{ fontSize: '0.875rem', fontWeight: 600, color: '#111827', margin: '0.25rem 0' }}>
                          {transaction.note}
                        </p>
                        <p style={{ fontSize: '0.75rem', color: '#6B7280', margin: 0 }}>
                          {transaction.date} • {transaction.method}
                        </p>
                      </div>
                      <div style={{
                        fontSize: '1.25rem',
                        fontWeight: 700,
                        color: transaction.type === 'credit' ? '#059669' : '#DC2626'
                      }}>
                        {transaction.type === 'credit' ? '+' : '-'}₹{transaction.amount.toLocaleString()}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div style={{
                padding: '2rem',
                textAlign: 'center',
                color: '#9CA3AF',
                fontSize: '0.875rem'
              }}>
                No transaction history available
              </div>
            )}
          </>
        )}
      </Modal>
    </>
  );
}
