import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight, ExternalLink } from "lucide-react";
import type { ProjectRow } from "@/lib/types";

const CATEGORY_COLORS: Record<string, string> = {
  "Kurumsal Web Sitesi": "bg-[var(--navy)]",
  "Klinik Web Sitesi": "bg-cyan-600",
  "Portfolyo & SEO": "bg-violet-600",
  "Web Tasarım": "bg-emerald-600",
  "Özel Yazılım": "bg-sky-600",
  "E-Ticaret": "bg-pink-600",
};

export function ProjectsGrid({ projects }: { projects: ProjectRow[] }) {
  if (projects.length === 0) {
    return (
      <div className="rounded-2xl border border-dashed border-[var(--border)] bg-[var(--navy-50)]/40 p-12 text-center">
        <p className="text-sm text-[var(--muted)]">
          Proje portföyü yakında burada. Birlikte çalışmak isterseniz iletişime geçin.
        </p>
      </div>
    );
  }

  return (
    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      {projects.map((p) => {
        const tagColor = p.category && CATEGORY_COLORS[p.category]
          ? CATEGORY_COLORS[p.category]
          : "bg-[var(--navy)]";
        return (
          <article
            key={p.$id}
            className="group overflow-hidden rounded-2xl border border-[var(--border)] bg-white transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-[var(--navy)]/10"
          >
            <Link href={`/projeler/${p.slug}`} className="block">
              <div className="relative aspect-[5/3] overflow-hidden bg-[var(--navy-50)]">
                {p.image_url ? (
                  <Image
                    src={p.image_url}
                    alt={p.title}
                    fill
                    sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
                    className="object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                ) : (
                  <div className="flex h-full items-center justify-center text-[var(--navy)]/30">
                    <span className="text-5xl font-bold">{p.title.charAt(0)}</span>
                  </div>
                )}
                {/* Overlay gradient — WP stili */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/65 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
                {p.category && (
                  <span
                    className={`absolute left-4 top-4 rounded-full ${tagColor} px-3 py-1 text-xs font-semibold text-white shadow-lg`}
                  >
                    {p.category}
                  </span>
                )}
              </div>
            </Link>
            <div className="p-6">
              <div className="flex items-start justify-between gap-3">
                <Link href={`/projeler/${p.slug}`} className="block">
                  <h3 className="text-lg font-bold text-[var(--navy)] transition-colors group-hover:text-[var(--sky-600)]">
                    {p.title}
                  </h3>
                </Link>
                {p.live_url ? (
                  <a
                    href={p.live_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Projeyi canlı aç"
                    className="text-[var(--sky-600)] transition-colors hover:text-[var(--navy)]"
                  >
                    <ExternalLink className="size-4" />
                  </a>
                ) : (
                  <ArrowUpRight className="size-5 text-[var(--muted)] transition-colors group-hover:text-[var(--sky-600)]" />
                )}
              </div>
              <p className="mt-2 text-sm leading-relaxed text-[var(--muted)] line-clamp-3">
                {p.description}
              </p>
              {p.technologies && p.technologies.length > 0 && (
                <div className="mt-4 flex flex-wrap gap-1.5">
                  {p.technologies.map((t) => (
                    <span
                      key={t}
                      className="rounded-md bg-[var(--navy-50)] px-2 py-0.5 text-xs font-medium text-[var(--navy-700)]"
                    >
                      {t}
                    </span>
                  ))}
                </div>
              )}
            </div>
          </article>
        );
      })}
    </div>
  );
}