RightPanel.tsx

import React, { useRef, useEffect, useState, useCallback } from 'react';
import { Wallet, Box, X, BrainCircuit, MessageSquare } from 'lucide-react';
import { Network, ActivityLog, Comment } from '../../types';
import { getOwnedObjects } from '../../services/suiService';
import { useWallet } from '@/wallet';
import {
  WalletTab,
  ObjectsTab,
  AnalysisTab,
  DiscussTab,
} from './Tabs';

type RightPanelTab = 'wallet' | 'objects' | 'analysis' | 'discuss';

interface RightPanelProps {
  network: Network;
  activityLogs: ActivityLog[];
  comments: Comment[];
  activeRequestId: string;
  onPostComment: (content: string) => void;
  onClose: () => void;
}

const TabButton = ({
  id,
  icon: Icon,
  label,
  isActive,
  onSelect,
}: {
  id: RightPanelTab;
  icon: any;
  label: string;
  isActive: boolean;
  onSelect: (id: RightPanelTab) => void;
}) => (
  <button
    onClick={() => onSelect(id)}
    className={`flex-1 flex flex-col items-center justify-center py-2 gap-1 transition-colors relative ${
      isActive
      ? 'text-electric-violet'
      : 'text-slate-500 hover:text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:bg-white/[0.03]'
    }`}
    title={label}
  >
    <Icon size={15} strokeWidth={isActive ? 2.25 : 1.75} />
    <span className="text-[10px] font-medium">{label}</span>
    {isActive && (
      <span className="absolute bottom-0 left-0 right-0 h-px bg-electric-violet"></span>
    )}
  </button>
);

export const RightPanel: React.FC<RightPanelProps> = ({
  network,
  activityLogs,
  comments,
  activeRequestId,
  onPostComment,
  onClose
}) => {
  const [activeTab, setActiveTab] = useState<RightPanelTab>('wallet');
  const [objects, setObjects] = useState<any[]>([]);
  const [loadingObjects, setLoadingObjects] = useState(false);
  const [commentInput, setCommentInput] = useState('');
  
  const { currentWallet } = useWallet();
  const connectedAddress = currentWallet?.family === 'sui' ? currentWallet.address : null;

  const formatAddress = (address: string) => {
    return `${address.slice(0, 6)}...${address.slice(-4)}`;
  };

  // A monotonically-increasing counter lets each fetch "tag" its own result.
  // If a newer fetch starts (or dependencies change) while an earlier one is
  // still in-flight, the stale result is discarded when it eventually resolves,
  // preventing it from overwriting the current wallet's object list.
  const fetchGenerationRef = useRef(0);
  const fetchObjects = useCallback(async () => {
    if (!connectedAddress) return;
    const generation = ++fetchGenerationRef.current;
    setLoadingObjects(true);
    try {
      const res = await getOwnedObjects(network, connectedAddress);
      if (fetchGenerationRef.current !== generation) return; // stale — discard
      if (res.result && res.result.data) {
        setObjects(res.result.data);
      } else {
        setObjects([]);
      }
    } catch {
      if (fetchGenerationRef.current !== generation) return; // stale — discard
      setObjects([]);
    } finally {
      if (fetchGenerationRef.current === generation) {
        setLoadingObjects(false);
      }
    }
  }, [connectedAddress, network]);

  useEffect(() => {
    if (activeTab === 'objects' && connectedAddress) {
      queueMicrotask(() => {
        fetchObjects();
      });
    }
  }, [activeTab, connectedAddress, fetchObjects]);

  const submitComment = (e: React.FormEvent) => {
    e.preventDefault();
    if (commentInput.trim()) {
      onPostComment(commentInput);
      setCommentInput('');
    }
  };

  return (
    <div className="w-80 bg-slate-50 dark:bg-near-black border-l border-slate-200 dark:border-white/[0.06] flex flex-col h-full font-sans relative z-30">
      {/* Header */}
      <div className="shrink-0 flex items-center justify-between px-3 py-2 border-b border-slate-200 dark:border-white/[0.06] bg-white dark:bg-dark-indigo-glow">
        <div className="flex items-center gap-2">
          <span className="text-[11px] font-semibold text-slate-600 dark:text-slate-300 tracking-tight">Inspector</span>
          <div className={`px-1.5 py-0.5 rounded-full text-[10px] font-medium ${
            network === 'mainnet' ? 'bg-emerald-500/[0.12] text-emerald-400' :
            network === 'testnet' ? 'bg-amber-500/[0.12] text-amber-400' :
            network === 'devnet' ? 'bg-blue-500/[0.12] text-blue-400' :
            'bg-fuchsia-500/[0.12] text-fuchsia-400'
          }`}>
            {network}
          </div>
        </div>
        <button
          onClick={onClose}
          className="p-1 text-slate-500 hover:text-slate-700 dark:text-slate-200 rounded hover:bg-slate-100 dark:hover:bg-white/[0.05] transition-colors"
          aria-label="Close inspector"
        >
          <X size={13} />
        </button>
      </div>

      {/* Navigation */}
      <div className="shrink-0 flex border-b border-slate-200 dark:border-white/[0.06] bg-slate-50 dark:bg-near-black">
        <TabButton id="wallet" icon={Wallet} label="Wallet" isActive={activeTab === 'wallet'} onSelect={setActiveTab} />
        <TabButton id="objects" icon={Box} label="Objects" isActive={activeTab === 'objects'} onSelect={setActiveTab} />
        <TabButton id="analysis" icon={BrainCircuit} label="Analysis" isActive={activeTab === 'analysis'} onSelect={setActiveTab} />
        <TabButton id="discuss" icon={MessageSquare} label="Discuss" isActive={activeTab === 'discuss'} onSelect={setActiveTab} />
      </div>

      <div className="flex-1 flex flex-col min-h-0 relative">
        {/* --- WALLET TAB --- */}
        {activeTab === 'wallet' && (
            <WalletTab
              formatAddress={formatAddress}
            />  
        )}

        {/* --- OBJECTS TAB --- */}
        {activeTab === 'objects' && (
          <div className="flex-1 flex flex-col min-h-0 bg-slate-50 dark:bg-near-black">
            <ObjectsTab
              connectedAddress={connectedAddress}
              walletFamily={currentWallet?.family || null}
              network={network}
              objects={objects}
              loadingObjects={loadingObjects}
              onRefreshObjects={fetchObjects}
            />
          </div>
        )}

        {/* --- ANALYSIS TAB --- */}
        {activeTab === 'analysis' && <AnalysisTab activeRequestId={activeRequestId} />}

        {/* --- DISCUSS TAB --- */}
        {activeTab === 'discuss' && (
          <DiscussTab
            comments={comments}
            commentInput={commentInput}
            onCommentInputChange={setCommentInput}
            onSubmitComment={submitComment}
          />
        )}
      </div>
    </div>
  );
};