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 '🤖';
    switch (category.toLowerCase()) {
      case 'reinigungsroboter':
        return '🧹';
      case 'serviceroboter':
        return '🛎️';
      case 'transportroboter':
        return '📦';
      case 'security roboter':
        return '🛡️';
      default:
        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">
              <div className="card-header">
                  <span className="category-icon">{getCategoryIcon(session.productCategory)}</span>
                  <h3 title={session.productName}>{session.productName || 'Unbenannt'}</h3>
              </div>
              <div className="thumbnail-placeholder">
                <span>🖼️</span>
                <p>Thumbnail</p>
              </div>
              <div className="card-content">
                <p className="product-description">{session.productDescription || 'Keine Beschreibung verfügbar.'}</p>
                <p className="source-url">
                    <a href={session.sourceUrl} target="_blank" rel="noopener noreferrer">
                        Quelle anzeigen
                    </a>
                </p>
                <p className="last-updated">Zuletzt bearbeitet: {new Date(session.updated_at).toLocaleString()}</p>
              </div>
              <div className="card-actions">
                <button onClick={() => onLoadSession(session.id)} className="load-btn">Laden</button>
                <button onClick={() => onDeleteSession(session.id)} className="delete-btn">Löschen</button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default SessionBrowser;