import CreatorAvatar from '@/components/creators/CreatorAvatar';
import CreatorDeathMark from '@/components/creators/CreatorDeathMark';
import { linkFocusRing } from '@/components/ui/app-link';
import { RouteLink } from '@/components/ui/route-link';
import { Text } from '@/components/ui/typography';
import { cn } from '@/lib/utils';

import { CreatorIdentity } from '@/types/Creator';

export type CreatorIdentityRowSize = 'sm' | 'md' | 'lg' | 'xl';
export type CreatorIdentityRowTone = 'default' | 'inverse';

type TextVariant = React.ComponentProps<typeof Text>['variant'];

interface CreatorIdentityRowProps {
  creator: CreatorIdentity;
  size?: CreatorIdentityRowSize;
  tone?: CreatorIdentityRowTone;
  /** When set, the whole row becomes a link to the creator's page (name underlines on hover). */
  href?: { pathname: '/alkoto/[id]'; params: { id: string } };
  className?: string;
}

/**
 * `size` drives the avatar and grid column. Up to `lg` the text stays on fixed
 * list-row variants (bodySm / subtitle), per the typography doctrine.
 *
 * The `xl` tier is the deliberate exception: a feature byline that scales the
 * type up with the avatar. It is also the only responsive tier — on mobile it
 * renders at `lg` geometry/type so the byline stays compact, and from `md` up it
 * grows to the full feature size (name → lead, profession → bodySm) via the
 * `mdUp` overrides. Those overrides are literal `md:` strings (not composed at
 * runtime) so Tailwind's JIT can see them.
 */
const sizeStyles: Record<
  CreatorIdentityRowSize,
  {
    grid: string;
    avatarWrapper: string;
    avatarPx: number;
    nameVariant: TextVariant;
    professionVariant: TextVariant;
    /** ≥md overrides — only `xl` uses these to grow from its mobile (`lg`) size. */
    mdUp?: {
      grid: string;
      avatarWrapper: string;
      nameClass: string;
      professionClass: string;
    };
  }
> = {
  sm: {
    grid: 'grid-cols-[2.25rem_minmax(0,1fr)] gap-2',
    avatarWrapper: 'h-9 w-9',
    avatarPx: 72,
    nameVariant: 'bodySm',
    professionVariant: 'subtitle',
  },
  md: {
    grid: 'grid-cols-[2.5rem_minmax(0,1fr)] gap-2',
    avatarWrapper: 'h-10 w-10',
    avatarPx: 84,
    nameVariant: 'bodySm',
    professionVariant: 'subtitle',
  },
  lg: {
    grid: 'grid-cols-[3rem_minmax(0,1fr)] gap-3',
    avatarWrapper: 'h-12 w-12',
    avatarPx: 96,
    nameVariant: 'bodySm',
    professionVariant: 'subtitle',
  },
  // Mobile-first feature byline: starts at `lg` size, scales up at `md`.
  xl: {
    grid: 'grid-cols-[3rem_minmax(0,1fr)] gap-3',
    avatarWrapper: 'h-12 w-12',
    avatarPx: 128,
    nameVariant: 'bodySm',
    professionVariant: 'subtitle',
    mdUp: {
      grid: 'md:grid-cols-[4rem_minmax(0,1fr)] md:gap-4',
      avatarWrapper: 'md:h-16 md:w-16',
      // lead: 'leading-relaxed text-lg' / bodySm: 'leading-relaxed text-sm'
      nameClass: 'md:text-lg md:leading-relaxed',
      professionClass: 'md:text-sm md:leading-relaxed',
    },
  },
};

/**
 * Horizontal "byline" layout for a creator: avatar on the left, name and
 * profession stacked on the right. Layout-only — pass `href` to make the whole
 * row a link (like CreatorAvatar's href), otherwise render it inside whatever
 * interactive wrapper the call site needs (button, SelectItem…).
 *
 * Per the typography doctrine, list-row type does not reflow, so `size` controls
 * only the avatar and grid column — the text stays on fixed typography variants.
 */
const CreatorIdentityRow: React.FC<CreatorIdentityRowProps> = ({
  creator,
  size = 'md',
  tone = 'default',
  href,
  className,
}) => {
  const styles = sizeStyles[size];
  const name = creator.nev || '';
  const profession = creator.szakma?.trim() || null;
  const nameTone = tone === 'inverse' ? 'inverse' : 'strong';
  const professionTone = tone === 'inverse' ? 'inverseMuted' : 'muted';

  const body = (
    <>
      <CreatorAvatar
        imageId={creator.profilkep?.id}
        name={name}
        wrapperClassName={cn(
          'shrink-0 rounded-full',
          styles.avatarWrapper,
          styles.mdUp?.avatarWrapper
        )}
        imageClassName="rounded-full"
      />
      <span className="min-w-0 overflow-hidden">
        <Text
          as="span"
          variant={styles.nameVariant}
          tone={nameTone}
          className={cn(
            'block truncate font-semibold',
            styles.mdUp?.nameClass,
            href && 'underline-offset-2 group-hover:underline'
          )}
        >
          {creator.elhalalozasIdeje ? (
            <CreatorDeathMark
              className={cn(
                'mr-[2px] text-[10px]',
                tone === 'inverse' ? 'text-white/70' : 'text-[#151720]/75'
              )}
            />
          ) : null}
          {name}
        </Text>
        {profession && (
          <Text
            as="span"
            variant={styles.professionVariant}
            tone={professionTone}
            className={cn('block truncate', styles.mdUp?.professionClass)}
          >
            {profession}
          </Text>
        )}
      </span>
    </>
  );

  const layout = cn(
    'grid w-full min-w-0 max-w-full items-center overflow-hidden',
    styles.grid,
    styles.mdUp?.grid,
    className
  );

  if (href) {
    return (
      <RouteLink href={href} className={cn('group', layout, linkFocusRing)}>
        {body}
      </RouteLink>
    );
  }

  return <div className={layout}>{body}</div>;
};

export default CreatorIdentityRow;