AccountHeader.tsx

import { useState } from 'react';
import { Check, Copy, ExternalLink, LogOut } from 'lucide-react';
import { Button } from '@/components/base/button';
import { Card, CardContent } from '@/components/base/card';
import { Input } from '@/components/base/input';
import { explorerAccountUrl, explorerHistoryUrl, explorerTokensUrl } from '@/solana';
import { useAccount } from '@/state/account';
import { NetworkToggle } from './NetworkToggle';

export function AccountHeader() {
  const { account, address, scalarHex, scalarBase58, network, rpcOverride, setRpcOverride, resetSession } =
    useAccount();
  const [copied, setCopied] = useState<'address' | 'scalar-hex' | 'scalar-b58' | null>(null);
  if (!account) return null;

  const truncated = `${address.slice(0, 6)}…${address.slice(-6)}`;

  const copy = async (value: string, kind: 'address' | 'scalar-hex' | 'scalar-b58') => {
    try {
      await navigator.clipboard.writeText(value);
      setCopied(kind);
      setTimeout(() => setCopied(c => (c === kind ? null : c)), 1500);
    } catch {
      // best-effort copy
    }
  };

  return (
    <Card>
      <CardContent className="para:flex para:flex-col para:items-start para:gap-4">
        <NetworkToggle />
        <div className="para:flex para:w-full para:flex-wrap para:items-center para:justify-between para:gap-4">
          <div className="para:flex para:flex-col para:gap-1">
            <span className="para:text-xs para:uppercase para:tracking-wide para:text-muted-foreground">Address</span>
            <div className="para:flex para:items-center para:gap-2">
              <code className="para:font-mono para:text-base">{truncated}</code>
              <Button
                size="icon"
                variant="ghost"
                onClick={() => copy(address, 'address')}
                title="Copy full address"
              >
                {copied === 'address' ? <Check className="para:size-4" /> : <Copy className="para:size-4" />}
              </Button>
            </div>
          </div>
          <div className="para:flex para:flex-wrap para:items-center para:gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => window.open(explorerAccountUrl(address, network), '_blank', 'noreferrer')}
            >
              <ExternalLink className="para:size-4" />
              View on Solscan
            </Button>
            <Button variant="outline" size="sm" onClick={resetSession}>
              <LogOut className="para:size-4" />
              Forget key
            </Button>
          </div>
        </div>

        <details className="para:w-full">
          <summary className="para:cursor-pointer para:text-xs para:font-medium para:text-muted-foreground para:hover:text-foreground">
            Custom RPC (advanced)
          </summary>
          <div className="para:mt-3 para:flex para:flex-col para:gap-2">
            <p className="para:text-xs para:text-muted-foreground para:leading-relaxed">
              Override the default {network} RPC. Use an Alchemy, Helius, or QuickNode URL when the default endpoint
              rate-limits you or doesn't return SPL token holdings.
            </p>
            <Input
              id="rpc-override"
              type="text"
              spellCheck={false}
              autoComplete="off"
              placeholder="leave blank for the bundled default"
              value={rpcOverride}
              onChange={(e) => setRpcOverride(e.target.value)}
            />
          </div>
        </details>

        <details className="para:w-full">
          <summary className="para:cursor-pointer para:text-xs para:font-medium para:text-muted-foreground para:hover:text-foreground">
            Key details
          </summary>
          <div className="para:mt-3 para:flex para:flex-col para:gap-3 para:font-mono para:text-xs">
            <div className="para:flex para:flex-col para:gap-1">
              <span className="para:text-muted-foreground">Full address</span>
              <code className="para:break-all">{address}</code>
            </div>
            <div className="para:flex para:flex-col para:gap-1">
              <span className="para:text-muted-foreground">Scalar (hex)</span>
              <code className="para:break-all">{scalarHex}</code>
              <Button size="sm" variant="outline" onClick={() => copy(scalarHex, 'scalar-hex')}>
                {copied === 'scalar-hex' ? 'Copied' : 'Copy hex'}
              </Button>
            </div>
            <div className="para:flex para:flex-col para:gap-1">
              <span className="para:text-muted-foreground">Scalar (base58)</span>
              <code className="para:break-all">{scalarBase58}</code>
              <Button size="sm" variant="outline" onClick={() => copy(scalarBase58, 'scalar-b58')}>
                {copied === 'scalar-b58' ? 'Copied' : 'Copy base58'}
              </Button>
            </div>
            <div className="para:flex para:flex-wrap para:gap-x-4 para:gap-y-1 para:text-xs">
              <a
                href={explorerHistoryUrl(address, network)}
                target="_blank"
                rel="noreferrer"
                className="para:underline para:underline-offset-2 para:text-muted-foreground para:hover:text-foreground"
              >
                Transaction history ↗
              </a>
              <a
                href={explorerTokensUrl(address, network)}
                target="_blank"
                rel="noreferrer"
                className="para:underline para:underline-offset-2 para:text-muted-foreground para:hover:text-foreground"
              >
                Token accounts ↗
              </a>
            </div>
          </div>
        </details>
      </CardContent>
    </Card>
  );
}