'use client';

import { useState } from 'react';
import type { Message } from '@alqove/api-client';
import { MessageLightbox } from './message-lightbox';

type Role = 'buyer' | 'seller' | 'admin';

interface Props {
  message: Message;
  /** Reserved for Plan 2/3 (seller + admin variants will lean on this). */
  viewerRole?: Role;
  viewerUserId: string;
  counterpartyName?: string;
  onDelete?: (messageId: string) => void;
  /** When provided, renders a checkbox and treats this row as multi-selectable. */
  selectable?: { selected: boolean; onToggle: () => void };
}

function authorLabel(
  message: Message,
  viewerUserId: string,
  counterpartyName?: string,
): string {
  if (message.author_user_id === viewerUserId) return 'You';
  if (message.author_role === 'admin') return 'Alqove Support';
  return counterpartyName ?? (message.author_role === 'seller' ? 'Seller' : 'Buyer');
}

export function MessageRow({
  message,
  viewerUserId,
  counterpartyName,
  onDelete,
  selectable,
}: Props) {
  const isMine = message.author_user_id === viewerUserId;
  const isDeleted = message.deleted_at !== null;
  const isAdminAuthor = message.author_role === 'admin';
  const isSystem = message.author_role === 'system';
  const deletedByAdmin = message.deleted_by_admin === true;
  const attachments = message.attachments ?? [];

  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  if (isSystem) {
    return (
      <div
        className="flex items-center gap-2 py-1.5 text-xs italic text-slate-500"
        data-testid={`message-row-${message.id}`}
        role="status"
      >
        <span>{message.body}</span>
        <time className="not-italic text-slate-400">
          {new Date(message.created_at).toLocaleString()}
        </time>
      </div>
    );
  }

  if (isDeleted && !message.body) {
    return (
      <div className="text-xs italic text-slate-400 py-2">
        {deletedByAdmin ? '(deleted by Alqove Support)' : '(deleted by author)'}
      </div>
    );
  }

  return (
    <div
      className={`flex items-start gap-2 py-2 ${isMine ? 'flex-row-reverse' : ''}`}
      data-testid={`message-row-${message.id}`}
    >
      {selectable && (
        <input
          type="checkbox"
          checked={selectable.selected}
          onChange={selectable.onToggle}
          aria-label={`Select message ${message.id}`}
          className="mt-2 h-4 w-4 shrink-0 cursor-pointer accent-forest-600"
        />
      )}
      <div className={`flex flex-col flex-1 ${isMine ? 'items-end' : 'items-start'}`}>
      <div className="flex items-center gap-2 text-xs text-slate-400">
        <span
          className={
            isAdminAuthor
              ? 'rounded bg-forest-100 px-1.5 py-0.5 text-forest-800 font-medium'
              : 'font-medium text-slate-500'
          }
        >
          {authorLabel(message, viewerUserId, counterpartyName)}
        </span>
        <time>{new Date(message.created_at).toLocaleString()}</time>
        {isMine && onDelete && !isDeleted && (
          <button
            onClick={() => onDelete(message.id)}
            className="text-xs text-slate-400 hover:text-red-600"
            aria-label="Delete message"
          >
            Delete
          </button>
        )}
      </div>
      {message.body && (
        <p
          className={`mt-1 max-w-[80%] whitespace-pre-wrap rounded-lg px-3 py-2 text-sm ${
            isMine
              ? 'bg-forest-600 text-white'
              : isAdminAuthor
                ? 'bg-forest-50 text-forest-900 border border-forest-200'
                : 'bg-slate-100 text-slate-900'
          }`}
        >
          {message.body}
        </p>
      )}
      {attachments.length > 0 && (
        <div
          className={`mt-1 grid gap-1 max-w-[80%] ${
            attachments.length > 1 ? 'grid-cols-2' : 'grid-cols-1'
          }`}
        >
          {attachments.map((a, i) => (
            <button
              key={a.url + i}
              type="button"
              onClick={() => setLightboxIndex(i)}
              aria-label={`Open attachment ${i + 1}`}
              className="overflow-hidden rounded-md border border-slate-200 bg-white"
            >
              <img
                src={a.thumb_url || a.url}
                alt=""
                className="h-32 w-full object-cover"
                loading="lazy"
              />
            </button>
          ))}
        </div>
      )}
      <MessageLightbox
        open={lightboxIndex !== null}
        onClose={() => setLightboxIndex(null)}
        attachments={attachments}
        startIndex={lightboxIndex ?? 0}
      />
      </div>
    </div>
  );
}