import React from 'react';
import { Download, ExternalLink, FileText, Globe, Sparkles } from 'lucide-react';
import type { Asset } from '../../../types/assets';

interface AssetTableViewProps {
  assets: Asset[];
  selectedIds: string[];
  recommendedIds?: string[];
  onToggleSelect: (id: string, event: React.MouseEvent) => void;
  onSelectAll: () => void;
  onOpenAsset: (asset: Asset) => void;
  onRequestDownload: (id: string) => void;
  userRole?: string;
}

export const AssetTableView: React.FC<AssetTableViewProps> = ({
  assets,
  selectedIds,
  recommendedIds = [],
  onToggleSelect,
  onSelectAll,
  onOpenAsset,
  onRequestDownload,
}) => {
  const allSelected = assets.length > 0 && selectedIds.length === assets.length;

  return (
    <div className="w-full bg-white dark:bg-slate-900/90 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden transition-all">
      <div className="overflow-x-auto custom-scrollbar">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="bg-slate-50 dark:bg-slate-800/80 border-b border-slate-200 dark:border-slate-800 text-[11px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">
              <th className="py-3 px-4 w-10">
                <input
                  type="checkbox"
                  checked={allSelected}
                  onChange={onSelectAll}
                  className="rounded border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 focus:ring-slate-400 cursor-pointer"
                />
              </th>
              <th className="py-3 px-4 min-w-[280px]">Asset Name & Domain</th>
              <th className="py-3 px-4 min-w-[140px]">Vertical / Industry</th>
              <th className="py-3 px-4 min-w-[130px]">Type / Format</th>
              <th className="py-3 px-4 min-w-[120px]">Subcategory</th>
              <th className="py-3 px-4 min-w-[120px]">Created</th>
              <th className="py-3 px-4 text-right min-w-[110px]">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100 dark:divide-slate-800/60 text-xs">
            {assets.map((asset) => {
              const isSelected = selectedIds.includes(asset.id);
              const isRecommended = recommendedIds.includes(asset.id);
              const primaryVertical = asset.verticals && asset.verticals.length > 0 ? asset.verticals[0] : null;

              return (
                <tr
                  key={asset.id}
                  onClick={(e) => onToggleSelect(asset.id, e)}
                  className={`group hover:bg-slate-100/70 dark:hover:bg-slate-800/60 transition-colors cursor-pointer ${
                    isSelected
                      ? 'bg-slate-100 dark:bg-slate-800/80 font-medium'
                      : isRecommended
                        ? 'bg-amber-500/[0.03] dark:bg-amber-500/[0.04]'
                        : ''
                  }`}
                >
                  {/* Selection Checkbox */}
                  <td className="py-3 px-4" onClick={(e) => e.stopPropagation()}>
                    <input
                      type="checkbox"
                      checked={isSelected}
                      onChange={(e) => onToggleSelect(asset.id, e as any)}
                      className="rounded border-slate-300 dark:border-slate-600 text-slate-900 focus:ring-slate-400 cursor-pointer"
                    />
                  </td>

                  {/* Title & Description & Recommended Badge */}
                  <td className="py-3 px-4 min-w-[280px]">
                    <div className="flex items-start gap-2.5">
                      <div className="p-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 shrink-0 mt-0.5">
                        {asset.type === 'url' || asset.type === 'case_study' ? (
                          <Globe className="w-4 h-4 text-slate-500 dark:text-slate-400" />
                        ) : (
                          <FileText className="w-4 h-4 text-amber-500" />
                        )}
                      </div>
                      <div className="min-w-0">
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className="font-bold text-slate-900 dark:text-slate-100 group-hover:text-slate-900 dark:group-hover:text-white transition-colors truncate">
                            {asset.title}
                          </span>
                          {isRecommended && (
                            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-500 text-slate-950 text-[9px] font-extrabold uppercase tracking-wider shrink-0">
                              <Sparkles className="w-2.5 h-2.5 fill-slate-950" />
                              <span>Recommended</span>
                            </span>
                          )}
                        </div>
                        {asset.description && (
                          <div className="text-[11px] text-slate-500 dark:text-slate-400 line-clamp-1 mt-0.5">
                            {asset.description}
                          </div>
                        )}
                        {asset.tags && asset.tags.length > 0 && (
                          <div className="flex flex-wrap gap-1 mt-1">
                            {asset.tags.slice(0, 3).map(t => (
                              <span key={t} className="text-[9px] font-mono px-1.5 py-0.2 rounded bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400">
                                #{t}
                              </span>
                            ))}
                            {asset.tags.length > 3 && (
                              <span className="text-[9px] text-slate-400">+{asset.tags.length - 3}</span>
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  </td>

                  {/* Vertical */}
                  <td className="py-3 px-4">
                    {primaryVertical ? (
                      <span
                        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold border"
                        style={{
                          backgroundColor: `${primaryVertical.color}15`,
                          borderColor: `${primaryVertical.color}40`,
                          color: primaryVertical.color || '#94a3b8',
                        }}
                      >
                        <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: primaryVertical.color || '#94a3b8' }} />
                        {primaryVertical.name}
                      </span>
                    ) : (
                      <span className="text-slate-400 italic text-[11px]">General</span>
                    )}
                  </td>

                  {/* Type */}
                  <td className="py-3 px-4">
                    <span className="inline-block px-2 py-0.5 rounded text-[11px] font-semibold bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 capitalize">
                      {asset.contentType ? asset.contentType.replace('_', ' ') : asset.type}
                    </span>
                  </td>

                  {/* Subcategory */}
                  <td className="py-3 px-4 text-slate-700 dark:text-slate-300 font-semibold">
                    {asset.subcategory || asset.categoryId || '—'}
                  </td>

                  {/* Created Date */}
                  <td className="py-3 px-4 text-slate-500 text-[11px]">
                    {new Date(asset.createdAt).toLocaleDateString(undefined, {
                      year: 'numeric',
                      month: 'short',
                      day: 'numeric',
                    })}
                  </td>

                  {/* Actions */}
                  <td className="py-3 px-4 text-right" onClick={(e) => e.stopPropagation()}>
                    <div className="flex items-center justify-end gap-1.5">
                      <button
                        onClick={() => onOpenAsset(asset)}
                        className="p-1.5 rounded-lg text-slate-500 hover:text-slate-900 dark:hover:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                        title="View Asset"
                      >
                        <ExternalLink className="w-4 h-4" />
                      </button>
                      {asset.isDownloadable && (
                        <button
                          onClick={() => onRequestDownload(asset.id)}
                          className="p-1.5 rounded-lg text-slate-500 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
                          title="Download Asset"
                        >
                          <Download className="w-4 h-4" />
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};
