import React, { type CSSProperties, useMemo } from 'react';
import { LuClipboard, LuInfo, LuLink } from 'react-icons/lu';

import { cn } from '../copilot/cn';
import { copyToClipboard } from '../../lib/clipboard';

import {
  parseProfileFields,
  type ProfileFieldSpec,
  type ProfilePlatformSpec,
  resolveProfileSpec,
  splitItems,
} from './profile-platform-specs';

interface ProfilePreviewProps {
  markdown: string;
  platform: string | null | undefined;
  title: string;
  topic?: string | null;
  slug?: string | null;
  logoUrl?: string | null;
  onCopied?: (message: string) => void;
}

/* The card is intentionally LIGHT (real profiles are), like PagePreview, so it
   reads the same in a dark or light dashboard. These are its fixed colours. */
// The card is intentionally light (real profiles are) so it reads the same
// whatever the dashboard theme is.
const INK = '#10151c';
const BODY = '#2b3440';
const SUB = '#5b6572';
const MUT = '#8892a0';
const LINE = '#e6e9ee';
const PANEL = '#f8f9fb';
const PANEL_LINE = '#eef1f5';
const BTN_LINE = '#d3d9e0';

const AVATAR_RADIUS: Record<ProfilePlatformSpec['avatarShape'], string> = {
  circle: 'rounded-full',
  rounded: 'rounded-2xl',
  tile: 'rounded-lg',
  doc: 'rounded-md',
};

const deriveHandle = (title: string, slug?: string | null): string => {
  // Prefer the brand name: a profile row's slug is its preset topic
  // ("instagram-bio"), which reads wrong as a handle.
  for (const source of [title, slug]) {
    const base = (source || '')
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, '')
      .slice(0, 24);
    if (base) return `@${base}`;
  }

  return '@yourbrand';
};

const subtitleFor = (
  spec: ProfilePlatformSpec,
  handle: string
): string | null => {
  switch (spec.identity) {
    case 'handle':
      return handle;
    case 'page':
      return 'Company · Page';
    case 'channel':
      return `${handle} · Channel`;
    case 'store':
      return 'Store';
    case 'business':
      return 'Business Account';
    default:
      return null;
  }
};

function Avatar({
  spec,
  monogram,
  logoUrl,
  size,
}: {
  spec: ProfilePlatformSpec;
  monogram: string;
  logoUrl?: string | null;
  size: number;
}): JSX.Element {
  return (
    <span
      className={cn(
        'box-content grid shrink-0 place-items-center overflow-hidden border-4 border-white font-bold text-white',
        AVATAR_RADIUS[spec.avatarShape]
      )}
      style={{
        width: size,
        height: size,
        backgroundColor: spec.accent,
        fontSize: Math.round(size * 0.42),
        boxShadow:
          '0 0 0 1px rgba(16,21,28,0.06), 0 2px 10px rgba(16,21,28,0.14)',
      }}
      aria-hidden="true"
    >
      {logoUrl ? (
        <img src={logoUrl} alt="" className="h-full w-full object-cover" />
      ) : (
        monogram
      )}
    </span>
  );
}

function ActionButtons({
  spec,
  size = 'md',
  className,
}: {
  spec: ProfilePlatformSpec;
  size?: 'sm' | 'md';
  className?: string;
}): JSX.Element | null {
  const chrome = spec.chrome;
  const buttons = chrome?.buttons;
  if (!buttons?.length) return null;
  const accent = chrome?.buttonAccent ?? spec.accent;
  const buttonStyle = (btn: {
    solid?: boolean;
    muted?: boolean;
  }): CSSProperties => {
    if (btn.solid)
      return {
        background: accent,
        color: '#fff',
        boxShadow: '0 1px 2px rgba(16,21,28,0.18)',
      };
    if (btn.muted) return { background: '#eef1f5', color: INK };
    if (chrome?.accentOutline)
      return {
        border: `1px solid ${accent}`,
        color: accent,
        background: '#fff',
      };

    return { border: `1px solid ${BTN_LINE}`, color: INK, background: '#fff' };
  };

  return (
    <div className={cn('flex flex-wrap items-center gap-2', className)}>
      {buttons.map(btn => (
        <span
          key={btn.label}
          className={cn(
            'cursor-default select-none whitespace-nowrap font-semibold',
            chrome?.shape === 'rect' ? 'rounded-lg' : 'rounded-full',
            size === 'sm'
              ? 'px-3.5 py-1 text-[13.5px]'
              : 'px-4 py-1.5 text-[14px]'
          )}
          style={buttonStyle(btn)}
        >
          {btn.label}
        </span>
      ))}
    </div>
  );
}

function TabsRow({
  spec,
  centered,
  className,
}: {
  spec: ProfilePlatformSpec;
  centered?: boolean;
  className?: string;
}): JSX.Element | null {
  const tabs = spec.chrome?.tabs;
  if (!tabs?.length) return null;

  return (
    <div
      className={cn(
        'flex gap-5 border-b',
        centered && 'justify-center',
        className
      )}
      style={{ borderColor: LINE }}
    >
      {tabs.map((tab, index) => (
        <span
          key={tab}
          className="cursor-default select-none pb-2 text-[14px] font-semibold"
          style={
            index === 0
              ? { color: INK, boxShadow: `inset 0 -2px 0 ${spec.accent}` }
              : { color: MUT }
          }
        >
          {tab}
        </span>
      ))}
    </div>
  );
}

function GridHint({ spec }: { spec: ProfilePlatformSpec }): JSX.Element | null {
  const grid = spec.chrome?.grid;
  if (!grid) return null;

  return (
    <div className="mt-2 grid grid-cols-3 gap-1" aria-hidden="true">
      {[0, 1, 2].map(index => (
        <div
          key={index}
          className={cn(
            'rounded-[3px]',
            grid === 'video' ? 'aspect-[3/4]' : 'aspect-square'
          )}
          style={{ background: PANEL, border: `1px solid ${PANEL_LINE}` }}
        />
      ))}
    </div>
  );
}

function Stats({
  spec,
  variant = 'inline',
  className,
}: {
  spec: ProfilePlatformSpec;
  variant?: 'inline' | 'columns';
  className?: string;
}): JSX.Element | null {
  const stats = spec.chrome?.stats;
  if (!stats?.length) return null;
  if (variant === 'columns') {
    return (
      <div className={cn('flex flex-wrap items-center gap-7', className)}>
        {stats.map(label => (
          <span
            key={label}
            className="flex flex-col items-center leading-tight"
          >
            <b className="text-[15px] font-bold" style={{ color: INK }}>
              &mdash;
            </b>
            <span className="text-[13.5px]" style={{ color: MUT }}>
              {label}
            </span>
          </span>
        ))}
      </div>
    );
  }

  return (
    <div
      className={cn('flex flex-wrap items-center gap-x-5 gap-y-1', className)}
    >
      {stats.map(label => (
        <span key={label} className="text-[14px]" style={{ color: MUT }}>
          <b className="font-bold" style={{ color: INK }}>
            &mdash;
          </b>{' '}
          {label}
        </span>
      ))}
    </div>
  );
}

function EmptyValue(): JSX.Element {
  return (
    <p
      className="rounded-lg border border-dashed px-3 py-2.5 text-[14px] italic"
      style={{ borderColor: '#d8dde4', color: MUT }}
    >
      Not found in the generated text.
    </p>
  );
}

function ProfilePreview({
  markdown,
  platform,
  title,
  topic,
  slug,
  logoUrl,
  onCopied,
}: ProfilePreviewProps): JSX.Element {
  const spec = useMemo(
    () => resolveProfileSpec(platform, topic),
    [platform, topic]
  );
  const parsed = useMemo(
    () => parseProfileFields(markdown || '', spec),
    [markdown, spec]
  );
  const displayName = (title || 'Your brand').trim();
  const monogram = (displayName.charAt(0) || '?').toUpperCase();
  const handle = deriveHandle(displayName, slug);
  const subtitle = subtitleFor(spec, handle);
  const headlineFields = spec.fields.filter(field => field.slot === 'headline');
  const bodyFields = spec.fields.filter(field => field.slot !== 'headline');
  const isMultiField = spec.fields.length > 1;

  const copy = async (text: string, label: string): Promise<void> => {
    const ok = await copyToClipboard(text);
    onCopied?.(ok ? `${label} copied` : 'Copy failed');
  };

  const avatar = (size: number) => (
    <Avatar spec={spec} monogram={monogram} logoUrl={logoUrl} size={size} />
  );

  const headlineLine = (field: ProfileFieldSpec) => {
    const value = parsed[field.key] || '';

    return (
      <div key={field.key} className="mt-3">
        {value ? (
          <p
            className={cn(
              'text-[14.5px] leading-relaxed',
              field.multiline && 'whitespace-pre-wrap'
            )}
            style={{ color: BODY }}
          >
            {value}
          </p>
        ) : (
          <EmptyValue />
        )}
      </div>
    );
  };

  const sectionBlock = (field: ProfileFieldSpec) => {
    const value = parsed[field.key] || '';
    const items = field.render === 'chips' ? splitItems(value) : [];

    return (
      <div
        key={field.key}
        className="rounded-xl p-4"
        style={{ background: PANEL, border: `1px solid ${PANEL_LINE}` }}
      >
        <div className="mb-2 flex items-center justify-between gap-2">
          <span
            className="text-[12.5px] font-bold uppercase tracking-[0.08em]"
            style={{ color: SUB }}
          >
            {field.label}
          </span>
          <button
            type="button"
            onClick={() => copy(value, field.label)}
            disabled={!value}
            className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[13px] font-medium transition-colors hover:bg-white disabled:opacity-40"
            style={{ color: SUB }}
          >
            <LuClipboard className="size-3" />
            Copy
          </button>
        </div>
        {value ? (
          field.render === 'chips' ? (
            <div className="flex flex-wrap gap-1.5">
              {items.map((item, index) => (
                <span
                  key={index}
                  className="rounded-full bg-white px-3 py-1 text-[13.5px]"
                  style={{ border: `1px solid ${LINE}`, color: BODY }}
                >
                  {item}
                </span>
              ))}
            </div>
          ) : (
            <p
              className={cn(
                'text-[14.5px] leading-relaxed',
                field.multiline && 'whitespace-pre-wrap'
              )}
              style={{ color: BODY }}
            >
              {value}
            </p>
          )
        ) : (
          <EmptyValue />
        )}
      </div>
    );
  };

  /* --- Press: a document/boilerplate card, no social chrome. --- */
  if (spec.shell === 'doc') {
    const field = spec.fields[0];
    const value = parsed[field.key] || '';

    return (
      <div
        className="overflow-hidden rounded-xl border shadow-sm"
        style={{ borderColor: 'var(--border)' }}
      >
        <MockBanner spec={spec} />
        <div className="bg-white">
          <div className="h-1.5" style={{ background: spec.accent }} />
          <div className="p-7">
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0">
                <div
                  className="font-mono text-[12px] font-medium uppercase tracking-[0.14em]"
                  style={{ color: MUT }}
                >
                  Company boilerplate · For press
                </div>
                <p
                  className="mt-1.5 text-[20px] font-bold"
                  style={{ color: INK }}
                >
                  About {displayName}
                </p>
              </div>
              <button
                type="button"
                onClick={() => copy(value, spec.label)}
                disabled={!value}
                className="inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[13px] font-medium transition-colors hover:bg-[#f6f7f9] disabled:opacity-40"
                style={{ border: `1px solid ${BTN_LINE}`, color: SUB }}
              >
                <LuClipboard className="size-3" />
                Copy
              </button>
            </div>
            <div className="mt-4 h-px" style={{ background: LINE }} />
            <div className="mt-4">
              {value ? (
                <p
                  className="whitespace-pre-wrap text-[15px] leading-[1.8]"
                  style={{
                    color: BODY,
                    fontFamily: "Georgia, 'Times New Roman', serif",
                  }}
                >
                  {value}
                </p>
              ) : (
                <EmptyValue />
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      className="overflow-hidden rounded-xl border shadow-sm"
      style={{ borderColor: 'var(--border)' }}
    >
      <MockBanner spec={spec} />
      <div className="bg-white">
        {/* header per shell */}
        {spec.shell === 'cover' ? (
          <>
            <div
              className="relative h-28"
              style={{ background: spec.cover || spec.accent }}
            >
              {/* soft highlight so flat gradients read as a designed cover */}
              <div
                className="absolute inset-0"
                style={{
                  background:
                    'radial-gradient(120% 100% at 18% 0%, rgba(255,255,255,0.25), transparent 55%)',
                }}
              />
            </div>
            <div className="px-6 pb-6">
              {/* ``relative`` so the row paints ABOVE the positioned cover band;
                  without it the cover occludes the avatar's overlapping half. */}
              <div className="relative -mt-10 flex items-end justify-between gap-3">
                {avatar(80)}
                <ActionButtons spec={spec} className="pb-1" />
              </div>
              <p
                className="mt-3 text-[21px] font-bold leading-tight"
                style={{ color: INK }}
              >
                {displayName}
              </p>
              {subtitle ? (
                <p className="mt-0.5 text-[14.5px]" style={{ color: SUB }}>
                  {subtitle}
                </p>
              ) : null}
              {/* Real cover profiles (X) put the bio above the stat line. */}
              {headlineFields.map(headlineLine)}
              <Stats spec={spec} className="mt-3" />
              <TabsRow spec={spec} className="mt-4" />
              {bodyFields.length > 0 ? (
                <div className="mt-4 flex flex-col gap-3">
                  {bodyFields.map(sectionBlock)}
                </div>
              ) : null}
              <Extras spec={spec} />
              {isMultiField ? (
                <CopyAll
                  onCopy={() => copy(markdown || '', 'All fields')}
                  disabled={!markdown}
                />
              ) : null}
            </div>
          </>
        ) : spec.shell === 'ig' ? (
          <div className="p-6">
            <div className="flex items-start gap-5">
              <span
                className="shrink-0 rounded-full p-[3px]"
                style={{
                  background:
                    'conic-gradient(from 30deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34)',
                }}
              >
                {avatar(64)}
              </span>
              <div className="min-w-0 flex-1 pt-1">
                <div className="flex flex-wrap items-center gap-2.5">
                  <span
                    className="truncate text-[17px] font-semibold"
                    style={{ color: INK }}
                  >
                    {handle.replace(/^@/, '')}
                  </span>
                  <ActionButtons spec={spec} size="sm" />
                </div>
                <Stats spec={spec} className="mt-3" />
              </div>
            </div>
            <p
              className="mt-4 text-[14.5px] font-semibold"
              style={{ color: INK }}
            >
              {displayName}
            </p>
            {headlineFields.map(headlineLine)}
            <TabsRow spec={spec} className="mt-4" />
            <GridHint spec={spec} />
            {bodyFields.length > 0 ? (
              <div className="mt-4 flex flex-col gap-3">
                {bodyFields.map(sectionBlock)}
              </div>
            ) : null}
            <Extras spec={spec} />
          </div>
        ) : spec.shell === 'centered' ? (
          <div className="p-6 text-center">
            <div className="flex justify-center">{avatar(76)}</div>
            <p className="mt-3 text-[19px] font-bold" style={{ color: INK }}>
              {displayName}
            </p>
            {subtitle ? (
              <p className="mt-0.5 text-[14.5px]" style={{ color: SUB }}>
                {subtitle}
              </p>
            ) : null}
            <Stats
              spec={spec}
              variant="columns"
              className="mt-4 justify-center"
            />
            <ActionButtons spec={spec} className="mt-4 justify-center" />
            <div className="mx-auto max-w-[420px]">
              {headlineFields.map(headlineLine)}
            </div>
            <TabsRow spec={spec} centered className="mt-4" />
            <GridHint spec={spec} />
            {bodyFields.length > 0 ? (
              <div className="mt-4 flex flex-col gap-3 text-left">
                {bodyFields.map(sectionBlock)}
              </div>
            ) : null}
            <Extras spec={spec} />
          </div>
        ) : (
          /* plain */
          <div className="p-6">
            <div className="flex items-center gap-4">
              {avatar(64)}
              <div className="min-w-0 flex-1">
                <p className="text-[18px] font-bold" style={{ color: INK }}>
                  {displayName}
                </p>
                {subtitle ? (
                  <p className="mt-0.5 text-[14.5px]" style={{ color: SUB }}>
                    {subtitle}
                  </p>
                ) : null}
                <Stats spec={spec} className="mt-1.5" />
              </div>
            </div>
            <ActionButtons spec={spec} className="mt-4" />
            {headlineFields.map(headlineLine)}
            <TabsRow spec={spec} className="mt-4" />
            {bodyFields.length > 0 ? (
              <div className="mt-4 flex flex-col gap-3">
                {bodyFields.map(sectionBlock)}
              </div>
            ) : null}
            <Extras spec={spec} />
            {isMultiField ? (
              <CopyAll
                onCopy={() => copy(markdown || '', 'All fields')}
                disabled={!markdown}
              />
            ) : null}
          </div>
        )}
      </div>
    </div>
  );
}

function MockBanner({ spec }: { spec: ProfilePlatformSpec }): JSX.Element {
  return (
    <div className="flex items-center justify-between gap-2 border-b border-border bg-muted/40 px-3 py-2">
      <span className="flex items-center gap-2 text-[13px] font-medium text-muted-foreground">
        <span
          className="size-2 shrink-0 rounded-full"
          style={{ background: spec.accent }}
          aria-hidden="true"
        />
        Preview · how this reads on {spec.label}
      </span>
      <span className="rounded bg-background/60 px-2 py-0.5 text-[12px] font-medium uppercase tracking-wide text-muted-foreground">
        Recomaze mock
      </span>
    </div>
  );
}

function Extras({ spec }: { spec: ProfilePlatformSpec }): JSX.Element | null {
  const showNativeLink = spec.domainMode === 'native-link';
  if (!spec.note && !showNativeLink) return null;

  return (
    <div className="mt-5 flex flex-col gap-2 text-left">
      {spec.note ? (
        <p
          className="flex items-start gap-1.5 text-[13.5px]"
          style={{ color: MUT }}
        >
          <LuInfo className="mt-px size-3.5 shrink-0" />
          <span>{spec.note}</span>
        </p>
      ) : null}
      {showNativeLink ? (
        <p
          className="flex items-start gap-2 rounded-lg px-3 py-2.5 text-[13.5px]"
          style={{
            background: PANEL,
            border: `1px solid ${PANEL_LINE}`,
            color: SUB,
          }}
        >
          <LuLink className="mt-px size-3.5 shrink-0" />
          <span>
            On {spec.label}, your link is a separate profile field, not part of
            the bio text above.
          </span>
        </p>
      ) : null}
    </div>
  );
}

function CopyAll({
  onCopy,
  disabled,
}: {
  onCopy: () => void;
  disabled: boolean;
}): JSX.Element {
  return (
    <div className="mt-5">
      <button
        type="button"
        onClick={onCopy}
        disabled={disabled}
        className="inline-flex w-full items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[13.5px] font-semibold transition-colors hover:bg-[#f6f7f9] disabled:opacity-40"
        style={{ border: `1px solid ${BTN_LINE}`, color: INK }}
      >
        <LuClipboard className="size-3.5" />
        Copy all fields
      </button>
    </div>
  );
}

export default ProfilePreview;