// components/Chat.tsx
import { useState, useRef, useEffect } from 'react';
import { startChatStream } from '../lib/stream';
import { UIBlockRenderer } from './UIBlockRenderer';

type Message = {
  role: 'user' | 'assistant';
  content: string;
  ui?: any;
};

export function Chat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [streaming, setStreaming] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(scrollToBottom, [messages]);

  const handleSend = async () => {
    if (!input.trim() || streaming) return;

    const userMessage: Message = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setStreaming(true);

    let assistantMessage: Message = { role: 'assistant', content: '' };
    const uiBlocks: any[] = [];

    try {
      await startChatStream(input, 'your-jwt-token', (event) => {
        if (event.event === 'text') {
          assistantMessage.content += event.content;
          setMessages(prev => [...prev.slice(0, -1), { ...assistantMessage }]);
        } else if (event.event === 'ui') {
          uiBlocks.push(event.ui);
          assistantMessage.ui = uiBlocks;
          setMessages(prev => [...prev.slice(0, -1), { ...assistantMessage }]);
        } else if (event.event === 'end') {
          setStreaming(false);
        }
      });

      setMessages(prev => [...prev, assistantMessage]);
    } catch (error) {
      console.error('Stream error:', error);
      setStreaming(false);
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, idx) => (
          <div key={idx} className={`message ${msg.role}`}>
            <div className="message-content">{msg.content}</div>
            {msg.ui && msg.ui.map((ui: any, uiIdx: number) => (
              <div key={uiIdx} className="ui-block">
                <UIBlockRenderer ui={ui} />
              </div>
            ))}
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      <div className="input-container">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
          placeholder="Ask about prices, portfolios, swaps..."
          disabled={streaming}
        />
        <button onClick={handleSend} disabled={streaming || !input.trim()}>
          {streaming ? 'Streaming...' : 'Send'}
        </button>
      </div>
    </div>
  );
}

// Event 1: Text
{
  "event": "text",
  "content": "Here's the ETH price chart for the last 7 days:",
  "done": false
}

// Event 2: UI Block
{
  "event": "ui",
  "ui": {
    "kind": "price_chart",
    "symbol": "ETH",
    "range": "7d",
    "currency": "USD",
    "data": [
      {"t": "2024-01-01T00:00:00Z", "price": 2200},
      {"t": "2024-01-02T00:00:00Z", "price": 2250},
      {"t": "2024-01-03T00:00:00Z", "price": 2180},
      {"t": "2024-01-04T00:00:00Z", "price": 2300},
      {"t": "2024-01-05T00:00:00Z", "price": 2350},
      {"t": "2024-01-06T00:00:00Z", "price": 2280},
      {"t": "2024-01-07T00:00:00Z", "price": 2400}
    ]
  },
  "done": false
}

// Event 3: End
{
  "event": "end",
  "done": true
}

// The chat component automatically renders each UI block as it arrives
<div className="wallet-dashboard">
  <WalletBalance {...balanceUI} />
  <WalletHoldings {...holdingsUI} />
  <WalletPnL {...pnlUI} />
  <AssetTable {...transactionsUI} />
</div>

{
  "event": "ui",
  "ui": {
    "kind": "sign_request",
    "chain": "ethereum",
    "wallet_address": "0x742d35...",
    "title": "Swap 1 ETH → USDC",
    "payload": {
      "transaction": {
        "to": "0x...",
        "data": "0x...",
        "value": "1000000000000000000",
        "gasLimit": "200000"
      }
    },
    "disclaimer": "Review all transaction details carefully before signing."
  }
}

function PriceMonitor() {
  const [prices, setPrices] = useState<Record<string, number>>({});

  useEffect(() => {
    const cleanup = startChatStream(
      "Monitor BTC and ETH prices",
      token,
      (event) => {
        if (event.event === 'ui' && event.ui.kind === 'price_chart') {
          const latestPrice = event.ui.data[event.ui.data.length - 1].price;
          setPrices(prev => ({
            ...prev,
            [event.ui.symbol]: latestPrice,
          }));
        }
      }
    );

    return cleanup;
  }, []);

  return (
    <div className="price-monitor">
      {Object.entries(prices).map(([symbol, price]) => (
        <div key={symbol} className="price-card">
          <span className="symbol">{symbol}</span>
          <span className="price">${price.toFixed(2)}</span>
        </div>
      ))}
    </div>
  );
}

export function UIBlockRenderer({ ui }: { ui: any }) {
  try {
    // Validate UI block structure
    if (!ui || !ui.kind) {
      console.error('Invalid UI block:', ui);
      return <ErrorBoundary>Invalid component data</ErrorBoundary>;
    }

    // Render based on kind
    switch (ui.kind) {
      case 'price_chart':
        if (!ui.data || !Array.isArray(ui.data)) {
          return <ErrorBoundary>Invalid chart data</ErrorBoundary>;
        }
        return <PriceChart {...ui} />;

      case 'sign_request':
        if (!ui.chain || !ui.wallet_address || !ui.payload) {
          return <ErrorBoundary>Incomplete sign request</ErrorBoundary>;
        }
        return <SignRequest {...ui} />;

      default:
        console.warn('Unknown UI kind:', ui.kind);
        return null;
    }
  } catch (error) {
    console.error('UI rendering error:', error);
    return <ErrorBoundary>Failed to render component</ErrorBoundary>;
  }
}

// Error Boundary Component
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <div className="error">Something went wrong rendering this component.</div>;
    }
    return this.props.children;
  }
}

export function PriceChart({ symbol, data }: PriceChartProps) {
  return (
    <div
      className="price-chart"
      role="img"
      aria-label={`Price chart for ${symbol}`}
    >
      <h3 id={`chart-${symbol}`}>{symbol} Price</h3>
      <LineChart
        width={600}
        height={300}
        data={data}
        aria-labelledby={`chart-${symbol}`}
      >
        <XAxis dataKey="t" />
        <YAxis />
        <Tooltip />
        <Line
          type="monotone"
          dataKey="price"
          stroke="#8884d8"
          aria-label="Price line"
        />
      </LineChart>

      {/* Provide text alternative for screen readers */}
      <div className="sr-only">
        {symbol} price data: {data.map(d => `${d.t}: $${d.price}`).join(', ')}
      </div>
    </div>
  );
}

import { useState, useEffect } from 'react';

function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  return isMobile;
}

export function PriceChart({ symbol, data }: PriceChartProps) {
  const isMobile = useIsMobile();

  return (
    <div className="price-chart">
      <LineChart
        width={isMobile ? 350 : 600}
        height={isMobile ? 200 : 300}
        data={data}
      >
        <XAxis
          dataKey="t"
          angle={isMobile ? -45 : 0}
          textAnchor={isMobile ? 'end' : 'middle'}
        />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="price" stroke="#8884d8" />
      </LineChart>
    </div>
  );
}

/* Responsive styles */
.price-chart {
  width: 100%;
  max-width: 600px;
  margin: 1rem auto;
}

@media (max-width: 768px) {
  .price-chart {
    max-width: 100%;
    padding: 0 1rem;
  }

  .chart-container {
    overflow-x: auto;
  }
}

.asset-table {
  overflow-x: auto;
}

.asset-table table {
  min-width: 600px;
}

@media (max-width: 768px) {
  .asset-table table {
    min-width: 100%;
    font-size: 0.875rem;
  }
}

export function SignRequest({ chain, wallet_address, payload, disclaimer }: SignRequestProps) {
  const [userConfirmed, setUserConfirmed] = useState(false);
  const [addressValidated, setAddressValidated] = useState(false);

  useEffect(() => {
    // Validate address format
    const isValid = chain === 'ethereum'
      ? ethers.isAddress(wallet_address)
      : validateSolanaAddress(wallet_address);
    setAddressValidated(isValid);
  }, [chain, wallet_address]);

  const handleSign = async () => {
    if (!userConfirmed || !addressValidated) {
      alert('Please confirm all details before signing');
      return;
    }

    // Additional checks
    if (payload.transaction?.value) {
      const valueInEth = ethers.formatEther(payload.transaction.value);
      if (parseFloat(valueInEth) > 10) {
        const confirmed = confirm(`Warning: High value transaction (${valueInEth} ETH). Proceed?`);
        if (!confirmed) return;
      }
    }

    // Proceed with signing...
  };

  return (
    <div className="sign-request">
      {!addressValidated && (
        <div className="error">Invalid address format</div>
      )}

      <label>
        <input
          type="checkbox"
          checked={userConfirmed}
          onChange={(e) => setUserConfirmed(e.target.checked)}
        />
        I have reviewed all details and wish to proceed
      </label>

      {disclaimer && <div className="disclaimer">{disclaimer}</div>}

      <button
        onClick={handleSign}
        disabled={!userConfirmed || !addressValidated}
      >
        Sign & Execute
      </button>
    </div>
  );
}

// types/ui.ts

export type UIBlock =
  | PriceChartUI
  | VolumeChartUI
  | AssetTableUI
  | WalletHoldingsUI
  | WalletBalanceUI
  | WalletPnLUI
  | SignRequestUI
  | NftGridUI
  | TokenLogoUI;

export interface PriceChartUI {
  kind: 'price_chart';
  title?: string;
  symbol?: string;
  pair?: string;
  currency?: string;
  range?: string;
  data: Array<{ t: string; price: number }>;
}

export interface VolumeChartUI {
  kind: 'volume_chart';
  title?: string;
  symbol?: string;
  pair?: string;
  data: Array<{ t: string; volume: number }>;
}

export interface AssetTableUI {
  kind: 'asset_table';
  title?: string;
  rows: Array<{
    symbol: string;
    name?: string;
    price?: number;
    change_24h_pct?: number;
    volume_24h?: number;
    logo_url?: string;
  }>;
}

export interface WalletHoldingsUI {
  kind: 'wallet_holdings';
  wallet_address: string;
  chain?: string;
  rows: Array<{
    symbol: string;
    amount: number;
    usd_value?: number;
    logo_url?: string;
  }>;
}

export interface WalletBalanceUI {
  kind: 'wallet_balance';
  wallet_address: string;
  chain?: string;
  total_usd?: number;
  breakdown: Array<{
    symbol: string;
    amount: number;
    usd_value?: number;
    logo_url?: string;
  }>;
}

export interface WalletPnLUI {
  kind: 'wallet_pnl';
  wallet_address: string;
  period?: string;
  pnl_usd?: number;
  pnl_pct?: number;
  timeseries?: Array<{
    t: string;
    pnl_usd: number;
  }>;
}

export interface SignRequestUI {
  kind: 'sign_request';
  chain: string;
  wallet_address: string;
  title?: string;
  message?: string;
  payload: any;
  disclaimer?: string;
}

export interface NftGridUI {
  kind: 'nft_grid';
  title?: string;
  items: Array<{
    token_id?: string;
    name?: string;
    collection?: string;
    image_url?: string;
    permalink?: string;
  }>;
}

export interface TokenLogoUI {
  kind: 'token_logo';
  symbol: string;
  logo_url: string;
  name?: string;
  size?: 'sm' | 'md' | 'lg';
}