'use client';

import { useState, useMemo } from 'react';
import { clsx } from 'clsx';
import { FileText, Folder, Tag, AlertCircle, AlertTriangle } from 'lucide-react';
import type { Document, Folder as FolderType } from '@/lib/types';

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' });
}

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function fileTypeBadge(type: string): string {
  switch (type) {
    case 'markdown':
      return '.md';
    case 'pdf':
      return '.pdf';
    case 'image':
      return 'img';
    case 'text':
      return '.txt';
    default:
      return 'file';
  }
}

/** Parse YAML frontmatter from document content */
export interface ParsedFrontmatter {
  title?: string;
  description?: string;
  tags?: string[];
  type?: string;
}

export function parseFrontmatter(content: string): ParsedFrontmatter | null {
  if (!content || !content.startsWith('---')) return null;
  const endIdx = content.indexOf('---', 3);
  if (endIdx === -1) return null;
  const yamlBlock = content.slice(3, endIdx).trim();
  const result: ParsedFrontmatter = {};

  for (const line of yamlBlock.split('\n')) {
    const match = line.match(/^(\w+):\s*(.+)$/);
    if (!match) continue;
    const key = match[1];
    let value = match[2].trim();

    // Strip quotes
    if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
      value = value.slice(1, -1);
    }

    if (key === 'title') {
      result.title = value;
    } else if (key === 'description') {
      result.description = value;
    } else if (key === 'type') {
      result.type = value;
    } else if (key === 'tags') {
      // Parse array syntax: [tag1, tag2] or ["tag1", "tag2"]
      const arrayMatch = value.match(/^\[(.*)\]$/);
      if (arrayMatch) {
        result.tags = arrayMatch[1]
          .split(',')
          .map(t => t.trim().replace(/^["']|["']$/g, ''))
          .filter(Boolean);
      }
    }
  }

  return Object.keys(result).length > 0 ? result : null;
}

interface DocumentCardProps {
  document: Document;
  onClick: (doc: Document) => void;
  staleness?: { isStale: boolean; reasons: string[]; summary: string } | null;
}

export function DocumentCard({ document: doc, onClick, staleness }: DocumentCardProps) {
  const [hovered, setHovered] = useState(false);

  const frontmatter = useMemo(() => parseFrontmatter(doc.content), [doc.content]);
  const displayTitle = frontmatter?.title || doc.name;
  const hasMetadata = frontmatter !== null;

  // Build breadcrumb-style folder path
  const folderParts = doc.folder ? doc.folder.split('/').filter(Boolean) : [];

  return (
    <div
      className={clsx(
        'p-3 rounded-lg border border-border cursor-pointer transition-all duration-150',
        hovered ? 'bg-surface-elevated shadow-md border-l-2 border-l-document' : 'bg-surface border-l-2 border-l-document'
      )}
      onClick={() => onClick(doc)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div className="flex items-start gap-3">
        {/* File icon */}
        <div className="w-9 h-9 rounded-lg bg-surface-elevated flex items-center justify-center shrink-0">
          <FileText size={18} className="text-document" />
        </div>

        {/* Info */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="text-sm font-medium text-text-primary truncate">{displayTitle}</h3>
            <span className="text-[10px] text-text-muted bg-surface-elevated px-1.5 py-0.5 rounded border border-border font-mono shrink-0">
              {fileTypeBadge(doc.type)}
            </span>
            {frontmatter?.type && (
              <span className={clsx(
                'text-[10px] px-1.5 py-0.5 rounded font-medium shrink-0',
                frontmatter.type === 'skill'
                  ? 'bg-skill/10 text-skill'
                  : 'bg-document/10 text-document'
              )}>
                {frontmatter.type}
              </span>
            )}
          </div>

          {/* Staleness badge */}
          {staleness?.isStale && (
            <div className="flex items-center gap-1 mt-1" title={staleness.reasons.join('; ')}>
              <AlertTriangle size={12} className="text-amber-500 shrink-0" />
              <span className="text-[10px] text-amber-600 font-medium">May need review</span>
            </div>
          )}

          {/* Description from frontmatter */}
          {frontmatter?.description && (
            <p className="text-xs text-text-secondary mt-1 line-clamp-1">{frontmatter.description}</p>
          )}

          {/* Tags */}
          {frontmatter?.tags && frontmatter.tags.length > 0 && (
            <div className="flex items-center gap-1 mt-1.5 flex-wrap">
              <Tag size={10} className="text-text-muted shrink-0" />
              {frontmatter.tags.slice(0, 5).map((tag) => (
                <span
                  key={tag}
                  className="text-[10px] px-1.5 py-0.5 rounded bg-surface-elevated text-text-muted border border-border-light"
                >
                  {tag}
                </span>
              ))}
            </div>
          )}

          {/* Folder path */}
          {folderParts.length > 0 && !frontmatter?.description && (
            <p className="text-xs text-text-muted mt-0.5 truncate">
              {folderParts.join(' / ')}
            </p>
          )}

          {/* No metadata indicator */}
          {!hasMetadata && (
            <div className="flex items-center gap-1 mt-1">
              <AlertCircle size={10} className="text-text-muted" />
              <span className="text-[10px] text-text-muted">No metadata</span>
            </div>
          )}
        </div>

        {/* Meta */}
        <div className="text-right shrink-0">
          <p className="text-xs text-text-secondary">
            {formatRelativeTime(doc.lastModified)}
          </p>
          <p className="text-[11px] text-text-muted mt-0.5">
            {doc.lastModifiedBy} &middot; {formatSize(doc.size)}
          </p>
        </div>
      </div>
    </div>
  );
}

interface FolderCardProps {
  folder: FolderType;
  onClick: (folder: FolderType) => void;
}

export function FolderCard({ folder, onClick }: FolderCardProps) {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      className={clsx(
        'flex items-center gap-3 p-3 rounded-lg border border-border cursor-pointer transition-all duration-150',
        hovered ? 'bg-surface-elevated shadow-md' : 'bg-surface'
      )}
      onClick={() => onClick(folder)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div className="w-9 h-9 rounded-lg bg-surface-elevated flex items-center justify-center shrink-0">
        <Folder size={18} className="text-document" />
      </div>
      <div className="flex-1 min-w-0">
        <h3 className="text-sm font-medium text-text-primary truncate">{folder.name}</h3>
        <p className="text-xs text-text-muted mt-0.5">
          {folder.documentCount} document{folder.documentCount !== 1 ? 's' : ''}
        </p>
      </div>
      <span className="text-xs text-text-muted shrink-0">
        {formatRelativeTime(folder.lastModified)}
      </span>
    </div>
  );
}