import React from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Send, DollarSign } from 'lucide-react';
import type { LiveViewChatMessage } from './types';

interface LiveViewChatProps {
  messages: LiveViewChatMessage[];
  msgInput: string;
  onMsgInputChange: (value: string) => void;
  onSend: () => void;
  onWalletClick?: () => void;
}

export function LiveViewChat({
  messages,
  msgInput,
  onMsgInputChange,
  onSend,
  onWalletClick,
}: LiveViewChatProps) {
  return (
    <Card
      variant="glass"
      className="lg:col-span-3 flex flex-col p-0 overflow-hidden h-full min-h-0"
    >
      <div className="p-4 border-b border-border flex justify-between items-center bg-card">
        <span className="font-mono text-sm font-bold text-foreground tracking-tight">
          STREAM CHAT
        </span>
        <div className="w-2 h-2 bg-success rounded-full animate-pulse" />
      </div>

      <div className="flex-1 overflow-y-auto p-4 space-y-4 font-mono text-sm">
        {messages.map((msg, i) => (
          <div key={i} className="break-words">
            <span
              className={`font-bold ${msg.color} mr-2 cursor-pointer hover:underline`}
            >
              {msg.user}:
            </span>
            <span className="text-foreground">{msg.text}</span>
          </div>
        ))}
        <div className="text-center py-2">
          <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded-full">
            Welcome to the chat room!
          </span>
        </div>
      </div>

      <div className="p-4 bg-muted border-t border-border">
        <div className="flex gap-2">
          <div className="relative flex-1">
            <input
              value={msgInput}
              onChange={(e) => onMsgInputChange(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && onSend()}
              className="w-full bg-background border border-border rounded-xl px-4 py-2 text-sm text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
              placeholder="Say something..."
            />
            <DollarSign className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-warning cursor-pointer hover:opacity-80 transition-opacity" />
          </div>
          <Button variant="primary" size="sm" className="px-4" onClick={onSend}>
            <Send className="w-4 h-4" />
          </Button>
        </div>
        <div className="flex justify-between mt-2 px-1">
          <span className="text-xs text-muted-foreground">
            Balance: 420 $VEZA
          </span>
          <span
            className="text-xs text-muted-foreground cursor-pointer hover:text-foreground"
            onClick={onWalletClick}
          >
            Get Coins
          </span>
        </div>
      </div>
    </Card>
  );
}