import { getProjects, deleteProject } from "@/lib/actions/project";
import { DeleteButton } from "@/components/dashboard/DeleteButton";
import {
  Plus,
  Search,
  ExternalLink,
  Edit2,
  Trash2,
  FolderGit2,
  Github,
  Award,
  AlertCircle,
} from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";

export const dynamic = "force-dynamic";

export default async function DashboardProjectsPage() {
  const projects = await getProjects();

  return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="space-y-1">
          <h1 className="text-3xl font-display font-bold text-foreground">
            Portfolio Projects
          </h1>
          <p className="text-foreground-muted">
            Manage your showcase projects and case studies.
          </p>
        </div>
        <Link
          href="/dashboard/projects/new"
          className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground font-medium rounded-lg hover:bg-primary/90 transition-all shadow-sm shadow-primary/20"
        >
          <Plus size={18} />
          Add Project
        </Link>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Search & Filter */}
        <div className="md:col-span-2 relative group mt-2">
          <Search
            className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted group-focus-within:text-primary transition-colors"
            size={18}
          />
          <input
            type="text"
            placeholder="Search projects..."
            className="w-full pl-10 pr-4 py-2.5 bg-surface border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm"
          />
        </div>
        <div className="flex items-center gap-2 justify-end">
          <div className="text-xs font-semibold text-foreground-muted uppercase tracking-wider">
            Total: {projects.length} Items
          </div>
        </div>
      </div>

      <div className="bg-surface border border-border/50 rounded-2xl overflow-hidden shadow-sm shadow-black/5">
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="border-b border-border/50 bg-surface-elevated/50">
                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
                  Project
                </th>
                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
                  Tech Stack
                </th>
                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider text-right">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border/50">
              {projects.map((project) => (
                <tr
                  key={project.id}
                  className="hover:bg-surface-elevated/30 transition-colors group"
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-4">
                      <div className="hidden sm:flex w-14 h-14 rounded-xl bg-primary/5 border border-primary/10 items-center justify-center shrink-0 overflow-hidden relative">
                        {project.imageUrl ? (
                          <img
                            src={project.imageUrl}
                            alt={project.title}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <FolderGit2 size={24} className="text-primary" />
                        )}
                        {project.featured && (
                          <div className="absolute top-0 right-0 p-1 bg-yellow-500 text-white rounded-bl-lg">
                            <Award size={10} />
                          </div>
                        )}
                      </div>
                      <div className="min-w-0">
                        <div className="text-sm font-semibold text-foreground line-clamp-1">
                          {project.title}
                        </div>
                        <div className="text-xs text-foreground-muted line-clamp-1 mt-1">
                          {project.description}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex flex-wrap gap-1.5 max-w-[200px]">
                      {project.techStack.map((tech) => (
                        <span
                          key={tech}
                          className="px-2 py-0.5 rounded-md bg-surface-elevated text-[10px] font-medium text-foreground-muted border border-border/50"
                        >
                          {tech}
                        </span>
                      ))}
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-2">
                      {project.liveUrl && (
                        <a
                          href={project.liveUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="p-1.5 text-foreground-muted hover:text-primary transition-colors"
                          title="View Live"
                        >
                          <ExternalLink size={14} />
                        </a>
                      )}
                      {project.githubUrl && (
                        <a
                          href={project.githubUrl}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="p-1.5 text-foreground-muted hover:text-primary transition-colors"
                          title="Github Source"
                        >
                          <Github size={14} />
                        </a>
                      )}
                      {!project.liveUrl && !project.githubUrl && (
                        <span className="text-xs text-foreground-muted">Private</span>
                      )}
                    </div>
                  </td>
                  <td className="px-6 py-5 text-right whitespace-nowrap">
                    <div className="flex items-center justify-end gap-2">
                       <Link
                        href={`/dashboard/projects/edit/${project.id}`}
                        className="p-2 text-foreground-muted hover:text-primary hover:bg-primary/10 rounded-lg transition-all"
                        title="Edit"
                      >
                        <Edit2 size={16} />
                      </Link>
                      <DeleteButton id={project.id} onDelete={deleteProject} />
                    </div>
                  </td>
                </tr>
              ))}

               {projects.length === 0 && (
                <tr>
                  <td colSpan={4} className="px-6 py-20 text-center">
                    <div className="flex flex-col items-center gap-3">
                      <AlertCircle size={40} className="text-foreground-muted opacity-20" />
                      <div>
                        <p className="text-foreground font-medium">No projects found</p>
                        <p className="text-sm text-foreground-muted">Start showcasing your masterpieces.</p>
                      </div>
                      <Link
                        href="/dashboard/projects/new"
                        className="mt-2 text-sm text-primary font-medium hover:underline"
                      >
                        Add your first project
                      </Link>
                    </div>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
