import type { MediaItem } from '../../../../../packages/api-contracts/src/index.js';
import { Link } from 'react-router-dom';
import { RedditUsernameLink } from '../../components/reddit-username-link.js';
import { createOwnedConversationId } from '../conversations/conversation-identity.js';
import { mediaAlt, mediaConversation, mediaType } from './filters.js';
import { AccountOwnerBadge } from '../../components/account-owner-badge.js';

interface MediaCardProps {
  item: MediaItem;
  isRevealed: boolean;
  onToggleReveal(): void;
  onOpenPreview(): void;
}

function formatMediaDate(timestamp: number): string {
  return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(timestamp);
}

export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: MediaCardProps) {
  const conversationId = item.chatRoomId ?? item.chatUsername;
  const conversationPath = conversationId
    ? `/conversations/${encodeURIComponent(createOwnedConversationId(item.owner?.accountId, conversationId))}`
    : null;

  return (
    <article className="media-card">
      <div className="media-preview">
        <button
          aria-label={isRevealed ? `View media from ${item.sender} larger` : `Reveal media from ${item.sender}`}
          className="media-preview-button"
          onClick={() => {
            if (isRevealed) onOpenPreview();
            else onToggleReveal();
          }}
          type="button"
        >
          <img alt={mediaAlt(item)} className={isRevealed ? 'media-image' : 'media-image is-blurred'} loading="lazy" src={item.urlPath} />
        </button>
        {!isRevealed ? <span className="privacy-label">Private media hidden</span> : null}
      </div>
      <div className="media-card-body">
        <AccountOwnerBadge owner={item.owner} />
        <div>
          <strong><span className="media-link-prefix">From</span> <RedditUsernameLink showPrefix={false} username={item.sender} /></strong>
          <span><span className="media-link-prefix">Conversation</span> {item.chatUsername
            ? <RedditUsernameLink showPrefix={false} username={item.chatUsername} />
            : mediaConversation(item)}</span>
        </div>
        <dl>
          <div><dt>Type</dt><dd>{mediaType(item) === 'gif' ? 'GIF' : 'Image'}</dd></div>
          <div><dt>Received</dt><dd>{formatMediaDate(item.timestamp)}</dd></div>
        </dl>
        {conversationPath ? (
          <Link className="button secondary media-conversation-link" to={conversationPath}>
            Open conversation
          </Link>
        ) : null}
        <button
          aria-pressed={isRevealed}
          className="button secondary media-reveal"
          onClick={onToggleReveal}
          type="button"
        >
          {isRevealed ? `Hide media from ${item.sender}` : `Reveal media from ${item.sender}`}
        </button>
      </div>
    </article>
  );
}