web-cad/frontend/src/pages/Dashboard.tsx

/**
 * Dashboard Page – Project overview after login
 */
import { useState, useEffect, useCallback } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { NotificationPanel } from '../components/NotificationPanel';
import { ShareDialog } from '../components/ShareDialog';

const API_BASE = import.meta.env.VITE_API_BASE || '';

interface Project {
  id: string;
  name: string;
  description: string | null;
  created_at: string;
  updated_at: string;
}

interface DashboardProps {
  onOpenProject: (projectId: string) => void;
}

export function Dashboard({ onOpenProject }: DashboardProps) {
  const { user, logout, token } = useAuth();
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [showCreate, setShowCreate] = useState(false);
  const [newName, setNewName] = useState('');
  const [newDesc, setNewDesc] = useState('');
  const [shareProjectId, setShareProjectId] = useState<string | null>(null);

  const fetchProjects = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch(`${API_BASE}/api/projects`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (res.ok) {
        setProjects(await res.json());
      }
    } catch {
      // ignore
    } finally {
      setLoading(false);
    }
  }, [token]);

  useEffect(() => {
    fetchProjects();
  }, [fetchProjects]);

  const handleCreate = async () => {
    if (!newName.trim()) return;
    try {
      const res = await fetch(`${API_BASE}/api/projects`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
        body: JSON.stringify({ name: newName, description: newDesc || null }),
      });
      if (res.ok) {
        setNewName('');
        setNewDesc('');
        setShowCreate(false);
        fetchProjects();
      }
    } catch {
      // ignore
    }
  };

  const handleDelete = async (id: string, e: React.MouseEvent) => {
    e.stopPropagation();
    if (!confirm('Projekt wirklich löschen?')) return;
    try {
      await fetch(`${API_BASE}/api/projects/${id}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` },
      });
      fetchProjects();
    } catch {
      // ignore
    }
  };

  return (
    <div className="dashboard-page">
      <header className="dashboard-header">
        <div className="dashboard-brand">
          <h1>Web CAD</h1>
          <span className="dashboard-user">{user?.name} ({user?.role})</span>
        </div>
        <div className="dashboard-header-actions">
          {token && <NotificationPanel token={token} />}
          <button className="dashboard-logout" onClick={logout}>Abmelden</button>
        </div>
      </header>

      <div className="dashboard-content">
        <div className="dashboard-section-header">
          <h2>Projekte</h2>
          <button className="dashboard-create-btn" onClick={() => setShowCreate(!showCreate)}>
            + Neues Projekt
          </button>
        </div>

        {showCreate && (
          <div className="dashboard-create-form">
            <input
              type="text"
              placeholder="Projektname"
              value={newName}
              onChange={e => setNewName(e.target.value)}
              autoFocus
            />
            <input
              type="text"
              placeholder="Beschreibung (optional)"
              value={newDesc}
              onChange={e => setNewDesc(e.target.value)}
            />
            <button onClick={handleCreate}>Erstellen</button>
            <button onClick={() => setShowCreate(false)}>Abbrechen</button>
          </div>
        )}

        {loading ? (
          <p className="dashboard-loading">Lade Projekte…</p>
        ) : projects.length === 0 ? (
          <p className="dashboard-empty">Noch keine Projekte. Erstellen Sie ein neues Projekt.</p>
        ) : (
          <div className="dashboard-project-grid">
            {projects.map(project => (
              <div
                key={project.id}
                className="dashboard-project-card"
                onClick={() => onOpenProject(project.id)}
              >
                <h3>{project.name}</h3>
                {project.description && <p>{project.description}</p>}
                <div className="dashboard-project-meta">
                  <span>Erstellt: {new Date(project.created_at).toLocaleDateString('de-DE')}</span>
                  <div className="dashboard-project-actions">
                    <button
                      className="dashboard-share-btn"
                      onClick={(e) => { e.stopPropagation(); setShareProjectId(project.id); }}
                    >
                      Teilen
                    </button>
                    <button
                      className="dashboard-delete-btn"
                      onClick={(e) => handleDelete(project.id, e)}
                    >
                      Löschen
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {token && (
        <ShareDialog
          token={token}
          projectId={shareProjectId ?? ''}
          open={!!shareProjectId}
          onClose={() => setShareProjectId(null)}
        />
      )}
    </div>
  );
}