import React, { useState } from 'react';
import { Num } from './ui/index';

interface TopBarProps { publicKey: string | null; balance: { sol: number; usdt: number }; aiStatus: any; onLock: () => void; }

export default function TopBar({ publicKey, balance, aiStatus, onLock }: TopBarProps) {
  const [copied, setCopied] = useState(false);
  const short = publicKey ? `${publicKey.slice(0, 4)}…${publicKey.slice(-4)}` : '—';
  const copy = () => { if (publicKey) { navigator.clipboard.writeText(publicKey); setCopied(true); setTimeout(() => setCopied(false), 1500); } };
  const mods = aiStatus ? [aiStatus.llm, aiStatus.transcription, aiStatus.tts, aiStatus.embed, aiStatus.translation, aiStatus.ocr].filter(Boolean).length : 0;

  return (
    <header className="h-[56px] border-b border-hairline flex items-center justify-between px-5 bg-canvas">
      {/* Left */}
      <div className="flex items-center gap-3">
        <button onClick={copy} className="flex items-center gap-2 px-3 py-1.5 rounded-pill bg-surface-strong text-body-sm text-muted hover:text-ink transition-colors">
          <span className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
          <span className="font-mono text-caption">{short}</span>
          <span className="text-caption text-muted-soft">{copied ? '✓' : '⊕'}</span>
        </button>
        <span className="badge-pill text-[10px]">DEVNET</span>
      </div>

      {/* Center — Balances */}
      <div className="flex items-center gap-6">
        <div className="text-center">
          <div className="text-caption text-muted">SOL</div>
          <div className="text-title-sm text-ink"><Num value={balance.sol} decimals={4} /></div>
        </div>
        <div className="w-px h-6 bg-hairline" />
        <div className="text-center">
          <div className="text-caption text-muted">USDT</div>
          <div className="text-title-sm text-ink"><Num value={balance.usdt} decimals={2} /></div>
        </div>
      </div>

      {/* Right */}
      <div className="flex items-center gap-3">
        <span className={`badge-pill text-[10px] ${mods > 0 ? 'badge-pill-blue' : ''}`}>
          {mods > 0 ? `${mods}/6 AI` : 'Loading…'}
        </span>
        <button onClick={onLock} className="btn-secondary text-body-sm py-2 px-3">Lock</button>
      </div>
    </header>
  );
}