import type { PinnedMessage } from '@chat-app/shared/chat';

import { PinIcon, XIcon } from './icons';

interface Props {
  open: boolean;
  pins: PinnedMessage[];
  onClose: () => void;
  onJump: (messageId: string) => void;
  onUnpin: (messageId: string) => void;
  // Optional preview-renderer: parent resolves messageId → short text/snippet
  // since the panel itself doesn't decrypt. If absent, the panel just shows
  // the message-id stub.
  renderPreview?: (messageId: string) => React.ReactNode;
}

export function PinnedMessagesPanel({ open, pins, onClose, onJump, onUnpin, renderPreview }: Props) {
  if (!open) return null;
  return (
    <aside
      role="complementary"
      aria-label="Angepinnte Nachrichten"
      className="absolute right-0 top-0 z-30 flex h-full w-80 flex-col border-l border-line bg-surface-2 shadow-xl"
    >
      <header className="flex items-center justify-between border-b border-line px-4 py-3">
        <div className="flex items-center gap-2">
          <PinIcon className="h-4 w-4 text-accent" />
          <h3 className="text-sm font-semibold text-fg">Angepinnt · {pins.length}</h3>
        </div>
        <button
          type="button"
          onClick={onClose}
          aria-label="Schließen"
          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted hover:bg-surface-3 hover:text-fg"
        >
          <XIcon className="h-4 w-4" />
        </button>
      </header>
      {pins.length === 0 ? (
        <p className="p-6 text-center text-xs text-fg-muted">Noch nichts angepinnt.</p>
      ) : (
        <ul className="flex-1 overflow-y-auto">
          {pins.map((p) => (
            <li key={p.messageId} className="border-b border-line/60 px-4 py-3">
              <button
                type="button"
                onClick={() => onJump(p.messageId)}
                className="block w-full cursor-pointer text-left text-sm text-fg hover:text-accent"
              >
                {renderPreview ? renderPreview(p.messageId) : <span className="font-mono text-xs">{p.messageId.slice(0, 8)}</span>}
              </button>
              <div className="mt-1 flex items-center justify-between text-[11px] text-fg-muted">
                <time dateTime={p.pinnedAt}>{new Date(p.pinnedAt).toLocaleString()}</time>
                <button
                  type="button"
                  onClick={() => onUnpin(p.messageId)}
                  className="cursor-pointer text-rose-400 hover:underline"
                >
                  Anheftung entfernen
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </aside>
  );
}