// src/components/MilestoneCopyWizard.js
import React, { useEffect, useState } from 'react';
import { Button } from './ui/button.js';
import authFetch from '../utils/authFetch.js';

export default function MilestoneCopyWizard({ milestone, onClose }) {
  const [scenarios, setScenarios] = useState([]);
  const [selectedScenarios, setSelectedScenarios] = useState([]);

  useEffect(() => {
    if (!milestone) return;
    // 1) load all scenarios
    async function loadAllScenarios() {
      try {
        const resp = await authFetch('/api/premium/career-profile/all');
        if (!resp.ok) {
          console.error('Failed to load all scenarios =>', resp.status);
          return;
        }
        const data = await resp.json();
        setScenarios(data.careerProfiles || []);
      } catch (err) {
        console.error('MilestoneCopyWizard => error loading scenarios:', err);
      }
    }
    loadAllScenarios();
  }, [milestone]);

  function toggleScenario(id) {
    setSelectedScenarios((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
    );
  }

  async function handleCopy() {
    if (!milestone || !selectedScenarios.length) {
      onClose(false);
      return;
    }
    try {
      // 2) call your copy endpoint
      const payload = {
        milestoneId: milestone.id,
        scenarioIds: selectedScenarios
      };
      const res = await authFetch('/api/premium/milestone/copy', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) {
        const txt = await res.text();
        alert(txt || 'Failed to copy milestone');
        onClose(false);
        return;
      }
      onClose(true); // success
    } catch (err) {
      console.error('Error copying milestone =>', err);
      alert('Error copying milestone');
      onClose(false);
    }
  }

  if (!milestone) return null;

  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        background: 'rgba(0,0,0,0.4)',
        zIndex: 99999,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <div
        style={{
          background: '#fff',
          width: '400px',
          padding: '1rem',
          borderRadius: '4px'
        }}
      >
        <h4>Copy Milestone:</h4>
        <p style={{ fontWeight: 'bold' }}>{milestone.title}</p>

        <div style={{ maxHeight: '250px', overflowY: 'auto', border: '1px solid #ccc', padding: '0.5rem' }}>
          {scenarios.length === 0 && <p>No scenarios found.</p>}
          {scenarios.map((s) => (
            <div key={s.id} style={{ marginBottom: '0.25rem' }}>
              <label>
                <input
                  type="checkbox"
                  checked={selectedScenarios.includes(s.id)}
                  onChange={() => toggleScenario(s.id)}
                />
                {s.scenario_title || s.career_name || '(Untitled)'}
              </label>
            </div>
          ))}
        </div>

        <div style={{ marginTop: '1rem', textAlign: 'right' }}>
          <Button onClick={() => onClose(false)} style={{ marginRight: '0.5rem' }}>
            Cancel
          </Button>
          <Button onClick={handleCopy}>Copy</Button>
        </div>
      </div>
    </div>
  );
}