// UserEditProjectModal - Modal for users to edit project notes (limited fields)

function UserEditProjectModal({ project, onClose, onSuccess }) {
    const [formData, setFormData] = React.useState({
        notes: project.notes || '',
    });
    const [loading, setLoading] = React.useState(false);
    const [error, setError] = React.useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        setLoading(true);

        try {
            await ApiUtils.userUpdateProject(project.id, formData);
            onSuccess();
        } catch (err) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-xl shadow-xl max-w-lg w-full">
                <div className="flex items-center justify-between p-6 border-b border-slate-200">
                    <div>
                        <h3 className="text-lg font-semibold text-slate-800">Modifica Note Pratica</h3>
                        <p className="text-sm text-slate-500 mt-1">{project.name}</p>
                    </div>
                    <button onClick={onClose} className="text-slate-400 hover:text-slate-600">
                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <form onSubmit={handleSubmit} className="p-6 space-y-4">
                    {/* Project Info (read-only) */}
                    <div className="p-4 bg-slate-50 rounded-lg space-y-2 text-sm">
                        {project.reference_id && (
                            <div className="flex justify-between">
                                <span className="text-slate-500">Codice Rif.:</span>
                                <span className="text-slate-800 font-mono">{project.reference_id}</span>
                            </div>
                        )}
                        {project.start_date && (
                            <div className="flex justify-between">
                                <span className="text-slate-500">Data Inizio:</span>
                                <span className="text-slate-800">
                                    {new Date(project.start_date).toLocaleDateString('it-IT')}
                                </span>
                            </div>
                        )}
                    </div>

                    {/* Info about status */}
                    <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700">
                        <div className="flex items-center gap-2">
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span>Lo stato della pratica è determinato dall'avanzamento del workflow.</span>
                        </div>
                    </div>

                    {/* Notes */}
                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">Note</label>
                        <textarea
                            value={formData.notes}
                            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                            className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
                            rows={5}
                            placeholder="Inserisci qui le tue note sulla pratica..."
                        />
                        <p className="text-xs text-slate-500 mt-1">Massimo 2000 caratteri</p>
                    </div>

                    {error && (
                        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
                            {error}
                        </div>
                    )}

                    <div className="flex gap-3 pt-4">
                        <button
                            type="button"
                            onClick={onClose}
                            className="flex-1 px-4 py-2 border border-slate-200 text-slate-600 font-medium rounded-lg hover:bg-slate-50 transition-colors"
                        >
                            Annulla
                        </button>
                        <button
                            type="submit"
                            disabled={loading}
                            className="flex-1 px-4 py-2 bg-brand-500 text-white font-medium rounded-lg hover:bg-brand-600 transition-colors disabled:opacity-50"
                        >
                            {loading ? 'Salvataggio...' : 'Salva Modifiche'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}

window.UserEditProjectModal = UserEditProjectModal;