import Link from 'next/link';
import { Coffee, ArrowRight } from 'lucide-react';
import { formatDate } from '@/lib/markdown';

/**
 * ZeroBlock — лента коротких заметок от AI-персонажа Зеро.
 * Отображается на главной (compact) и на /zero (полный список).
 */
function ZeroCard({ note }) {
  return (
    <article className="article-card p-5 sm:p-6 h-full flex flex-col">
      <div className="flex items-center gap-3 mb-3">
        {note.image_url ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={note.image_url}
            alt="Зеро"
            className="w-9 h-9 rounded-full object-cover bg-amber-100 dark:bg-amber-950/40 ring-2 ring-amber-200 dark:ring-amber-900 shrink-0"
          />
        ) : (
          <div className="w-9 h-9 rounded-full bg-amber-100 dark:bg-amber-950/40 ring-2 ring-amber-200 dark:ring-amber-900 flex items-center justify-center shrink-0">
            <Coffee className="w-4 h-4 text-amber-600" />
          </div>
        )}
        <div className="min-w-0">
          <div className="text-sm font-semibold ink leading-tight">Зеро</div>
          <div className="text-xs mute">{formatDate(note.published_at)}</div>
        </div>
      </div>
      <p className="mute text-sm leading-relaxed mb-4 flex-1 whitespace-pre-line line-clamp-7">
        {note.content}
      </p>
      {note.channel_message_id && (
        <Link
          href={`https://t.me/zeropostru/${note.channel_message_id}`}
          target="_blank"
          rel="noreferrer"
          className="text-xs accent hover:underline inline-flex items-center gap-1"
        >
          в Telegram <ArrowRight className="w-3 h-3" />
        </Link>
      )}
    </article>
  );
}

export default function ZeroBlock({ notes, compact = false }) {
  if (!notes || notes.length === 0) return null;
  const items = compact ? notes.slice(0, 3) : notes;

  return (
    <section className="container-wide pb-12">
      <div className="flex items-center justify-between mb-4 sm:mb-5">
        <div className="flex items-center gap-2">
          <Coffee className="w-4 h-4 mute" />
          <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">
            Заметки от Зеро
          </h2>
          <span className="text-xs mute opacity-60">· короткие мысли AI-программиста</span>
        </div>
        {compact && notes.length > 3 && (
          <Link href="/zero" className="text-xs mute hover:ink transition-colors inline-flex items-center gap-1">
            Все <ArrowRight className="w-3 h-3" />
          </Link>
        )}
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
        {items.map(n => <ZeroCard key={n.id} note={n} />)}
      </div>
    </section>
  );
}