// src/components/EditableCareerGoals.js
import React, { useState } from 'react';
import { Button } from './ui/button.js';
import { Pencil, Save } from 'lucide-react';
import authFetch from '../utils/authFetch.js';

export default function EditableCareerGoals({ initialGoals='', careerProfileId, onSaved }) {
  const [editing , setEditing ] = useState(false);
  const [draftText, setDraftText] = useState(initialGoals);
  const [saving  , setSaving  ] = useState(false);

  async function save() {
    setSaving(true);
    const res = await authFetch(`/api/premium/career-profile/${careerProfileId}/goals`, {
      method : 'PUT',
      headers: { 'Content-Type':'application/json' },
      body   : JSON.stringify({ career_goals: draftText })
    });
    if (res.ok) {
      onSaved(draftText);
      setEditing(false);
    }
    setSaving(false);
  }

  return (
    <div className="bg-white p-4 rounded shadow">
      <div className="flex items-start justify-between">
        <h3 className="text-lg font-semibold">Your Career Goals</h3>
        {!editing && (
          <Button size="icon" variant="ghost" onClick={() => setEditing(true)}>
            <Pencil className="w-4 h-4" />
          </Button>
        )}
      </div>

      {editing ? (
        <>
          <textarea
            value={draftText}
            onChange={e => setDraftText(e.target.value)}
            rows={4}
            className="w-full border rounded p-2 mt-2"
            placeholder="Describe your short- and long-term goals…"
          />
          <Button onClick={save} disabled={saving} className="mt-2">
            {saving ? 'Saving…' : <><Save className="w-4 h-4 mr-1" /> Save</>}
          </Button>
        </>
      ) : (
        <p className="mt-2 whitespace-pre-wrap text-gray-700">
          {initialGoals || <span className="italic text-gray-400">No goals entered yet.</span>}
        </p>
      )}
    </div>
  );
}