import React, { useEffect, useState } from 'react';
import { SectionPlaceholder } from '@/shell/SectionPlaceholder';
import { useStore } from '@/lib/store';
import { getBalance } from '@/lib/api';

function formatT(ut: number): string {
  return (ut / 1_000_000).toLocaleString(undefined, { maximumFractionDigits: 3 });
}

export function WalletList(): React.ReactElement {
  const keyFile = useStore(s => s.keyFile);
  const [balance, setBalance] = useState<number | null>(null);
  useEffect(() => {
    if (!keyFile) return;
    getBalance(keyFile.pub_key).then(setBalance).catch(() => setBalance(null));
  }, [keyFile]);
  return (
    <div style={{ padding: 14 }}>
      <div style={{
        borderRadius: 14, padding: 14,
        background: '#0a0a0a', border: '1px solid #1f1f1f',
      }}>
        <div style={{ color: '#8b8b8b', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>
          Balance
        </div>
        <div style={{ color: '#fff', fontSize: 22, fontWeight: 800, marginTop: 4 }}>
          {balance === null ? '—' : `${formatT(balance)} T`}
        </div>
        <div className="selectable" style={{
          color: '#8b8b8b', fontSize: 11, fontFamily: 'monospace',
          marginTop: 6, wordBreak: 'break-all',
        }}>
          {keyFile?.pub_key}
        </div>
      </div>
    </div>
  );
}

export function WalletDetail(): React.ReactElement {
  return <SectionPlaceholder title="Wallet" note="Transaction history — coming soon." centered />;
}