/* eslint-disable @typescript-eslint/no-unnecessary-condition */
import React from "react";
import type { KnowledgeEntryWithTags } from "@mosaic/shared";
import { EntryStatus } from "@mosaic/shared";
import Link from "next/link";
import { FileText, Eye, Users, Lock } from "lucide-react";

interface EntryCardProps {
  entry: KnowledgeEntryWithTags;
}

const statusConfig = {
  [EntryStatus.DRAFT]: {
    label: "Draft",
    className: "bg-gray-100 text-gray-700",
    icon: "📝",
  },
  [EntryStatus.PUBLISHED]: {
    label: "Published",
    className: "bg-green-100 text-green-700",
    icon: "✅",
  },
  [EntryStatus.ARCHIVED]: {
    label: "Archived",
    className: "bg-amber-100 text-amber-700",
    icon: "📦",
  },
};

const visibilityIcons = {
  PRIVATE: <Lock className="w-3 h-3" />,
  WORKSPACE: <Users className="w-3 h-3" />,
  PUBLIC: <Eye className="w-3 h-3" />,
};

export const EntryCard = React.memo(function EntryCard({
  entry,
}: EntryCardProps): React.JSX.Element {
  const statusInfo = statusConfig[entry.status];
  const visibilityIcon = visibilityIcons[entry.visibility];

  return (
    <Link
      href={`/knowledge/${entry.slug}`}
      className="block bg-white p-5 rounded-lg shadow-sm border border-gray-200 hover:shadow-md hover:border-blue-300 transition-all"
    >
      <div className="flex items-start gap-4">
        <div className="flex-shrink-0 mt-1">
          <FileText className="w-5 h-5 text-gray-400" />
        </div>

        <div className="flex-1 min-w-0">
          {/* Title */}
          <h3 className="font-semibold text-gray-900 mb-2 text-lg hover:text-blue-600 transition-colors">
            {entry.title}
          </h3>

          {/* Summary */}
          {entry.summary && (
            <p className="text-sm text-gray-600 mb-3 line-clamp-2">{entry.summary}</p>
          )}

          {/* Tags */}
          {entry.tags && entry.tags.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mb-3">
              {entry.tags.map((tag: { id: string; name: string; color: string | null }) => (
                <span
                  key={tag.id}
                  className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
                  style={{
                    backgroundColor: tag.color ? `${tag.color}20` : "#E5E7EB",
                    color: tag.color ?? "#6B7280",
                  }}
                >
                  {tag.name}
                </span>
              ))}
            </div>
          )}

          {/* Metadata row */}
          <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500">
            {/* Status */}
            {statusInfo && (
              <span
                className={`inline-flex items-center gap-1 px-2 py-1 rounded-full ${statusInfo.className}`}
              >
                <span>{statusInfo.icon}</span>
                <span>{statusInfo.label}</span>
              </span>
            )}

            {/* Visibility */}
            <span className="inline-flex items-center gap-1">
              {visibilityIcon}
              <span className="capitalize">{entry.visibility.toLowerCase()}</span>
            </span>

            {/* Updated date */}
            <span>
              Updated{" "}
              {new Date(entry.updatedAt).toLocaleDateString("en-US", {
                month: "short",
                day: "numeric",
                year: "numeric",
              })}
            </span>
          </div>
        </div>
      </div>
    </Link>
  );
});