import React from 'react';
import type { User } from '@backspace/shared';
import type { ProfileStyle } from '@backspace/shared/src/profile';
import { Avatar } from '../ui/Avatar';
import { ProfileCard } from './ProfileCard';
import { ProfileTagChip } from './ProfileTagChip';
import { nameStyleProps, nameplateProps } from '../../utils/profileStyle';
import { useT } from '../../i18n';

interface ProfilePreviewStackProps {
  user: User;
  style: ProfileStyle;
  displayName: string;
  bannerSrc: string | null;
  /** Card only — used inside the edit dialogs, where space is tight. */
  compact?: boolean;
}

/**
 * The three places a profile is actually seen: the card, a chat line, and the
 * member-list row. Shared by the editor's main preview and by every edit
 * dialog, so "what you are changing" is always shown in context rather than as
 * an isolated swatch.
 */
export function ProfilePreviewStack({ user, style, displayName, bannerSrc, compact = false }: ProfilePreviewStackProps) {
  const t = useT();
  const nameP = nameStyleProps(style.name);
  const plate = nameplateProps(style.nameplate, style.nameplateColors);
  const preview: User = { ...user, profileStyle: style };

  return (
    <div className="space-y-4">
      <div className="rounded-[12px] overflow-hidden glass-modal select-none">
        <ProfileCard user={preview} style={style} displayName={displayName} bannerSrc={bannerSrc} />
      </div>

      {!compact && (
        <>
          <div>
            <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">{t('profile.editor.inChat')}</div>
            <div className="flex items-start gap-3 rounded-xl bg-white/[0.03] p-3">
              <Avatar src={user.avatar} name={displayName} size={36} userId={user.homeUserId ?? user.id} user={user} />
              <div className="min-w-0">
                <div className="flex items-center gap-2 leading-tight">
                  <span className={`${nameP.className} text-[15px] font-semibold`} style={nameP.style} data-text={displayName}>{displayName}</span>
                  {style.tag && <ProfileTagChip tag={style.tag} className="scale-90 origin-left" />}
                  <span className="text-[11px] text-txt-tertiary">21:19</span>
                </div>
                <div className="text-[14px] text-txt-secondary">{t('profile.editor.inChat.sample')}</div>
              </div>
            </div>
          </div>

          <div>
            <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">{t('profile.editor.inMembers')}</div>
            <div className={`flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] ${plate?.className ?? 'bg-white/[0.03]'}`} style={plate?.style}>
              <Avatar src={user.avatar} name={displayName} size={32} status="online" userId={user.homeUserId ?? user.id} user={user} />
              <span className="text-[13.5px] font-medium text-txt-primary truncate">{displayName}</span>
              {style.tag && <ProfileTagChip tag={style.tag} className="scale-90 origin-left" />}
            </div>
          </div>
        </>
      )}
    </div>
  );
}