"use client";

import { use } from "react";
import Link from "next/link";
import { useVaults } from "@/lib/use-data";
import { decodeVaultSlug } from "@/lib/types";
import { Breadcrumb } from "@/components/breadcrumb";

/* ------------------------------------------------------------------ */
/*  Page                                                               */
/* ------------------------------------------------------------------ */

export default function VaultSettingsPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = use(params);
  const { owner, repo } = decodeVaultSlug(slug);
  const vaultFullName = `${owner}/${repo}`;
  const { vaults, loading: vaultsLoading } = useVaults();
  const vault = vaults.find((v) => v.fullName === vaultFullName);

  if (vaultsLoading) {
    return (
      <div className="p-8">
        <Breadcrumb items={[{ label: "Vaults", href: "/vaults" }, { label: "Loading..." }]} />
        <div className="flex flex-col items-center justify-center py-20 text-center">
          <p className="text-text-secondary">Loading vault settings...</p>
        </div>
      </div>
    );
  }

  if (!vault) {
    return (
      <div className="p-8">
        <Breadcrumb
          items={[
            { label: "Vaults", href: "/vaults" },
            { label: "Not Found" },
          ]}
        />
        <div className="flex flex-col items-center justify-center py-20 text-center">
          <p className="text-text-secondary mb-4">
            Vault &ldquo;{vaultFullName}&rdquo; not found.
          </p>
          <Link
            href="/vaults"
            className="text-sm text-accent hover:text-accent-hover transition-colors"
          >
            Back to vaults
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="p-8 max-w-[800px]">
      <Breadcrumb
        items={[
          { label: "Vaults", href: "/vaults" },
          { label: vault.name, href: `/vaults/${slug}` },
          { label: "Settings" },
        ]}
      />

      <h1 className="text-2xl font-semibold text-text-primary mb-6">
        {vault.name} Settings
      </h1>

      <div className="rounded-xl bg-surface border border-border-light p-6">
        <p className="text-sm text-text-secondary">
          Vault settings coming soon.
        </p>
      </div>
    </div>
  );
}