/**
 * Project Detail App - Detailed view of a single project
 */

import React, { useState, useEffect } from 'react';

interface DockItem {
  id: number;
  title: string;
  enabled: boolean;
}

export function ProjectDetail({ projectId }: { projectId?: number }) {
  const [project, setProject] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulated data fetch - in production, call basecamp_project_get
    setLoading(false);
    setProject({
      id: projectId || 1,
      name: 'Website Redesign',
      description: 'Complete redesign of company website for Q1 2024',
      status: 'active',
      dock: [
        { id: 1, title: 'Message Board', enabled: true },
        { id: 2, title: 'To-dos', enabled: true },
        { id: 3, title: 'Schedule', enabled: true },
        { id: 4, title: 'Campfire', enabled: true },
        { id: 5, title: 'Docs & Files', enabled: true },
      ],
    });
  }, [projectId]);

  if (loading) return <p>Loading project...</p>;
  if (!project) return <p>Project not found</p>;

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '28px', marginBottom: '10px' }}>{project.name}</h1>
      <p style={{ color: '#666', marginBottom: '20px' }}>{project.description}</p>
      
      <div style={{ marginBottom: '30px' }}>
        <span style={{ display: 'inline-block', padding: '4px 12px', background: '#28a745', color: 'white', borderRadius: '12px', fontSize: '12px' }}>
          {project.status}
        </span>
      </div>

      <h2 style={{ fontSize: '20px', marginBottom: '15px' }}>Project Tools</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '12px' }}>
        {project.dock.map((tool: DockItem) => (
          <div key={tool.id} style={{ 
            border: '1px solid #ddd', 
            borderRadius: '6px', 
            padding: '16px', 
            background: tool.enabled ? 'white' : '#f5f5f5',
            cursor: tool.enabled ? 'pointer' : 'not-allowed',
            opacity: tool.enabled ? 1 : 0.6
          }}>
            <h3 style={{ fontSize: '16px', margin: 0 }}>{tool.title}</h3>
          </div>
        ))}
      </div>
    </div>
  );
}