import React from 'react';
import { ProjectHistoryItem } from './types';
import './SessionBrowser.css';
import { Plus, FileText } from 'lucide-react';

interface SessionBrowserProps {
  sessions: ProjectHistoryItem[];
  onLoadSession: (projectId: string) => void;
  onDeleteSession: (projectId: string) => void;
  onStartNew: () => void;
}

const SessionBrowser: React.FC<SessionBrowserProps> = ({ sessions, onLoadSession, onDeleteSession, onStartNew }) => {
  
  const getCategoryIcon = (category: string) => {
    // Return an icon based on the category, default to a generic robot
    if (!category) return '🤖';
    const cat = category.toLowerCase();
    
    if (cat.includes('reinigung') || cat.includes('cleaning')) return '🧹';
    if (cat.includes('service') || cat.includes('kellner')) return '🛎️';
    if (cat.includes('transport') || cat.includes('logistik') || cat.includes('logistics')) return '📦';
    if (cat.includes('security') || cat.includes('sicherheit') || cat.includes('wach')) return '🛡️';
    if (cat.includes('inspektion') || cat.includes('inspection')) return '🔍';
    if (cat.includes('humanoid')) return '🦾';
    if (cat.includes('drohne') || cat.includes('drone')) return '🚁';
    if (cat.includes('rasen') || cat.includes('mower')) return '🌱';
    
    return '🤖';
  };

  return (
    <div className="session-browser">
      <div className="browser-header">
        <h2 className="flex items-center gap-2"><FileText size={28}/> Gespeicherte Sitzungen</h2>
        <button onClick={onStartNew} className="start-new-btn">
          <Plus size={16}/> Neue Analyse starten
        </button>
      </div>

      {(!sessions || sessions.length === 0) ? (
        <div className="empty-state">
            <p>Keine gespeicherten Sitzungen gefunden.</p>
            <button onClick={onStartNew} className="start-new-btn-secondary">
                Jetzt eine neue Analyse starten
            </button>
        </div>
      ) : (
        <div className="session-grid">
          {sessions.map((session) => (
            <div key={session.id} className="session-card group">
              {/* Left Column: Icon & Title */}
              <div className="card-header">
                  <div className="category-badge" title={session.productCategory}>
                    {getCategoryIcon(session.productCategory)}
                  </div>
                  <div className="card-title-container">
                    <h3 className="card-title" title={session.productName}>{session.productName || 'Unbenanntes Projekt'}</h3>
                    <div className="card-date">
                         <span className="text-xs text-slate-400">Updated:</span>
                         {new Date(session.updated_at).toLocaleDateString()}
                    </div>
                  </div>
              </div>
              
              {/* Middle Column: Description & Meta */}
              <div className="card-content">
                <p className="product-description">
                  {session.productDescription && session.productDescription !== "No description available." 
                    ? session.productDescription 
                    : <span className="italic text-slate-400">Keine Beschreibung verfügbar.</span>}
                </p>
                
                <div className="card-meta">
                   {session.sourceUrl && session.sourceUrl !== "No source URL found." && (
                      <a href={session.sourceUrl} target="_blank" rel="noopener noreferrer" className="source-link">
                         🔗 Link zur Quelle
                      </a>
                   )}
                   <span className="text-slate-400">•</span>
                   <span className="text-slate-500">{session.productCategory || 'Unkategorisiert'}</span>
                </div>
              </div>

              {/* Right Column: Actions */}
              <div className="card-actions">
                <button onClick={() => onLoadSession(session.id)} className="load-btn">
                    Öffnen
                </button>
                <button onClick={() => onDeleteSession(session.id)} className="delete-btn" title="Löschen">
                   Löschen
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default SessionBrowser;