/**
 * EntryPreviewModal — full KnowledgeEntry detail view.
 *
 * Works with domain entity (KnowledgeEntry), not raw Qdrant payloads.
 *
 * (c) 2026 TWWIM UG. All rights reserved. (www.twwim.com)
 */

import { ExternalLink, Tag, DollarSign, Package, Clock } from 'lucide-react';
import { Modal } from '@/components/shared';
import { KnowledgeEntry, KnowledgeEntryType } from '@/domain/entities/KnowledgeEntry';

interface EntryPreviewModalProps {
  entry: KnowledgeEntry;
  onClose: () => void;
}

const TYPE_COLORS: Record<string, { bg: string; text: string }> = {
  PRODUCT: { bg: 'bg-blue-100', text: 'text-blue-800' },
  PAGE: { bg: 'bg-green-100', text: 'text-green-800' },
  DOCUMENT: { bg: 'bg-purple-100', text: 'text-purple-800' },
  FAQ: { bg: 'bg-amber-100', text: 'text-amber-800' },
  CUSTOM: { bg: 'bg-gray-100', text: 'text-gray-800' },
};

const SOURCE_COLORS: Record<string, { bg: string; text: string }> = {
  WORDPRESS: { bg: 'bg-indigo-100', text: 'text-indigo-800' },
  SHOPIFY: { bg: 'bg-green-100', text: 'text-green-800' },
  MANUAL: { bg: 'bg-gray-100', text: 'text-gray-700' },
  UPLOAD: { bg: 'bg-cyan-100', text: 'text-cyan-800' },
  SCOUT: { bg: 'bg-orange-100', text: 'text-orange-800' },
};

function Badge({ label, colors }: { label: string; colors: { bg: string; text: string } }) {
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${colors.bg} ${colors.text}`}>
      {label}
    </span>
  );
}

export function EntryPreviewModal({ entry, onClose }: EntryPreviewModalProps) {
  return (
    <Modal
      title={entry.title}
      subtitle={[entry.type, entry.source].filter(Boolean).join(' / ')}
      onClose={onClose}
      maxWidth="max-w-2xl"
      footer={
        <button
          onClick={onClose}
          className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
        >
          Close
        </button>
      }
    >
      <div className="space-y-4">
        {/* Badges */}
        <div className="flex flex-wrap gap-2">
          {entry.type && <Badge label={entry.type} colors={TYPE_COLORS[entry.type] || TYPE_COLORS.CUSTOM} />}
          {entry.source && <Badge label={entry.source} colors={SOURCE_COLORS[entry.source] || SOURCE_COLORS.MANUAL} />}
          {entry.status && (
            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700">
              <Clock size={10} />
              {entry.status}
            </span>
          )}
        </div>

        {/* Page metadata */}
        {entry.isPage && entry.sectionPath && (
          <div className="rounded-lg border border-gray-200 bg-gray-50 p-2.5">
            <div className="text-xs text-gray-500 mb-0.5">Section</div>
            <div className="text-sm text-gray-900">{entry.sectionPath}</div>
          </div>
        )}

        {/* Product metadata */}
        {entry.isProduct && (
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {entry.priceMin !== null && (
              <div className="rounded-lg border border-gray-200 bg-gray-50 p-2.5">
                <div className="flex items-center gap-1 text-xs text-gray-500 mb-0.5">
                  <DollarSign size={10} />
                  Price
                </div>
                <div className="text-sm font-semibold text-gray-900">{entry.priceFormatted}</div>
              </div>
            )}
            {entry.variantCount > 0 && (
              <div className="rounded-lg border border-gray-200 bg-gray-50 p-2.5">
                <div className="flex items-center gap-1 text-xs text-gray-500 mb-0.5">
                  <Package size={10} />
                  Variants
                </div>
                <div className="text-sm font-semibold text-gray-900">{entry.variantCount}</div>
              </div>
            )}
            {entry.categories.length > 0 && (
              <div className="rounded-lg border border-gray-200 bg-gray-50 p-2.5 col-span-2">
                <div className="flex items-center gap-1 text-xs text-gray-500 mb-0.5">
                  <Tag size={10} />
                  Categories
                </div>
                <div className="text-sm text-gray-900">{entry.categories.join(', ')}</div>
              </div>
            )}
          </div>
        )}

        {/* Image */}
        {entry.imageUrl && (
          <div className="rounded-lg border border-gray-200 overflow-hidden bg-gray-50">
            <img src={entry.imageUrl} alt={entry.title} className="max-h-48 w-auto mx-auto object-contain p-2" />
          </div>
        )}

        {/* URL */}
        {entry.url && (
          <a
            href={entry.url}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1.5 text-sm text-cyan-600 hover:text-cyan-800 hover:underline"
          >
            <ExternalLink size={14} />
            {entry.url}
          </a>
        )}

        {/* Full text */}
        {entry.text && (
          <div>
            <h4 className="text-xs font-medium text-gray-500 uppercase mb-1">Embedded content</h4>
            <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg text-sm whitespace-pre-wrap max-h-80 overflow-y-auto font-mono leading-relaxed">
              {entry.text}
            </pre>
          </div>
        )}

        {/* Point ID */}
        <div className="text-xs text-gray-400 pt-2 border-t border-gray-100">
          Qdrant ID: <code className="text-gray-500">{entry.id}</code>
        </div>
      </div>
    </Modal>
  );
}