'use client'

import { useState } from 'react'
import { useSession } from 'next-auth/react'

interface ReviewCardProps {
  id: string
  username: string
  avatarUrl?: string | null
  content: string
  rating: number
  playtimeHours?: number | null
  upvotes: number
  downvotes: number
  userVote?: number | null
  createdAt: string
  onVote: (reviewId: string, voteType: 1 | -1) => Promise<void>
}

export function ReviewCard({
  id,
  username,
  avatarUrl,
  content,
  rating,
  playtimeHours,
  upvotes,
  downvotes,
  userVote,
  createdAt,
  onVote
}: ReviewCardProps) {
  const { data: session } = useSession()
  const [voting, setVoting] = useState(false)

  const handleVote = async (voteType: 1 | -1) => {
    if (!session) return
    setVoting(true)
    try {
      await onVote(id, voteType)
    } finally {
      setVoting(false)
    }
  }

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    })
  }

  return (
    <div className="bg-[#16213e] rounded-xl p-6">
      <div className="flex items-start gap-4">
        <div className="w-12 h-12 rounded-full bg-[#1a1a2e] flex items-center justify-center overflow-hidden">
          {avatarUrl ? (
            <img src={avatarUrl} alt={username} className="w-full h-full object-cover" />
          ) : (
            <span className="text-2xl">👤</span>
          )}
        </div>
        
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-2">
            <span className="text-white font-medium">{username}</span>
            <span className="text-[#00d4ff] font-bold">{rating}/10</span>
            {playtimeHours !== null && playtimeHours !== undefined && (
              <span className="text-gray-400 text-sm">{playtimeHours}h played</span>
            )}
          </div>
          
          <p className="text-gray-300 mb-4">{content}</p>
          
          <div className="flex items-center justify-between">
            <span className="text-gray-500 text-sm">{formatDate(createdAt)}</span>
            
            {session && (
              <div className="flex items-center gap-2">
                <button
                  onClick={() => handleVote(1)}
                  disabled={voting}
                  className={`flex items-center gap-1 px-3 py-1 rounded-lg transition-colors ${
                    userVote === 1
                      ? 'bg-green-600 text-white'
                      : 'bg-[#1a1a2e] text-gray-400 hover:text-green-400'
                  }`}
                >
                  <span>▲</span>
                  <span>{upvotes}</span>
                </button>
                
                <button
                  onClick={() => handleVote(-1)}
                  disabled={voting}
                  className={`flex items-center gap-1 px-3 py-1 rounded-lg transition-colors ${
                    userVote === -1
                      ? 'bg-red-600 text-white'
                      : 'bg-[#1a1a2e] text-gray-400 hover:text-red-400'
                  }`}
                >
                  <span>▼</span>
                  <span>{downvotes}</span>
                </button>
              </div>
            )}
            
            {!session && (
              <span className="text-gray-500 text-sm">
                Sign in to vote
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}