'use client';

import { wrapArtifactContent } from '../../components/dashboard/artifact-utils.js';
import { formatBytes, itemAuthorLabel, itemKindLabel, itemName, when } from './album-utils.js';

function Thumbnail({ item, MarkdownThumbnail }) {
  if (item.source_type === 'file' && item.local_only) {
    return <div className="project-album-thumb-tile" data-kind="local"><span>LOCAL</span><small>{formatBytes(item.size_bytes)}</small></div>;
  }
  if (item.render_kind === 'html' && item.body) {
    return (
      <div className="project-album-thumb-iframe-wrap" aria-hidden="true">
        <iframe
          className="project-album-thumb-iframe"
          srcDoc={wrapArtifactContent(item.body)}
          sandbox=""
          loading="lazy"
          tabIndex={-1}
          title=""
        />
        <div className="project-album-thumb-shield" />
      </div>
    );
  }
  if (item.render_kind === 'markdown' && item.body) {
    return <div className="project-album-thumb-md" aria-hidden="true"><div className="project-album-thumb-md-inner"><MarkdownThumbnail>{String(item.body).slice(0, 800)}</MarkdownThumbnail></div></div>;
  }
  const kindLabel = String(item.kind || 'FILE').toUpperCase().slice(0, 6);
  return <div className="project-album-thumb-tile" data-kind={String(item.kind || 'file').toLowerCase()}><span>{kindLabel}</span>{item.source_type === 'file' ? <small>{formatBytes(item.size_bytes)}</small> : null}</div>;
}

export default function AlbumCard({
  item, onOpen, onDoubleOpen, onOpenUnlock, blurred = false, highlighted = false,
  protectedFlag = false, keyHintVisible = false, onShowKeyHint, onHideKeyHint,
  draggable = false, onDragStart, moving = false, MarkdownThumbnail,
}) {
  const title = itemName(item);
  const kind = itemKindLabel(item);
  const author = itemAuthorLabel(item);
  const ts = item.updated_at || item.created_at;
  const classes = ['project-album-card'];
  if (blurred) classes.push('blurred');
  if (highlighted) classes.push('highlighted');
  if (protectedFlag) classes.push('is-protected');
  if (moving) classes.push('moving');

  const handleKeyDown = (e) => {
    if (!blurred) return;
    if (e.key === 'd' || e.key === 'D') {
      e.preventDefault();
      onOpenUnlock();
      return;
    }
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onShowKeyHint();
      setTimeout(onHideKeyHint, 2500);
    }
  };

  return (
    <button
      type="button"
      className={classes.join(' ')}
      onClick={onOpen}
      onDoubleClick={onDoubleOpen}
      onKeyDown={handleKeyDown}
      tabIndex={0}
      aria-label={blurred ? `${title} — protected. Double-click or press D to unlock.` : `Open ${title}`}
      aria-disabled={blurred || undefined}
      style={blurred ? { userSelect: 'none' } : undefined}
      draggable={draggable && !blurred}
      onDragStart={draggable && !blurred ? onDragStart : undefined}
    >
      <div className="project-album-thumb" data-render={item.render_kind || 'text'} data-source={item.source_type} aria-hidden={blurred ? 'true' : undefined}>
        <Thumbnail item={item} MarkdownThumbnail={MarkdownThumbnail} />
        {blurred ? <div className="project-album-thumb-lock" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="7" width="10" height="7" rx="1.5" /><path d="M5 7V5a3 3 0 0 1 6 0v2" /></svg></div> : null}
        {protectedFlag && !blurred ? <div className="project-album-thumb-badge" aria-hidden="true" title="Protected"><svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="7" width="10" height="7" rx="1.5" /><path d="M5 7V5a3 3 0 0 1 6 0v2" /></svg></div> : null}
      </div>
      <div className="project-album-card-body">
        <b title={title}>{title}</b>
        <small className="project-album-card-meta">
          <span className="project-album-kind">{kind}</span><span aria-hidden="true"> · </span><span>{author}</span>
          {ts ? <><span aria-hidden="true"> · </span><time dateTime={ts}>{when(ts)}</time></> : null}
        </small>
      </div>
      {keyHintVisible ? <div className="project-album-key-hint" aria-live="polite" role="status">Double-click or press D to unlock.</div> : null}
    </button>
  );
}
