"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { ensureDefaultProject } from "@/lib/api";

/** Sidebar link to the project Files page. Resolves the default project on mount. */
export default function FilesNavLink() {
  const [projectId, setProjectId] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    ensureDefaultProject()
      .then((p) => {
        if (!cancelled) setProjectId(p.id);
      })
      .catch(() => {});
    return () => {
      cancelled = true;
    };
  }, []);

  if (!projectId) return null;

  return (
    <Link
      href={`/projects/${projectId}/files`}
      className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-foreground-dim hover:bg-muted hover:text-foreground transition-colors"
    >
      <svg
        className="w-4 h-4 shrink-0"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={1.5}
      >
        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
        <polyline points="14 2 14 8 20 8" />
      </svg>
      Files
    </Link>
  );
}