"use client";

import Link from "next/link";
import { clsx } from "clsx";
import { AlertTriangle, ArrowRight, Circle, FileText, Globe, Lock, Zap } from "lucide-react";
import type { Vault } from "@/lib/types";
import { encodeVaultSlug } from "@/lib/types";
import { HealthDots } from "./health-dots";

function VaultAvatar({ name }: { name: string }) {
  const initials = name
    .split(/[\s\-_]/)
    .map((w) => w[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  return (
    <div className="relative">
      <div className="w-12 h-12 rounded-xl bg-surface-elevated border border-border flex items-center justify-center text-sm font-semibold text-text-primary">
        {initials}
      </div>
    </div>
  );
}

export function VaultCard({ vault }: { vault: Vault }) {
  const hasAlerts = vault.fadingCount > 0;
  const alertText = `${vault.fadingCount} fading`;
  const slug = encodeVaultSlug(vault.owner, vault.name);

  return (
    <Link
      href={`/vaults/${slug}`}
      className="group block p-4 rounded-xl bg-surface border border-border-light hover:border-border hover:shadow-lg hover:shadow-black/20 transition-all duration-200"
    >
      <div className="flex items-start gap-3 mb-3">
        <VaultAvatar name={vault.name} />
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-1.5">
            <h3 className="text-sm font-semibold text-text-primary truncate">{vault.name}</h3>
            {vault.isPrivate ? (
              <Lock size={12} className="text-text-muted shrink-0" />
            ) : (
              <Globe size={12} className="text-accent shrink-0" />
            )}
          </div>
          <span className="text-xs text-text-secondary mt-0.5 block truncate">
            {vault.fullName}
          </span>
        </div>
      </div>

      <div className="flex items-center gap-3 text-xs text-text-secondary mb-2">
        <span className="flex items-center gap-1">
          <Circle size={10} className="text-memory" />
          {vault.memoryCount} memories
        </span>
        <span className="flex items-center gap-1">
          <FileText size={10} className="text-document" />
          {vault.documentCount} docs
        </span>
        <span className="flex items-center gap-1">
          <Zap size={10} className="text-skill" />
          {vault.skillCount} skills
        </span>
      </div>

      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <span className="text-[11px] text-text-muted">Health</span>
          <HealthDots health={vault.health} />
        </div>
      </div>

      {hasAlerts && (
        <div className="flex items-center gap-1.5 text-xs text-warning mt-1">
          <AlertTriangle size={12} />
          <span>{alertText}</span>
        </div>
      )}

      <div className="mt-3 flex items-center gap-1 text-xs font-medium text-accent opacity-0 group-hover:opacity-100 transition-opacity">
        <span>Open Vault</span>
        <ArrowRight size={12} />
      </div>
    </Link>
  );
}