'use client';

import { clsx } from 'clsx';
import { Folder, FileText, ArrowLeft, Plus, Upload } from 'lucide-react';
import type { Document, Folder as FolderType } from '@/lib/types';
import { Breadcrumb } from './breadcrumb';

function formatRelativeTime(dateStr: string): string {
  const now = Date.now();
  const then = new Date(dateStr).getTime();
  const diffMs = now - then;
  const diffMin = Math.floor(diffMs / 60000);
  if (diffMin < 1) return 'just now';
  if (diffMin < 60) return `${diffMin}m ago`;
  const diffHr = Math.floor(diffMin / 60);
  if (diffHr < 24) return `${diffHr}h ago`;
  const diffDays = Math.floor(diffHr / 24);
  if (diffDays === 1) return 'yesterday';
  if (diffDays < 30) return `${diffDays}d ago`;
  return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

interface FolderBrowserProps {
  currentPath: string;
  folders: FolderType[];
  documents: Document[];
  onNavigateFolder: (path: string) => void;
  onOpenDocument: (doc: Document) => void;
  onBack?: () => void;
  onNewDocument?: () => void;
  onUpload?: () => void;
  vaultSlug?: string;
}

export function FolderBrowser({
  currentPath,
  folders,
  documents,
  onNavigateFolder,
  onOpenDocument,
  onBack,
  onNewDocument,
  onUpload,
  vaultSlug,
}: FolderBrowserProps) {
  // Build breadcrumb from current path
  const pathParts = currentPath.split('/').filter(Boolean);
  const breadcrumbItems = [
    { label: 'Knowledge', href: vaultSlug ? `/vaults/${vaultSlug}/library` : undefined },
    ...pathParts.map((part, i) => ({
      label: part,
      href: vaultSlug
        ? `/vaults/${vaultSlug}/library/${pathParts.slice(0, i + 1).join('/')}`
        : undefined,
    })),
  ];

  return (
    <div>
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          {onBack && pathParts.length > 0 && (
            <button
              onClick={onBack}
              className="p-1.5 rounded-md hover:bg-surface-elevated text-text-muted hover:text-text-primary transition-colors"
              aria-label="Go back"
            >
              <ArrowLeft size={16} />
            </button>
          )}
          <Breadcrumb items={breadcrumbItems} />
        </div>
        <div className="flex items-center gap-2">
          {onNewDocument && (
            <button
              onClick={onNewDocument}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md bg-document text-white font-medium hover:opacity-90 transition-opacity"
            >
              <Plus size={14} />
              New Document
            </button>
          )}
          {onUpload && (
            <button
              onClick={onUpload}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md border border-border text-text-secondary hover:text-text-primary hover:bg-surface-elevated transition-colors"
            >
              <Upload size={14} />
              Upload
            </button>
          )}
        </div>
      </div>

      {/* Folder list */}
      {folders.length > 0 && (
        <div className="space-y-1 mb-4">
          {folders.map((folder) => (
            <div
              key={folder.path}
              className="flex items-center gap-3 p-3 rounded-lg border border-border bg-surface hover:bg-surface-elevated cursor-pointer transition-colors"
              onClick={() => onNavigateFolder(folder.path)}
            >
              <Folder size={18} className="text-document shrink-0" />
              <div className="flex-1 min-w-0">
                <span className="text-sm font-medium text-text-primary">{folder.name}</span>
                <span className="text-xs text-text-muted ml-2">
                  ({folder.documentCount})
                </span>
              </div>
              <span className="text-xs text-text-muted shrink-0">
                {formatRelativeTime(folder.lastModified)}
              </span>
            </div>
          ))}
        </div>
      )}

      {/* Document list */}
      {documents.length > 0 && (
        <div className="space-y-1">
          {documents.map((doc) => (
            <div
              key={doc.path}
              className="flex items-center gap-3 p-3 rounded-lg border border-border bg-surface hover:bg-surface-elevated cursor-pointer transition-colors"
              onClick={() => onOpenDocument(doc)}
            >
              <FileText size={18} className="text-document shrink-0" />
              <div className="flex-1 min-w-0">
                <span className="text-sm font-medium text-text-primary truncate block">
                  {doc.name}
                </span>
              </div>
              <div className="text-right shrink-0">
                <span className="text-xs text-text-muted">
                  {formatRelativeTime(doc.lastModified)}
                </span>
                <span className="text-xs text-text-muted block">
                  {doc.lastModifiedBy}
                </span>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Empty state */}
      {folders.length === 0 && documents.length === 0 && (
        <div className="text-center py-16">
          <div className="text-3xl text-text-muted mb-3">&#9633;</div>
          <p className="text-sm text-text-secondary mb-1">Your knowledge base is empty.</p>
          <p className="text-xs text-text-muted">
            Add documents to give your agent reference material.
          </p>
        </div>
      )}
    </div>
  );
}