'use client';

import { CheckCheck, Check } from 'lucide-react';
import { format, isToday, isYesterday } from 'date-fns';
import { tr } from 'date-fns/locale';
import type { ChatMessage, ChatUser } from '@/lib/hooks/useChat';

interface MessageBubbleProps {
  message: ChatMessage;
  isOwn: boolean;
  showAvatar?: boolean;
  readByOther?: boolean;
}

function formatMessageTime(dateStr: string) {
  const d = new Date(dateStr);
  if (isToday(d)) return format(d, 'HH:mm');
  if (isYesterday(d)) return `Dün ${format(d, 'HH:mm')}`;
  return format(d, 'd MMM, HH:mm', { locale: tr });
}

function UserInitial({ user }: { user: ChatUser | null }) {
  const name = user?.fullName ?? '?';
  const initial = name.charAt(0).toUpperCase();
  return (
    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-700">
      {initial}
    </div>
  );
}

export function MessageBubble({
  message,
  isOwn,
  showAvatar = true,
  readByOther = false,
}: MessageBubbleProps) {
  if (message.type === 'SYSTEM') {
    return (
      <div className="flex justify-center py-1">
        <span className="rounded-full bg-slate-100 px-3 py-1 text-xs text-slate-500">
          {message.body}
        </span>
      </div>
    );
  }

  return (
    <div className={`flex items-end gap-2 ${isOwn ? 'flex-row-reverse' : 'flex-row'}`}>
      {/* Avatar — karşı taraf için */}
      {!isOwn && (
        <div className="mb-1">
          {showAvatar ? (
            <UserInitial user={message.sender} />
          ) : (
            <div className="h-7 w-7" /> // placeholder boşluk
          )}
        </div>
      )}

      {/* Mesaj balonu */}
      <div className={`max-w-[72%] ${isOwn ? 'items-end' : 'items-start'} flex flex-col gap-0.5`}>
        {/* Gönderen adı (karşı taraf, ilk mesajda) */}
        {!isOwn && showAvatar && message.sender && (
          <span className="ml-1 text-xs font-medium text-slate-500">
            {message.sender.fullName}
          </span>
        )}

        <div
          className={`rounded-2xl px-3.5 py-2 text-sm leading-relaxed ${
            isOwn
              ? 'rounded-br-sm bg-indigo-600 text-white'
              : 'rounded-bl-sm bg-white text-slate-800 shadow-sm ring-1 ring-slate-200/60'
          }`}
        >
          {message.body}
        </div>

        {/* Zaman + okundu */}
        <div className={`flex items-center gap-1 px-1 ${isOwn ? 'flex-row-reverse' : 'flex-row'}`}>
          <span className="text-[11px] text-slate-400">
            {formatMessageTime(message.createdAt)}
          </span>
          {isOwn && (
            readByOther ? (
              <CheckCheck className="h-3.5 w-3.5 text-indigo-500" />
            ) : (
              <Check className="h-3.5 w-3.5 text-slate-400" />
            )
          )}
        </div>
      </div>
    </div>
  );
}