import React from 'react';
import { Button } from './ui/button.js';

export default function MilestoneModal({
  show,
  onClose,
  milestones,
  editingMilestone,
  showForm,
  handleNewMilestone,
  handleEditMilestone,
  handleDeleteMilestone,
  handleAddTask,
  showTaskForm,
  editingTask,
  handleEditTask,
  deleteTask,
  saveTask,
  saveMilestone,
  copyWizardMilestone,
  setCopyWizardMilestone
}) {
  if (!show) return null; // if we don't want to render at all when hidden

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-start justify-center overflow-auto">
      <div className="bg-white p-4 m-4 max-w-4xl w-full relative">
        <h3 className="text-xl font-bold mb-4">Edit Milestones</h3>

        <Button onClick={handleNewMilestone}>+ New Milestone</Button>

        {/* 
          1) Render existing milestones 
        */}
        {milestones.map((m) => {
          const tasks = m.tasks || [];
          return (
            <div key={m.id} className="border p-2 my-2">
              <h5>{m.title}</h5>
              {m.description && <p>{m.description}</p>}
              <p>
                <strong>Date:</strong> {m.date} — 
                <strong>Progress:</strong> {m.progress}%
              </p>

              {/* tasks list */}
              {tasks.length > 0 && (
                <ul>
                  {tasks.map((t) => (
                    <li key={t.id}>
                      <strong>{t.title}</strong>
                      {t.description ? ` - ${t.description}` : ''}
                      {t.due_date ? ` (Due: ${t.due_date})` : ''}{' '}
                      <Button onClick={() => handleEditTask(m.id, t)}>Edit</Button>
                      <Button style={{ color: 'red' }} onClick={() => deleteTask(t.id)}>
                        Delete
                      </Button>
                    </li>
                  ))}
                </ul>
              )}

              <Button onClick={() => handleAddTask(m.id)}>+ Task</Button>
              <Button onClick={() => handleEditMilestone(m)}>Edit</Button>
              <Button
                onClick={() => setCopyWizardMilestone(m)}
                style={{ marginLeft: '0.5rem' }}
              >
                Copy
              </Button>
              <Button
                style={{ marginLeft: '0.5rem', background: 'red', color: 'black' }}
                onClick={() => handleDeleteMilestone(m)}
              >
                Delete
              </Button>

              {/* The "Add/Edit Task" form if showTaskForm === m.id */}
              {showTaskForm === m.id && (
                <div style={{ border: '1px solid #aaa', padding: '0.5rem', marginTop: '0.5rem' }}>
                  <h5>{editingTask.id ? 'Edit Task' : 'New Task'}</h5>
                  {/* same form logic... */}
                  <Button onClick={() => saveTask(m.id)}>
                    {editingTask.id ? 'Update' : 'Add'} Task
                  </Button>
                  <Button /* ... */>Cancel</Button>
                </div>
              )}
            </div>
          );
        })}

        {/* 
          2) The big milestone form if showForm is true 
        */}
        {showForm && (
          <div className="form border p-2 my-2">
            <h4>{editingMilestone ? 'Edit Milestone' : 'New Milestone'}</h4>
            {/* ... your milestone form code (title, date, impacts, etc.) */}
            <Button onClick={saveMilestone}>
              {editingMilestone ? 'Update' : 'Add'} Milestone
            </Button>
            <Button onClick={onClose}>Cancel</Button>
          </div>
        )}

        {/* Copy wizard if copyWizardMilestone */}
        {copyWizardMilestone && (
          <div> 
            {/* your copy wizard UI */}
          </div>
        )}

        <div className="text-right">
          <Button onClick={onClose}>Close</Button>
        </div>
      </div>
    </div>
  );
}