// src/components/MilestoneTimeline.js
import React, { useEffect, useState, useCallback } from 'react';

const today = new Date();

export default function MilestoneTimeline({
  careerPathId,
  authFetch,
  activeView,
  setActiveView,
  onMilestoneUpdated
}) {
  const [milestones, setMilestones] = useState({ Career: [], Financial: [] });

  // "new or edit" milestone form data
  const [newMilestone, setNewMilestone] = useState({
    title: '',
    description: '',
    date: '',
    progress: 0,
    newSalary: '',
    impacts: [],
    isUniversal: 0
  });
  const [impactsToDelete, setImpactsToDelete] = useState([]);

  const [showForm, setShowForm] = useState(false);
  const [editingMilestone, setEditingMilestone] = useState(null);

  // For tasks
  const [showTaskForm, setShowTaskForm] = useState(null);
  const [newTask, setNewTask] = useState({ title: '', description: '', due_date: '' });

  // The copy wizard
  const [scenarios, setScenarios] = useState([]);
  const [copyWizardMilestone, setCopyWizardMilestone] = useState(null);

  // ------------------------------------------------------------------
  // 1) HELPER FUNCTIONS (defined above usage)
  // ------------------------------------------------------------------

  // Insert a new blank impact
  function addNewImpact() {
    setNewMilestone((prev) => ({
      ...prev,
      impacts: [
        ...prev.impacts,
        {
          impact_type: 'ONE_TIME',
          direction: 'subtract',
          amount: 0,
          start_date: '',
          end_date: ''
        }
      ]
    }));
  }

  // Remove an impact from newMilestone.impacts
  function removeImpact(idx) {
    setNewMilestone((prev) => {
      const newImpacts = [...prev.impacts];
      const removed = newImpacts[idx];
      if (removed && removed.id) {
        // queue for DB DELETE
        setImpactsToDelete((old) => [...old, removed.id]);
      }
      newImpacts.splice(idx, 1);
      return { ...prev, impacts: newImpacts };
    });
  }

  // Update a specific impact property
  function updateImpact(idx, field, value) {
    setNewMilestone((prev) => {
      const newImpacts = [...prev.impacts];
      newImpacts[idx] = { ...newImpacts[idx], [field]: value };
      return { ...prev, impacts: newImpacts };
    });
  }

  // ------------------------------------------------------------------
  // 2) fetchMilestones => local state
  // ------------------------------------------------------------------
  const fetchMilestones = useCallback(async () => {
    if (!careerPathId) return;
    try {
      const res = await authFetch(`/api/premium/milestones?careerPathId=${careerPathId}`);
      if (!res.ok) {
        console.error('Failed to fetch milestones. Status:', res.status);
        return;
      }
      const data = await res.json();
      if (!data.milestones) {
        console.warn('No milestones field in response:', data);
        return;
      }

      const categorized = { Career: [], Financial: [] };
      data.milestones.forEach((m) => {
        if (categorized[m.milestone_type]) {
          categorized[m.milestone_type].push(m);
        } else {
          console.warn(`Unknown milestone type: ${m.milestone_type}`);
        }
      });

      setMilestones(categorized);
    } catch (err) {
      console.error('Failed to fetch milestones:', err);
    }
  }, [careerPathId, authFetch]);

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

  // ------------------------------------------------------------------
  // 3) Load scenarios for copy wizard
  // ------------------------------------------------------------------
  useEffect(() => {
    async function loadScenarios() {
      try {
        const res = await authFetch('/api/premium/career-profile/all');
        if (res.ok) {
          const data = await res.json();
          setScenarios(data.careerPaths || []);
        }
      } catch (err) {
        console.error('Error loading scenarios for copy wizard:', err);
      }
    }
    loadScenarios();
  }, [authFetch]);

  // ------------------------------------------------------------------
  // 4) Edit Milestone => fetch impacts
  // ------------------------------------------------------------------
  async function handleEditMilestone(m) {
    try {
      setImpactsToDelete([]);

      const res = await authFetch(`/api/premium/milestone-impacts?milestone_id=${m.id}`);
      if (!res.ok) {
        console.error('Failed to fetch milestone impacts. Status:', res.status);
        return;
      }
      const data = await res.json();
      const fetchedImpacts = data.impacts || [];

      setNewMilestone({
        title: m.title || '',
        description: m.description || '',
        date: m.date || '',
        progress: m.progress || 0,
        newSalary: m.new_salary || '',
        impacts: fetchedImpacts.map((imp) => ({
          id: imp.id,
          impact_type: imp.impact_type || 'ONE_TIME',
          direction: imp.direction || 'subtract',
          amount: imp.amount || 0,
          start_date: imp.start_date || '',
          end_date: imp.end_date || ''
        })),
        isUniversal: m.is_universal ? 1 : 0
      });

      setEditingMilestone(m);
      setShowForm(true);
    } catch (err) {
      console.error('Error in handleEditMilestone:', err);
    }
  }

  // ------------------------------------------------------------------
  // 5) Save (create/update) => handle impacts
  // ------------------------------------------------------------------
  async function saveMilestone() {
    if (!activeView) return;

    const url = editingMilestone
      ? `/api/premium/milestones/${editingMilestone.id}`
      : `/api/premium/milestone`;
    const method = editingMilestone ? 'PUT' : 'POST';

    const payload = {
      milestone_type: activeView,
      title: newMilestone.title,
      description: newMilestone.description,
      date: newMilestone.date,
      career_path_id: careerPathId,
      progress: newMilestone.progress,
      status: newMilestone.progress >= 100 ? 'completed' : 'planned',
      new_salary:
        activeView === 'Financial' && newMilestone.newSalary
          ? parseFloat(newMilestone.newSalary)
          : null,
      is_universal: newMilestone.isUniversal || 0
    };

    try {
      const res = await authFetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) {
        const errData = await res.json();
        console.error('Failed to save milestone:', errData);
        alert(errData.error || 'Error saving milestone');
        return;
      }

      const savedMilestone = await res.json();
      console.log('Milestone saved/updated:', savedMilestone);

      if (activeView === 'Financial') {
        // 1) Delete old impacts
        for (const impactId of impactsToDelete) {
          if (impactId) {
            const delRes = await authFetch(`/api/premium/milestone-impacts/${impactId}`, {
              method: 'DELETE'
            });
            if (!delRes.ok) {
              console.error('Failed deleting old impact', impactId, await delRes.text());
            }
          }
        }
        // 2) Insert/Update new impacts
        for (let i = 0; i < newMilestone.impacts.length; i++) {
          const imp = newMilestone.impacts[i];
          if (imp.id) {
            // existing => PUT
            const putPayload = {
              milestone_id: savedMilestone.id,
              impact_type: imp.impact_type,
              direction: imp.direction,
              amount: parseFloat(imp.amount) || 0,
              start_date: imp.start_date || null,
              end_date: imp.end_date || null
            };
            const impRes = await authFetch(`/api/premium/milestone-impacts/${imp.id}`, {
              method: 'PUT',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(putPayload)
            });
            if (!impRes.ok) {
              const errImp = await impRes.json();
              console.error('Failed updating impact:', errImp);
            }
          } else {
            // new => POST
            const postPayload = {
              milestone_id: savedMilestone.id,
              impact_type: imp.impact_type,
              direction: imp.direction,
              amount: parseFloat(imp.amount) || 0,
              start_date: imp.start_date || null,
              end_date: imp.end_date || null
            };
            const impRes = await authFetch('/api/premium/milestone-impacts', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(postPayload)
            });
            if (!impRes.ok) {
              console.error('Failed creating new impact:', await impRes.text());
            }
          }
        }
      }

      // Optionally re-fetch or update local
      await fetchMilestones();

      // reset form
      setShowForm(false);
      setEditingMilestone(null);
      setNewMilestone({
        title: '',
        description: '',
        date: '',
        progress: 0,
        newSalary: '',
        impacts: [],
        isUniversal: 0
      });
      setImpactsToDelete([]);

      if (onMilestoneUpdated) {
        onMilestoneUpdated();
      }
    } catch (err) {
      console.error('Error saving milestone:', err);
    }
  }

  // ------------------------------------------------------------------
  // 6) Add Task
  // ------------------------------------------------------------------
  async function addTask(milestoneId) {
    try {
      const taskPayload = {
        milestone_id: milestoneId,
        title: newTask.title,
        description: newTask.description,
        due_date: newTask.due_date
      };
      console.log('Creating new task:', taskPayload);

      const res = await authFetch('/api/premium/tasks', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(taskPayload)
      });
      if (!res.ok) {
        const errorData = await res.json();
        console.error('Failed to create task:', errorData);
        alert(errorData.error || 'Error creating task');
        return;
      }
      const createdTask = await res.json();
      console.log('Task created:', createdTask);

      // Re-fetch so the timeline shows the new task
      await fetchMilestones();

      setNewTask({ title: '', description: '', due_date: '' });
      setShowTaskForm(null);
    } catch (err) {
      console.error('Error adding task:', err);
    }
  }

  // ------------------------------------------------------------------
  // 7) Copy Wizard => now with brute force refresh
  // ------------------------------------------------------------------
  function CopyMilestoneWizard({ milestone, scenarios, onClose, authFetch }) {
    const [selectedScenarios, setSelectedScenarios] = useState([]);

    if (!milestone) return null;

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

    async function handleCopy() {
      try {
        const res = await authFetch('/api/premium/milestone/copy', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            milestoneId: milestone.id,
            scenarioIds: selectedScenarios
          })
        });
        if (!res.ok) throw new Error('Failed to copy milestone');

        // Brute force page refresh
        window.location.reload();

        onClose();
      } catch (err) {
        console.error('Error copying milestone:', err);
      }
    }

    return (
      <div className="modal-backdrop">
        <div className="modal-container">
          <h3>Copy Milestone to Other Scenarios</h3>
          <p>Milestone: <strong>{milestone.title}</strong></p>

          {scenarios.map((s) => (
            <div key={s.id}>
              <label>
                <input
                  type="checkbox"
                  checked={selectedScenarios.includes(s.id)}
                  onChange={() => toggleScenario(s.id)}
                />
                {s.career_name}
              </label>
            </div>
          ))}

          <div style={{ marginTop: '1rem' }}>
            <button onClick={onClose} style={{ marginRight: '0.5rem' }}>Cancel</button>
            <button onClick={handleCopy}>Copy</button>
          </div>
        </div>
      </div>
    );
  }

  // ------------------------------------------------------------------
  // 8) handleDelete => also brute force refresh
  // ------------------------------------------------------------------
  async function handleDeleteMilestone(m) {
    if (m.is_universal === 1) {
      const userChoice = window.confirm(
        'This milestone is universal. OK => remove from ALL scenarios, Cancel => remove only from this scenario.'
      );
      if (userChoice) {
        // delete from all
        try {
          const delAll = await authFetch(`/api/premium/milestones/${m.id}/all`, {
            method: 'DELETE'
          });
          if (!delAll.ok) {
            console.error('Failed removing universal from all. Status:', delAll.status);
            return;
          }
        } catch (err) {
          console.error('Error deleting universal milestone from all:', err);
        }
      } else {
        // remove from single scenario
        await deleteSingleMilestone(m);
        return;
      }
    } else {
      // normal => single scenario
      await deleteSingleMilestone(m);
    }

    // done => brute force
    window.location.reload();
  }

  async function deleteSingleMilestone(m) {
    try {
      const delRes = await authFetch(`/api/premium/milestones/${m.id}`, { method: 'DELETE' });
      if (!delRes.ok) {
        console.error('Failed to delete single milestone:', delRes.status);
        return;
      }
    } catch (err) {
      console.error('Error removing milestone from scenario:', err);
    }
  }

  // ------------------------------------------------------------------
  // 9) Render the timeline
  // ------------------------------------------------------------------
  const allMilestonesCombined = [...milestones.Career, ...milestones.Financial];
  const lastDate = allMilestonesCombined.reduce((latest, m) => {
    const d = new Date(m.date);
    return d > latest ? d : latest;
  }, today);

  function calcPosition(dateString) {
    const start = today.getTime();
    const end = lastDate.getTime();
    const dateVal = new Date(dateString).getTime();
    if (end === start) return 0;
    const ratio = (dateVal - start) / (end - start);
    return Math.min(Math.max(ratio * 100, 0), 100);
  }

  return (
    <div className="milestone-timeline">
      <div className="view-selector">
        {['Career', 'Financial'].map((view) => (
          <button
            key={view}
            className={activeView === view ? 'active' : ''}
            onClick={() => setActiveView(view)}
          >
            {view}
          </button>
        ))}
      </div>

      <button
        onClick={() => {
          if (showForm) {
            // Cancel form
            setShowForm(false);
            setEditingMilestone(null);
            setNewMilestone({
              title: '',
              description: '',
              date: '',
              progress: 0,
              newSalary: '',
              impacts: [],
              isUniversal: 0
            });
            setImpactsToDelete([]);
          } else {
            setShowForm(true);
          }
        }}
      >
        {showForm ? 'Cancel' : '+ New Milestone'}
      </button>

      {showForm && (
        <div className="form">
          {/* Title / Desc / Date / Progress */}
          <input
            type="text"
            placeholder="Title"
            value={newMilestone.title}
            onChange={(e) => setNewMilestone({ ...newMilestone, title: e.target.value })}
          />
          <input
            type="text"
            placeholder="Description"
            value={newMilestone.description}
            onChange={(e) => setNewMilestone({ ...newMilestone, description: e.target.value })}
          />
          <input
            type="date"
            placeholder="Milestone Date"
            value={newMilestone.date}
            onChange={(e) =>
              setNewMilestone((prev) => ({ ...prev, date: e.target.value }))
            }
          />
          <input
            type="number"
            placeholder="Progress (%)"
            value={newMilestone.progress === 0 ? '' : newMilestone.progress}
            onChange={(e) => {
              const val = e.target.value === '' ? 0 : parseInt(e.target.value, 10);
              setNewMilestone((prev) => ({ ...prev, progress: val }));
            }}
          />

          {/* If Financial => newSalary + impacts */}
          {activeView === 'Financial' && (
            <div>
              <input
                type="number"
                placeholder="Full New Salary (e.g., 70000)"
                value={newMilestone.newSalary}
                onChange={(e) => setNewMilestone({ ...newMilestone, newSalary: e.target.value })}
              />
              <p>Enter the full new salary after the milestone occurs.</p>

              <div className="impacts-section border p-2 mt-3">
                <h4>Financial Impacts</h4>
                {newMilestone.impacts.map((imp, idx) => (
                  <div key={idx} className="impact-item border p-2 my-2">
                    {imp.id && <p className="text-xs text-gray-500">Impact ID: {imp.id}</p>}

                    <div>
                      <label>Type: </label>
                      <select
                        value={imp.impact_type}
                        onChange={(e) => updateImpact(idx, 'impact_type', e.target.value)}
                      >
                        <option value="ONE_TIME">One-Time</option>
                        <option value="MONTHLY">Monthly</option>
                      </select>
                    </div>

                    <div>
                      <label>Direction: </label>
                      <select
                        value={imp.direction}
                        onChange={(e) => updateImpact(idx, 'direction', e.target.value)}
                      >
                        <option value="add">Add (Income)</option>
                        <option value="subtract">Subtract (Expense)</option>
                      </select>
                    </div>

                    <div>
                      <label>Amount: </label>
                      <input
                        type="number"
                        value={imp.amount}
                        onChange={(e) => updateImpact(idx, 'amount', e.target.value)}
                      />
                    </div>

                    <div>
                      <label>Start Date:</label>
                      <input
                        type="date"
                        value={imp.start_date || ''}
                        onChange={(e) => updateImpact(idx, 'start_date', e.target.value)}
                      />
                    </div>
                    {imp.impact_type === 'MONTHLY' && (
                      <div>
                        <label>End Date (blank if indefinite): </label>
                        <input
                          type="date"
                          value={imp.end_date || ''}
                          onChange={(e) => updateImpact(idx, 'end_date', e.target.value || '')}
                        />
                      </div>
                    )}

                    <button
                      className="text-red-500 mt-2"
                      onClick={() => removeImpact(idx)}
                    >
                      Remove Impact
                    </button>
                  </div>
                ))}

                <button onClick={addNewImpact} className="bg-gray-200 px-2 py-1 mt-2">
                  + Add Impact
                </button>
              </div>
            </div>
          )}

          {/* universal checkbox */}
          <div style={{ marginTop: '1rem' }}>
            <label>
              <input
                type="checkbox"
                checked={!!newMilestone.isUniversal}
                onChange={(e) =>
                  setNewMilestone((prev) => ({
                    ...prev,
                    isUniversal: e.target.checked ? 1 : 0
                  }))
                }
              />
              {' '}Apply this milestone to all scenarios?
            </label>
          </div>

          <button onClick={saveMilestone} style={{ marginTop: '1rem' }}>
            {editingMilestone ? 'Update' : 'Add'} Milestone
          </button>
        </div>
      )}

      {/* Actual timeline */}
      <div className="milestone-timeline-container">
        <div className="milestone-timeline-line" />

        {milestones[activeView].map((m) => {
          const leftPos = calcPosition(m.date);
          return (
            <div
              key={m.id}
              className="milestone-timeline-post"
              style={{ left: `${leftPos}%` }}
            >
              <div
                className="milestone-timeline-dot"
                onClick={() => handleEditMilestone(m)}
              />
              <div className="milestone-content">
                <div className="title">{m.title}</div>
                {m.description && <p>{m.description}</p>}

                <div className="progress-bar">
                  <div className="progress" style={{ width: `${m.progress}%` }} />
                </div>
                <div className="date">{m.date}</div>

                {m.tasks && m.tasks.length > 0 && (
                  <ul>
                    {m.tasks.map((t) => (
                      <li key={t.id}>
                        <strong>{t.title}</strong>
                        {t.description ? ` - ${t.description}` : ''}
                        {t.due_date ? ` (Due: ${t.due_date})` : ''}
                      </li>
                    ))}
                  </ul>
                )}

                <button
                  onClick={() => {
                    setShowTaskForm(showTaskForm === m.id ? null : m.id);
                    setNewTask({ title: '', description: '', due_date: '' });
                  }}
                >
                  {showTaskForm === m.id ? 'Cancel Task' : 'Add Task'}
                </button>

                <div style={{ marginTop: '0.5rem' }}>
                  <button onClick={() => handleEditMilestone(m)}>Edit</button>
                  <button
                    style={{ marginLeft: '0.5rem' }}
                    onClick={() => setCopyWizardMilestone(m)}
                  >
                    Copy
                  </button>
                  <button
                    style={{ marginLeft: '0.5rem', color: 'red' }}
                    onClick={() => handleDeleteMilestone(m)}
                  >
                    Delete
                  </button>
                </div>

                {showTaskForm === m.id && (
                  <div className="task-form" style={{ marginTop: '0.5rem' }}>
                    <input
                      type="text"
                      placeholder="Task Title"
                      value={newTask.title}
                      onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
                    />
                    <input
                      type="text"
                      placeholder="Task Description"
                      value={newTask.description}
                      onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
                    />
                    <input
                      type="date"
                      value={newTask.due_date}
                      onChange={(e) => setNewTask({ ...newTask, due_date: e.target.value })}
                    />
                    <button onClick={() => addTask(m.id)}>Save Task</button>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {copyWizardMilestone && (
        <CopyMilestoneWizard
          milestone={copyWizardMilestone}
          scenarios={scenarios}
          onClose={() => setCopyWizardMilestone(null)}
          authFetch={authFetch}
        />
      )}
    </div>
  );
}