import React from 'react';
import { LuFileText, LuLightbulb, LuTrash2 } from 'react-icons/lu';

import { cn } from '../copilot/cn';

interface ContentCardProps {
  title: string;
  preview: React.ReactNode;
  lead?: React.ReactNode;
  meta?: React.ReactNode;
  actions?: React.ReactNode;
  children?: React.ReactNode;
  idea?: boolean;
  className?: string;
  selectable?: boolean;
  selected?: boolean;
  onToggleSelect?: () => void;
}

function ContentCard({
  title,
  preview,
  lead,
  meta,
  actions,
  children,
  idea = false,
  className,
  selectable = false,
  selected = false,
  onToggleSelect,
}: ContentCardProps): JSX.Element {
  const Glyph = idea ? LuLightbulb : LuFileText;

  return (
    <div
      role={selectable ? 'button' : undefined}
      aria-pressed={selectable ? selected : undefined}
      tabIndex={selectable ? 0 : undefined}
      onClick={selectable ? onToggleSelect : undefined}
      onKeyDown={
        selectable
          ? event => {
              if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                onToggleSelect?.();
              }
            }
          : undefined
      }
      className={cn(
        'flex flex-col overflow-hidden rounded-[14px] border border-gray-200 bg-white transition-colors',
        selectable ? 'cursor-pointer' : 'hover:border-gray-300',
        selected && 'ring-2 ring-pink-500',
        className
      )}
    >
      <div className="relative">
        {preview}
        {selectable && (
          <span className="pointer-events-none absolute left-3 top-3">
            <input
              type="checkbox"
              checked={selected}
              readOnly
              tabIndex={-1}
              aria-hidden="true"
              className="h-4 w-4 rounded border-gray-300 accent-pink-600"
            />
          </span>
        )}
      </div>

      <div className="flex min-w-0 flex-1 flex-col gap-2.5 border-t border-gray-100 p-3.5">
        {lead && (
          <div className="flex flex-wrap items-center gap-1.5 text-[12.5px] text-gray-500">
            {lead}
          </div>
        )}

        <div className="flex min-w-0 items-start gap-2">
          <Glyph
            className={cn(
              'mt-0.5 size-4 shrink-0',
              idea ? 'text-amber-600' : 'text-pink-700'
            )}
          />
          <h3
            className="line-clamp-2 min-w-0 flex-1 text-[14px] leading-snug font-semibold text-gray-900"
            title={title}
          >
            {title}
          </h3>
        </div>

        {meta && (
          <div className="flex flex-wrap items-center gap-1.5">{meta}</div>
        )}

        {children}

        {actions && (
          <div className="mt-auto flex items-center gap-2 pt-1">{actions}</div>
        )}
      </div>
    </div>
  );
}

export const CARD_ACTION =
  'inline-flex h-8 flex-1 items-center justify-center rounded-lg bg-primary px-3 text-[13px] font-semibold text-white transition-opacity hover:opacity-90 disabled:pointer-events-none disabled:opacity-50';

export const CARD_ACTION_QUIET =
  'inline-flex h-8 flex-1 items-center justify-center rounded-lg border border-gray-200 px-3 text-[13px] font-medium text-gray-500';

interface CardIconButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  busy?: boolean;
}

export function CardIconButton({
  label,
  onClick,
  disabled = false,
  busy = false,
}: CardIconButtonProps): JSX.Element {
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      disabled={disabled || busy}
      onClick={event => {
        event.stopPropagation();
        onClick();
      }}
      className={cn(
        'grid size-8 shrink-0 place-items-center rounded-lg border border-gray-200 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600',
        (disabled || busy) && 'opacity-50'
      )}
    >
      {busy ? (
        <span className="text-[13px]">…</span>
      ) : (
        <LuTrash2 className="size-3.5" />
      )}
    </button>
  );
}

interface CardOpenButtonProps {
  onClick: () => void;
  children?: React.ReactNode;
}

export function CardOpenButton({
  onClick,
  children = 'Open content',
}: CardOpenButtonProps): JSX.Element {
  return (
    <button
      type="button"
      onClick={event => {
        event.stopPropagation();
        onClick();
      }}
      className={CARD_ACTION}
    >
      {children}
    </button>
  );
}

export default ContentCard;