import { useCollection, useIdentity } from '@deplixo/sdk';
import Dashboard from './components/Dashboard.jsx';
import CustomerDetail from './components/CustomerDetail.jsx';
import Subscription from './components/Subscription.jsx';
import Reports from './components/Reports.jsx';
import AdminPanel from './components/AdminPanel.jsx';

function formatINR(n) {
  const val = Math.abs(Number(n) || 0);
  return '₹' + val.toLocaleString('en-IN', { maximumFractionDigits: 2 });
}

function App() {
  const { user, loading: idLoading, login, logout } = useIdentity();
  const { items: allCustomers, loading: cLoading, add: addCustomer, remove: removeCustomer } =
    useCollection('customers');
  const { items: allTxns, loading: tLoading, add: addTxn, remove: removeTxn } =
    useCollection('transactions');
  const {
    items: allSubs,
    loading: sLoading,
    add: addSub,
    update: updateSub,
  } = useCollection('subscriptions');

  const [selectedId, setSelectedId] = useState(null);

  if (idLoading) {
    return (
      <div className="loading-screen">
        <div className="brand">Mera Khata</div>
        <div className="loading-text">Loading your khata…</div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="login-screen">
        <div className="login-card">
          <div className="brand-mark login-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="32" height="32">
              <path
                d="M4 7h16l-1.2 11.2a2 2 0 01-2 1.8H7.2a2 2 0 01-2-1.8L4 7z"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinejoin="round"
              />
              <path
                d="M8 7V5a4 4 0 018 0v2"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
              />
            </svg>
          </div>
          <h1>Mera Khata</h1>
          <p className="login-sub">
            Your digital udhaar bahi. Sign in to manage your customers and
            payments securely.
          </p>
          <button
            className="btn primary login-btn"
            onClick={() => login && login()}
            data-testid="login-button"
          >
            Sign in to continue
          </button>
        </div>
      </div>
    );
  }

  if (cLoading || tLoading || sLoading) {
    return (
      <div className="loading-screen">
        <div className="brand">Mera Khata</div>
        <div className="loading-text">Loading your khata…</div>
      </div>
    );
  }

  const customers = (allCustomers || []).filter(
    (c) => c.author?.id === user?.id
  );
  const txns = (allTxns || []).filter((t) => t.author?.id === user?.id);
  const mySub = (allSubs || []).find((s) => s.author?.id === user?.id);
  const currentPlanId = mySub?.value?.planId || 'free';

  const selectPlan = (planId) => {
    if (mySub) {
      updateSub && updateSub(mySub.id, { planId });
    } else {
      addSub && addSub({ planId });
    }
  };

  // Compute balance per customer
  const balanceOf = (customerId) => {
    let udhaar = 0;
    let paid = 0;
    for (const t of txns) {
      if (t.value?.customerId !== customerId) continue;
      if (t.value?.type === 'udhaar') udhaar += Number(t.value.amount) || 0;
      else if (t.value?.type === 'payment') paid += Number(t.value.amount) || 0;
    }
    return { udhaar, paid, balance: udhaar - paid };
  };

  const selected = customers.find((c) => c.id === selectedId);
  const selectedTxns = selected
    ? txns
        .filter((t) => t.value?.customerId === selected.id)
        .sort(
          (a, b) =>
            new Date(b.createdAt || 0).getTime() -
            new Date(a.createdAt || 0).getTime()
        )
    : [];

  const FREE_LIMIT = 5;
  const isFree = currentPlanId === 'free';
  const atFreeLimit = isFree && customers.length >= FREE_LIMIT;

  const handleAddCustomer = (name, phone) => {
    if (atFreeLimit) return;
    addCustomer({ name, phone });
  };

  // Admin actions
  const settleCustomer = (customerId, dueAmount) => {
    if (!dueAmount || dueAmount <= 0) return;
    addTxn({
      type: 'payment',
      amount: dueAmount,
      note: 'Settled via admin panel',
      customerId,
    });
  };

  const deleteCustomerTxns = (customerId) => {
    for (const t of txns) {
      if (t.value?.customerId === customerId) removeTxn(t.id);
    }
  };

  const deleteCustomer = (customerId) => {
    deleteCustomerTxns(customerId);
    removeCustomer && removeCustomer(customerId);
    if (selectedId === customerId) setSelectedId(null);
  };

  const clearAll = () => {
    for (const t of txns) removeTxn(t.id);
    for (const c of customers) removeCustomer && removeCustomer(c.id);
    setSelectedId(null);
  };

  return (
    <div className="app">
      <header className="topbar">
        <div className="brand-row">
          {selected ? (
            <button
              className="icon-btn back-btn"
              onClick={() => setSelectedId(null)}
              data-testid="back-to-dashboard"
              aria-label="Back to dashboard"
            >
              <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
                <path
                  d="M15 6l-6 6 6 6"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2.2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
          ) : (
            <div className="brand-mark" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="22" height="22">
                <path
                  d="M4 7h16l-1.2 11.2a2 2 0 01-2 1.8H7.2a2 2 0 01-2-1.8L4 7z"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinejoin="round"
                />
                <path
                  d="M8 7V5a4 4 0 018 0v2"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              </svg>
            </div>
          )}
          <div className="brand-text">
            <h1>{selected ? selected.value.name : 'Mera Khata'}</h1>
            <div className="brand-sub">
              {selected
                ? selected.value.phone || 'No phone'
                : 'Your digital udhaar bahi'}
            </div>
          </div>
          {!selected && (
            <div className="topbar-actions">
              <Reports
                customers={customers}
                transactions={txns}
                balanceOf={balanceOf}
                formatINR={formatINR}
              />
              <AdminPanel
                customers={customers}
                transactions={txns}
                balanceOf={balanceOf}
                formatINR={formatINR}
                onSettleCustomer={settleCustomer}
                onDeleteCustomerTxns={deleteCustomerTxns}
                onDeleteCustomer={deleteCustomer}
                onClearAll={clearAll}
              />
              <Subscription
                currentPlanId={currentPlanId}
                onSelectPlan={selectPlan}
              />
              <button
                className="btn ghost logout-btn"
                onClick={() => logout && logout()}
                data-testid="logout-button"
                aria-label="Sign out"
              >
                Sign out
              </button>
            </div>
          )}
        </div>
      </header>

      <main className="main">
        {selected ? (
          <CustomerDetail
            customer={selected}
            balance={balanceOf(selected.id)}
            transactions={selectedTxns}
            formatINR={formatINR}
            onAddUdhaar={(amount, note) =>
              addTxn({
                type: 'udhaar',
                amount,
                note,
                customerId: selected.id,
              })
            }
            onAddPayment={(amount, note) =>
              addTxn({
                type: 'payment',
                amount,
                note,
                customerId: selected.id,
              })
            }
            onDeleteTxn={(id) => removeTxn(id)}
          />
        ) : (
          <>
            {isFree && customers.length > 0 && (
              <div
                className={
                  'free-limit-banner' + (atFreeLimit ? ' at-limit' : '')
                }
                data-testid="free-plan-banner"
              >
                <span>
                  Free plan: <strong>{customers.length}</strong> of{' '}
                  <strong>{FREE_LIMIT}</strong> customers used
                  {atFreeLimit ? ' — upgrade to add more.' : '.'}
                </span>
              </div>
            )}
            <Dashboard
              customers={customers}
              balanceOf={balanceOf}
              formatINR={formatINR}
              onOpenCustomer={(id) => setSelectedId(id)}
              onAddCustomer={handleAddCustomer}
              addDisabled={atFreeLimit}
            />
          </>
        )}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);