"use client";

import { FolderOpen, Clock, CheckCircle, Video, ExternalLink } from "lucide-react";
import Link from "next/link";
import { useProjects } from "@/hooks/use-api";

const statusMap: Record<string, { icon: typeof Clock; color: string; label: string }> = {
  draft: { icon: Clock, color: "text-amber-400", label: "Taslak" },
  scripting: { icon: Clock, color: "text-blue-400", label: "Senaryo" },
  reviewing: { icon: Clock, color: "text-purple-400", label: "İnceleme" },
  rendering: { icon: Video, color: "text-cyan-400", label: "Render" },
  completed: { icon: CheckCircle, color: "text-emerald-400", label: "Tamamlandı" },
  failed: { icon: Clock, color: "text-red-400", label: "Hatalı" },
};

export function RecentProjects() {
  const { data, isLoading } = useProjects({ limit: 5 });
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const projects = (data as any)?.data?.items ?? (data as any)?.data ?? (data as any)?.items ?? [];

  if (isLoading) {
    return (
      <div className="card p-5 space-y-3">
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-semibold text-[var(--color-text-secondary)]">
            Son Projeler
          </h3>
        </div>
        {[1, 2, 3].map((i) => (
          <div
            key={i}
            className="h-16 rounded-xl bg-[var(--color-bg-deep)] animate-pulse"
          />
        ))}
      </div>
    );
  }

  return (
    <div className="card p-5">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-sm font-semibold text-[var(--color-text-secondary)]">
          Son Projeler
        </h3>
        <Link
          href="/dashboard/projects"
          className="text-xs text-neutral-400 hover:text-neutral-300 flex items-center gap-1 transition-colors"
        >
          Tümü <ExternalLink size={12} />
        </Link>
      </div>

      {Array.isArray(projects) && projects.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-8 text-center">
          <FolderOpen
            size={32}
            className="text-[var(--color-text-ghost)] mb-2"
          />
          <p className="text-sm text-[var(--color-text-muted)]">
            Henüz proje bulunmuyor
          </p>
          <Link
            href="/dashboard/projects/new"
            className="mt-3 text-xs text-neutral-400 hover:text-neutral-300"
          >
            İlk projenizi oluşturun →
          </Link>
        </div>
      ) : (
        <div className="space-y-2">
          {(Array.isArray(projects) ? projects : []).map(
            (project: {
              id: string;
              title: string;
              status: string;
              createdAt: string;
            }) => {
              const st = statusMap[project.status] ?? statusMap.draft;
              const StIcon = st.icon;
              return (
                <Link
                  key={project.id}
                  href={`/dashboard/projects/${project.id}`}
                  className="flex items-center gap-3 p-3 rounded-xl hover:bg-[var(--color-bg-elevated)] border border-transparent hover:border-[var(--color-border-faint)] transition-all group"
                >
                  <div
                    className={`w-8 h-8 rounded-lg bg-[var(--color-bg-deep)] flex items-center justify-center ${st.color}`}
                  >
                    <StIcon size={14} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-[var(--color-text-primary)] truncate group-hover:text-neutral-300 transition-colors">
                      {project.title}
                    </p>
                    <p className="text-[10px] text-[var(--color-text-ghost)]">
                      {new Date(project.createdAt).toLocaleDateString("tr-TR")}
                    </p>
                  </div>
                  <span
                    className={`text-[10px] font-medium px-2 py-0.5 rounded-full border ${st.color} border-current/20 bg-current/5`}
                  >
                    {st.label}
                  </span>
                </Link>
              );
            },
          )}
        </div>
      )}
    </div>
  );
}
