import Link from "next/link";
import type { listMostLikedConfessions, listMostViewedConfessions, listMostCommentedConfessions } from "@/lib/confessions/queries";

type LikedConfession = Awaited<ReturnType<typeof listMostLikedConfessions>>[number];
type ViewedConfession = Awaited<ReturnType<typeof listMostViewedConfessions>>[number];
type CommentedConfession = Awaited<ReturnType<typeof listMostCommentedConfessions>>[number];

function SidebarSection({
  title,
  icon,
  children,
}: {
  title: string;
  icon: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-2xl border border-border bg-surface p-4">
      <div className="mb-3 flex items-center gap-1.5 text-[12.5px] font-bold uppercase tracking-wide text-accent">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
          {icon}
        </svg>
        {title}
      </div>
      <div className="flex flex-col gap-2.5">{children}</div>
    </div>
  );
}

function SidebarRow({ title, slug, count, countLabel }: { title: string; slug: string; count: number; countLabel: string }) {
  return (
    <Link href={`/itiraflar/${slug}`} className="group flex items-start justify-between gap-2">
      <span className="line-clamp-2 text-[13px] leading-snug text-text group-hover:text-accent">{title}</span>
      <span className="shrink-0 whitespace-nowrap text-[11px] font-semibold text-text-muted" title={countLabel}>
        {count}
      </span>
    </Link>
  );
}

export function ConfessionSidebar({
  mostLiked,
  mostViewed,
  mostCommented,
}: {
  mostLiked: LikedConfession[];
  mostViewed: ViewedConfession[];
  mostCommented: CommentedConfession[];
}) {
  if (mostLiked.length === 0 && mostViewed.length === 0 && mostCommented.length === 0) return null;

  return (
    <div className="flex flex-col gap-5">
      {mostLiked.length > 0 && (
        <SidebarSection
          title="En Çok Beğenilenler"
          icon={<path d="M12 20s-7-4.35-9.5-8.5C.5 8 2 4 6 4c2 0 3.5 1.2 4 2.5C10.5 5.2 12 4 14 4c4 0 5.5 4 3.5 7.5C19 15.65 12 20 12 20z" />}
        >
          {mostLiked.map((c) => (
            <SidebarRow key={c.id} title={c.title} slug={c.slug} count={c._count.likes} countLabel="beğeni" />
          ))}
        </SidebarSection>
      )}

      {mostViewed.length > 0 && (
        <SidebarSection
          title="En Çok Okunanlar"
          icon={
            <>
              <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
              <circle cx="12" cy="12" r="3" />
            </>
          }
        >
          {mostViewed.map((c) => (
            <SidebarRow key={c.id} title={c.title} slug={c.slug} count={c.viewCount} countLabel="okunma" />
          ))}
        </SidebarSection>
      )}

      {mostCommented.length > 0 && (
        <SidebarSection
          title="En Çok Yorum Alanlar"
          icon={<path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" />}
        >
          {mostCommented.map((c) => (
            <SidebarRow key={c.id} title={c.title} slug={c.slug} count={c._count.comments} countLabel="yorum" />
          ))}
        </SidebarSection>
      )}
    </div>
  );
}